/* ── Barra do topo (BarraTopo.astro) ── */
/* A barra sangra a largura toda (fundo), mas o MIOLO respeita a mesma
   largura padrão do conteúdo do site (.conteudo, base.css). */
.fas-topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 21;
  height: var(--altura-topbar);
  background: rgb(7 2 18 / .94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgb(126 74 255 / .25);
  font-size: var(--texto-rotulo);
}
.fas-topo .faixa {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  height: 100%;
}

/* ── A esteira de avisos ──────────────────────────────────────── */
.fas-topo .avisos {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 1rem, #000 calc(100% - 1rem), transparent);
}
.fas-topo .fita {
  display: flex;
  width: max-content;
  /* Duração vem de Fãs Tomorrow › Cabeçalho › Velocidade da esteira (--topo-duracao, padrão 40s). */
  animation: topo-rola var(--topo-duracao, 40s) linear infinite;
}
.fas-topo .avisos:hover .fita,
.fas-topo .avisos:focus-within .fita { animation-play-state: paused; }
@keyframes topo-rola { to { transform: translateX(-50%); } }

.fas-topo .lista { display: flex; padding-right: var(--esp-8); }
.fas-topo .aviso {
  flex: 0 0 auto;
  padding-right: var(--esp-8);
  color: var(--cor-texto-suave);
  letter-spacing: .04em;
  white-space: nowrap;
}

/* ── Siga + redes + idioma ────────────────────────────────────── */
.fas-topo .acoes { display: flex; align-items: center; gap: var(--esp-3); flex-shrink: 0; }
.fas-topo .siga { display: none; color: var(--cor-realce); }

/* Mobile: só a esteira e o idioma. Os ícones das redes disputavam os 390px
   com o ticker e o texto passava por baixo deles (revisão mobile de 10/08)
   — as redes já estão no menu lateral e no rodapé. */
.fas-topo .redes { display: none; }
@media (min-width: 48rem) {
  .fas-topo .acoes { gap: var(--esp-4); }
  .fas-topo .redes { display: flex; }
}
@media (min-width: 64rem) { .fas-topo .siga { display: inline; } }
.fas-topo .rede {
  display: grid;
  place-items: center;
  /* A barra inteira tem 44px: o alvo de toque é a altura dela. */
  width: 2rem;
  height: var(--altura-topbar);
  color: var(--cor-texto-suave);
  transition: color var(--dur-rapida) var(--ease-padrao);
}
.fas-topo .rede:hover { color: var(--cor-acento); }

@media (prefers-reduced-motion: reduce) {
  .fas-topo .fita { animation: none; }
  .fas-topo .avisos { overflow-x: auto; mask-image: none; }
  /* Sem movimento, a segunda lista é só repetição — some. */
  .fas-topo .lista[aria-hidden='true'] { display: none; }
}

/* ── Header (Header.astro) ── */
/* Fixa logo abaixo da BarraTopo. body reserva o espaço dos dois fixos
   somados (base.css). */
.fas-header {
  position: fixed;
  inset: var(--altura-topbar) 0 auto 0;
  z-index: 20;
  display: grid;
  box-sizing: border-box;
  padding-block: var(--esp-3);
  background: rgb(10 3 26 / .82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--cor-borda);
}
/* A marca centrada na LARGURA TODA (grid de uma célula, tudo empilhado na
   mesma área): o botão do menu fica por cima à direita, sem empurrar o
   centro — o mesmo truque de sempre para "centrado de verdade". */
/* ── Logado no WordPress: a barra do admin ocupa o topo (32px; 46px no celular) ──
   Os dois fixos descem a altura dela, senão a barra de avisos fica escondida atrás
   e o espaço reservado no body aparece como um vão antes do conteúdo. */
.admin-bar .fas-topo { top: var(--wp-admin--admin-bar-height, 32px); }
.admin-bar .fas-header { top: calc(var(--wp-admin--admin-bar-height, 32px) + var(--altura-topbar)); }
.admin-bar.sem-topo .fas-header { top: var(--wp-admin--admin-bar-height, 32px); }
/* Barra de avisos desligada nas Configurações: o header sobe para o topo. */
.sem-topo .fas-header { top: 0; }

.fas-header .faixa {
  display: grid;
  grid-template-areas: 'faixa';
  align-items: center;
}
.fas-header .faixa > * { grid-area: faixa; }

.fas-header .marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  /* 44px: a marca é link para a home e tinha 38px de altura. */
  min-height: 2.75rem;
  gap: var(--esp-3);
  color: var(--cor-texto);
  font-weight: var(--peso-display);
  white-space: nowrap;
  /* "Aumentar levemente" (10/08): a marca sobe um degrau na escala. */
  font-size: var(--texto-titulo-3);
}
.fas-header .marca:hover { color: var(--cor-texto); }

.fas-header .menu-botao {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: var(--esp-2);
  min-height: 2.75rem;
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-1);
  background: var(--cor-superficie-alta);
  color: var(--cor-texto-suave);
  font-family: inherit;
  font-size: var(--texto-rotulo);
  font-weight: var(--peso-display);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur-rapida) var(--ease-padrao), color var(--dur-rapida) var(--ease-padrao);
}
.fas-header .menu-botao:hover { border-color: var(--cor-borda-ativa); color: var(--cor-texto); }

/* Mobile: a marca escrita FICA (a borboleta sozinha deixava o header
   vazio — revisão mobile de 10/08); só o rótulo "MENU" espera por espaço.
   A escrita nasce um degrau menor e cresce com a tela. */
.fas-header .marca { font-size: var(--texto-corpo); gap: var(--esp-2); }
.fas-header .menu-rotulo { display: none; }
@media (min-width: 30rem) {
  .fas-header .marca { font-size: var(--texto-titulo-3); gap: var(--esp-3); }
  .fas-header .menu-rotulo { display: inline; }
}

/* ── Menu lateral (MenuLateral.astro) ── */
/* O painel É o dialog: encostado à direita, altura inteira. Mobile ocupa a
   tela toda; a partir de 48rem vira uma lâmina de 22rem. */
.fas-menu {
  position: fixed;
  inset: 0 0 0 auto;
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  /* Mobile: OPACO. O painel cobre a tela toda, e a 97% o conteúdo da página
     vazava como texto fantasma atrás dos itens (revisão mobile de 10/08). */
  background: rgb(10 3 26);
  color: var(--cor-texto);
}
@media (min-width: 48rem) {
  .fas-menu {
    width: 22rem;
    background: rgb(10 3 26 / .97);
    border-left: 1px solid rgb(126 74 255 / .35);
    box-shadow: -24px 0 64px rgb(0 0 0 / .5);
  }
}

.fas-menu::backdrop { background: rgb(7 2 18 / .6); }

.fas-menu[open] { animation: menu-entra var(--dur-media) var(--ease-padrao); }
@keyframes menu-entra {
  from { translate: 100% 0; }
  to   { translate: 0 0; }
}

.fas-menu .quadro {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  padding: var(--esp-5) var(--esp-6);
  overflow-y: auto;
}

/* Cabeçalho do menu: marca centrada na largura toda com botão fechar à direita (mesmo padrão de Header.astro) */
.fas-menu .cabeca {
  display: grid;
  grid-template-areas: 'cabeca';
  align-items: center;
  padding-bottom: var(--esp-4);
  border-bottom: 1px solid rgb(126 74 255 / .25);
}
.fas-menu .marca-menu {
  grid-area: cabeca;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* O X evidente, o "fechar" discreto — pedido de 10/08, nessa ordem. */
.fas-menu .fechar {
  grid-area: cabeca;
  justify-self: end;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: var(--esp-1);
  border: 0;
  background: none;
  color: var(--cor-texto);
  font-family: inherit;
  cursor: pointer;
  transition: color var(--dur-rapida) var(--ease-padrao);
}
.fas-menu .fechar:hover { color: var(--cor-acento); }
.fas-menu .fechar-rotulo {
  color: var(--cor-texto-suave);
  font-size: var(--texto-rotulo);
  letter-spacing: var(--tracking-rotulo);
  text-transform: uppercase;
}

.fas-menu .itens { display: grid; padding-top: var(--esp-4); }
.fas-menu .item {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: var(--esp-2);
  border-radius: var(--raio-1);
  color: var(--cor-texto);
  font-weight: var(--peso-forte);
  font-size: var(--texto-corpo);
  transition: background var(--dur-rapida) var(--ease-padrao), color var(--dur-rapida) var(--ease-padrao);
}
.fas-menu .item:hover { background: rgb(126 74 255 / .18); color: var(--cor-acento); }

/* O pé do menu: o mantra e as redes redondas. */
.fas-menu .pe {
  display: grid;
  justify-items: center;
  gap: var(--esp-3);
  padding-top: var(--esp-5);
  border-top: 1px solid rgb(126 74 255 / .25);
}
.fas-menu .mantra { color: var(--cor-realce); }
.fas-menu .redes { display: flex; gap: var(--esp-3); }
.fas-menu .rede {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--cor-borda);
  border-radius: 50%;
  background: var(--cor-superficie-alta);
  color: var(--cor-texto-suave);
  transition: border-color var(--dur-rapida) var(--ease-padrao), color var(--dur-rapida) var(--ease-padrao);
}
.fas-menu .rede:hover { border-color: var(--cor-borda-ativa); color: var(--cor-acento); }

@media (prefers-reduced-motion: reduce) {
  .fas-menu[open] { animation: none; }
}

/* ── Barra de apoio (BarraApoio.astro) ── */
/* ── A rádio nas páginas que não são a home (shell/radio-rodape.php) ──
   É o painel do hero da home, sem CSS próprio: o .fas-radio de cartoes.css já o desenha, e cartoes.css
   carrega em toda página. O que mora aqui é só o enquadramento — o respiro que separa o painel do
   conteúdo da página e o encaixa na descida até o rodapé. */
/* O respiro é o ritmo INTERNO da página (--esp-pagina: 24px no celular, 38px no desk), o mesmo que separa
   as seções de conteúdo logo acima — porque é isso que o painel é aqui: mais um bloco na página, e não uma
   faixa de mudança de seção como o Apoie. Ancorar no respiro do Apoie deixava 80px, mais que o dobro do
   ritmo da página, e o painel ficava boiando longe do conteúdo.
   O fecho do <main> cede o lugar em vez de somar com a margem do painel; é `main.conteudo`, e não
   `.pagina`, porque as páginas do Lab não usam essa classe — e a classe entra para esta regra passar à
   frente do `.noticia.lab` de lab.css, que reserva 120px no fim do <main> como espaço para a barra de
   ação fixa. Passar à frente é seguro: a folga da barra já está na própria ferramenta
   (`:is(.fas-sim, .fas-tt, .fas-check) { padding-bottom: 5rem }`), e com o painel logo abaixo o conteúdo
   do Lab deixa de ser o fim do documento, que era o que aquela segunda reserva protegia. */
main.conteudo:has(+ [data-radio-rodape]) { padding-bottom: var(--esp-pagina); }
.fas-radio-rodape {
  position: relative;
  z-index: 1;
}

/* Barra escura própria, um degrau mais leve que o corpo do rodapé (.82 vs
   .88): a página escurece em etapas até os créditos. */
.fas-apoio {
  position: relative;
  z-index: 1;
  margin-top: var(--esp-8);
  border-top: 1px solid rgb(126 74 255 / .22);
  background: rgb(10 3 26 / .82);
  /* Vidro fosco: faixa única do shell, pode pagar o blur do header. */
  backdrop-filter: blur(12px);
  padding-block: var(--esp-8);
}

.fas-apoio .apoio {
  display: grid;
  justify-items: center;
  gap: var(--esp-5);
  text-align: center;
}
.fas-apoio .apoio-fala { display: grid; gap: var(--esp-3); max-width: 46rem; }
.fas-apoio .apoio-titulo { color: var(--cor-realce); margin-bottom: var(--esp-1); }
.fas-apoio .apoio-texto {
  color: var(--cor-texto-suave);
  font-size: var(--texto-mini);
  line-height: var(--altura-corpo);
}
.fas-apoio .apoio-texto strong { color: var(--cor-texto); font-weight: var(--peso-forte); }

.fas-apoio .apoio-botao {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: 2.75rem;
  padding: var(--esp-2) var(--esp-6);
  border-radius: var(--raio-pill);
  background: var(--gradiente-acao);
  color: var(--fas-lavanda);
  font-size: var(--texto-mini);
  font-weight: var(--peso-forte);
  white-space: nowrap;
  transition: filter var(--dur-rapida) var(--ease-padrao), transform var(--dur-rapida) var(--ease-padrao);
}
.fas-apoio .apoio-botao:hover { filter: brightness(1.12); transform: translateY(-1px); color: var(--fas-lavanda); }

/* Desktop: fala à esquerda, botão à direita na altura do olho. */
@media (min-width: 48rem) {
  .fas-apoio .apoio {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-items: start;
    gap: var(--esp-10);
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fas-apoio .apoio-botao:hover { transform: none; }
}

/* ── Rodapé (Rodape.astro) ── */
/* Sem margem própria: o rodapé emenda na BarraApoio logo acima — os fundos
   descem em degraus contínuos (.82 → .88 → .96) até os créditos. */
.fas-rodape { position: relative; z-index: 1; }

/* Uma faixa escura só, como no concorrente — quase sólida, a nebulosa
   ainda atravessa de leve. O divisor vive DENTRO dela. */
.fas-rodape .faixa-corpo {
  background: rgb(10 3 26 / .94);
  padding-block: var(--esp-6) var(--esp-10);
}

/* ── O divisor de horizonte ─────────────────────────────────────────
   A linha entra ciano e sai lilás — as duas pontas do gradiente da marca —
   e a borboleta pousa no meio. */
.fas-rodape .divisor {
  display: flex;
  align-items: center;
  gap: var(--esp-5);
  padding-inline: var(--gutter);
  margin-bottom: var(--esp-8);
}
.fas-rodape .divisor::before,
.fas-rodape .divisor::after {
  content: '';
  height: 1px;
  flex: 1;
}
.fas-rodape .divisor::before {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fas-ciano) 55%, transparent));
}
.fas-rodape .divisor::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--fas-brilho-borboleta) 55%, transparent), transparent);
}

/* A borboleta pousada: o bater de asas do enxame do fundo
   (Borboletas.astro), em câmera lenta. A cadeia perspective → preserve-3d
   → asas é a mesma de lá; ver os comentários longos em Borboletas.astro. */
.fas-rodape .pouso {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  perspective: 420px;
  /* Glow constante, fora dos keyframes: a revisão de 10/08 pediu a batida
     sem o pulso de brilho — e com prefers-reduced-motion a borboleta
     parada também não pode perder o brilho. */
  filter: drop-shadow(0 0 6px rgb(150 96 255 / .35));
  animation: pouso-corpo 3.5s ease-in-out infinite;
}
.fas-rodape .camera {
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(-24deg);
}
.fas-rodape .pouso .borboleta { display: block; width: 100%; height: 100%; filter: none; }
.fas-rodape .pouso .borboleta svg { width: 100%; height: 100%; }
.fas-rodape .pouso .asa--esq { animation: pouso-asa-esq 3.5s ease-in-out infinite; }
.fas-rodape .pouso .asa--dir { animation: pouso-asa-dir 3.5s ease-in-out infinite; }

@keyframes pouso-corpo {
  0%, 100% { transform: translateY(0); }
  32%      { transform: translateY(-6%); }
}
/* Repouso mais aberto que o voo (14° vs 34°) e pico ANTES do fechado total
   (56° vs 74° do enxame): borboleta pousada exibe as asas e nunca vira uma
   lâmina vertical — revisão de 10/08. */
@keyframes pouso-asa-esq {
  0%, 100% { transform: rotateZ(2deg)  rotateY(14deg); }
  32%      { transform: rotateZ(14deg) rotateY(56deg); }
}
@keyframes pouso-asa-dir {
  0%, 100% { transform: rotateZ(-2deg)  rotateY(-14deg); }
  32%      { transform: rotateZ(-14deg) rotateY(-56deg); }
}

.fas-rodape .corpo { display: grid; justify-items: center; gap: var(--esp-rodape-corpo); }

/* ── O aviso legal, numa caixa — o formato do site atual. */
.fas-rodape .aviso {
  max-width: 56rem;
  padding: var(--esp-5) var(--esp-6);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-2);
  background: var(--cor-superficie);
  color: var(--cor-texto-suave);
  font-size: var(--texto-mini);
  line-height: var(--altura-corpo);
}
.fas-rodape .aviso strong { color: var(--cor-texto); font-weight: var(--peso-forte); }

/* ── O mapa, centrado como o rodapé do site atual: identidade, uma linha
   de seções, uma linha institucional e as redes redondas. */
.fas-rodape .mapa {
  display: grid;
  justify-items: center;
  gap: var(--esp-4);
  width: 100%;
  padding-top: var(--esp-8);
  border-top: 1px solid rgb(126 74 255 / .18);
  text-align: center;
}

.fas-rodape .identidade { display: grid; justify-items: center; gap: var(--esp-1); margin-bottom: var(--esp-2); }
.fas-rodape .marca-rodape {
  display: inline-flex;
  align-items: center;
  /* 44px de alvo, como todo link de rodapé. */
  min-height: 2.75rem;
  gap: var(--esp-3);
  color: var(--cor-texto);
  font-weight: var(--peso-display);
}
.fas-rodape .marca-rodape:hover { color: var(--cor-texto); }
.fas-rodape .lema { color: var(--cor-realce); font-size: var(--texto-mini); font-weight: var(--peso-forte); }
.fas-rodape .mantra { color: var(--cor-texto-suave); font-size: var(--texto-rotulo); letter-spacing: .08em; text-transform: uppercase; opacity: .75; }

.fas-rodape .linha-links ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--esp-1) var(--esp-6);
}
.fas-rodape .link-rodape {
  display: inline-flex;
  align-items: center;
  /* 44px de alvo: link de rodapé em celular é onde o dedo erra mais. */
  min-height: 2.75rem;
  font-size: var(--texto-mini);
  font-weight: var(--peso-forte);
}
.fas-rodape .linha-institucional .link-rodape { color: var(--cor-texto-suave); font-weight: var(--peso-medio); }
.fas-rodape .linha-institucional .link-rodape:hover { color: var(--cor-link-hover); }

.fas-rodape .lista-redes { display: flex; justify-content: center; gap: var(--esp-3); }
.fas-rodape .rede {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--cor-borda);
  border-radius: 50%;
  background: var(--cor-superficie-alta);
  color: var(--cor-texto-suave);
  transition: border-color var(--dur-rapida) var(--ease-padrao), color var(--dur-rapida) var(--ease-padrao);
}
.fas-rodape .rede:hover { border-color: var(--cor-borda-ativa); color: var(--cor-acento); }

/* ── Créditos: o ponto final sólido da página, tudo centrado. */
.fas-rodape .faixa-creditos {
  border-top: 1px solid rgb(126 74 255 / .18);
  background: rgb(7 2 18 / .96);
  padding-block: var(--esp-5);
}
.fas-rodape .creditos {
  display: grid;
  justify-items: center;
  gap: var(--esp-1);
  text-align: center;
}
/* texto-mini, não texto-rotulo: 10px de crédito é ilegível no celular
   (revisão mobile de 10/08) e aqui não é rótulo, é frase. */
.fas-rodape .direitos { color: var(--cor-texto-suave); font-size: var(--texto-mini); }
.fas-rodape .dev { color: rgb(from var(--cor-texto-suave) r g b / .75); font-size: var(--texto-mini); }
/* O link do crédito é o único do site que fica DENTRO de um parágrafo de
   texto corrido, e o `base.css` tira o sublinhado de todo link. Sem o
   sublinhado, a única coisa que o distingue da frase é a cor, o que o axe
   acusa como `link-in-text-block` (WCAG 1.4.1: informação não pode depender
   só de cor). Os outros links do rodapé são itens de lista, onde a posição
   já os distingue. */
.fas-rodape .dev a {
  color: var(--tom-rosa);
  font-weight: var(--peso-forte);
  text-decoration: none;
  transition: color var(--dur-rapida) var(--ease-padrao);
}
.fas-rodape .dev a:hover { color: var(--cor-acento); }

@media (prefers-reduced-motion: reduce) {
  .fas-rodape .pouso,
  .fas-rodape .pouso .asa--esq,
  .fas-rodape .pouso .asa--dir { animation: none; }
}


/* ── Voltar ao topo (shell/voltar-ao-topo.php + voltar-ao-topo.js) ──
   Único morador do canto inferior direito. O player da rádio já morou aqui e saiu: virou a faixa acima do
   bloco do Apoie, porque flutuando ele cobria conteúdo o tempo todo para servir a quem talvez nem
   estivesse ouvindo. Este fica porque um atalho de voltar ao topo é convenção, ocupa um botão e não tem
   nome de música variando de largura.
   z-index 18: acima do conteúdo, abaixo da barra de ação do Lab (19) e dos dialogs (top layer). */
.fas-voltar-ao-topo {
  position: fixed;
  z-index: 18;
  inset: auto var(--gutter) calc(var(--esp-4) + env(safe-area-inset-bottom)) auto;
  display: grid;
  place-items: center;
  width: var(--alvo-toque);
  height: var(--alvo-toque);
  border: 1px solid var(--cor-borda);
  border-radius: 50%;
  /* Opaco: ele passa por cima de texto, e a superfície translúcida do tema deixaria o conteúdo
     atravessar — mesma decisão do menu lateral e do modal do mural. */
  background: rgb(26 11 61);
  color: var(--cor-acento);
  box-shadow: 0 12px 32px rgb(0 0 0 / .45);
  cursor: pointer;
}
.fas-voltar-ao-topo:hover { filter: brightness(1.2); }
.fas-voltar-ao-topo:focus-visible { outline: 2px solid var(--cor-borda-ativa); outline-offset: 3px; }

/* As barras de ação do Lab ocupam o pé da tela no celular. O botão sobe nas páginas que TÊM uma delas, e
   não só enquanto ela aparece: a barra entra e sai conforme a rolagem, e um botão que pulasse junto seria
   pior que um botão dois dedos mais alto o tempo todo. A navegação do planner de timetable entra na conta
   pelo mesmo motivo — ela só vira fixa nas etapas 3 e 4, mas o botão "Continuar" fica no pé desde a 1. */
@media (max-width: 59.99rem) {
  body:has(.fas-sim__barra) .fas-voltar-ao-topo,
  body:has(.fas-tt__navegacao) .fas-voltar-ao-topo { bottom: calc(var(--esp-4) + 4rem + env(safe-area-inset-bottom)); }
}

}