/* Videre · fundo do site: o espaço com estrelas em movimento (W19, raia FUNDO, 29/09/2026).
   Pedido de Tiago: "REMOVE TUDO, QUERO ESTRELAS, COMO SE ESTIVESSE NO ESPAÇO, E ELAS EM
   MOVIMENTO! IGUAL O PAINEL DA CONSTELAÇÃO". A tela (.fundo-espaco) é criada por nav.js
   (iniciarFundoEspacial) só nas páginas escuras, fora da janela da conversa, e marca o <html>
   com .tem-fundo-espaco. Ela fica fixa atrás de todo o conteúdo (z-index -1 no contexto da
   raiz, M44: do tamanho da janela, sem estilo escrito a cada quadro); por isso as faixas de
   página (herói, seções, chamada final, rodapé) deixam de pintar a cor escura por cima dela.
   Cartões, painéis, tabelas e o palco da constelação (M7) continuam com o próprio fundo. Sem
   JS, nada muda: sem a classe no <html>, as faixas mantêm a cor. */

.fundo-espaco {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  /* Altura da janela grande (lvh): no celular, a barra de endereço que some e volta não muda o
     tamanho da tela, e as estrelas não são redistribuídas a cada rolagem. */
  height: 100vh;
  height: 100lvh;
  border: 0;
  pointer-events: none;
}

/* As faixas de página ficam transparentes para o espaço aparecer (as luzes radiais de cada uma,
   quando existem, continuam por cima dele). */
html.tem-fundo-espaco .site-clean.tema-escuro :is(main, main > section, main > div > section, .chamada-final, .secao--demo-produto, .home-bloco, .abertura) {
  background-color: transparent;
}
html.tem-fundo-espaco .site-clean.tema-escuro .rodape {
  background-color: transparent;
  background-image: none;
}

/* Contraste reforçado (M33): o espaço fica mais discreto. */
@media (prefers-contrast: more) {
  .fundo-espaco { opacity: .5; }
}
/* Cores forçadas (M32) e impressão: sem estrelas. */
@media (forced-colors: active) {
  .fundo-espaco { display: none; }
}
@media print {
  .fundo-espaco { display: none; }
}

/* Faixas com seletor de id na folha da página (a especificidade do id vence a regra geral). */
html.tem-fundo-espaco .home-clean #modalidades.home-modalidades { background-color: transparent; }
/* Os filetes de largura total entre as faixas (pé do herói das internas, topo das seções da Home,
   pé das seções do Método, índice do estudo e topo do rodapé) são linhas de fundo: somem com o
   espaço. Bordas de cartão, painel, tabela e índice em caixa continuam. */
html.tem-fundo-espaco .site-clean.tema-escuro :is(.heroi, main > section, main > div > section, .abertura, .home-bloco, .secao, .chamada-final, nav.indice-estudo, .rodape) {
  border-top-color: transparent;
  border-bottom-color: transparent;
}

/* FID-05 · Luzes sem emenda reta. As luzes radiais das faixas de largura total tinham o centro
   fora da própria caixa (88% -12%, -4% 112%, 85% 15% com 24rem, 92% 8% com 30rem, o pé do
   herói em 50% 100%) ou passavam da altura dela; com o espaço atrás, a borda da caixa cortava
   a luz numa linha reta. Aqui cada luz tem o próprio ladrilho (background-size com min(): no
   máximo a altura da caixa) e, dentro dele, uma elipse em % com o centro no meio e o raio
   menor que a metade: a luz some antes de chegar à borda de cima ou de baixo, em qualquer
   altura de caixa (o Chrome não aceita min()/calc() no tamanho do radial-gradient, por isso o
   limite vai no ladrilho). Cores e intensidades são as de antes; muda só a geometria. Os
   painéis com o palco da constelação (M7) ficam como estão. A .chamada-final fica de fora (F3):
   pelo D6 de futuro.css ela é faixa sem fundo, e o #modalidades do :is() daria a esta regra a
   força de um id, que vencia o D6 e religava as luzes nela. */
html.tem-fundo-espaco .site-clean.tema-escuro main :is(.v-painel, #modalidades, .modalidades-painel, .secao--demo-produto):not(:has(.map-stage, .universo__palco, [data-universe], .ex-map, .x-graph-viewport)) {
  background-color: transparent;
  background-image:
    radial-gradient(60% 46% at 84% 50%, var(--luz-azul, rgba(11, 92, 232, .12)), transparent 100%),
    radial-gradient(46% 44% at 6% 50%, var(--luz-ciano, rgba(56, 232, 255, .04)), transparent 100%);
  background-size: 100% min(40rem, 100%), 100% min(32rem, 100%);
  background-position: right top, left bottom;
  background-repeat: no-repeat;
}
/* Painéis suaves (Home e internas do futuro.css) mantêm o brilho mais fraco. */
html.tem-fundo-espaco .site-clean.tema-escuro.home-clean main #modalidades,
html.tem-fundo-espaco .site-clean.tema-escuro:not(.home-clean) main .v-painel:not(.chamada-final) {
  --luz-azul: rgba(11, 92, 232, .07);
  --luz-ciano: rgba(56, 232, 255, .025);
}
/* O chamado final e a demonstração do Enterprise tinham um só brilho, mais forte, no canto. */
html.tem-fundo-espaco .site-clean.tema-escuro main .secao--demo-produto:not(:has(.map-stage, .universo__palco, [data-universe], .ex-map, .x-graph-viewport)) {
  --luz-azul: rgba(11, 92, 232, .18);
  --luz-ciano: rgba(56, 232, 255, 0);
}
/* Herói das internas (F15): a luz grande passava do pé dos heróis curtos. */
html.tem-fundo-espaco .site-clean.tema-escuro:not(.home-clean) main :is(.heroi--pagina, .modalidade-heroi, .produto-heroi) {
  background-image:
    radial-gradient(62% 46% at 78% 50%, rgba(11, 92, 232, .08), transparent 100%),
    radial-gradient(30% 40% at 70% 50%, rgba(56, 232, 255, .035), transparent 100%);
  background-size: 100% min(42rem, 100%), 100% min(22rem, 100%);
  background-position: right top, right top;
  background-repeat: no-repeat;
}
/* Herói da Home: a terceira luz tinha o centro no pé (50% 100%) e era cortada ao meio. */
@media (min-width: 721px) {
  html.tem-fundo-espaco .home-clean .abertura--institucional::before {
    background:
      radial-gradient(42% 48% at 24% 34%, rgba(11, 92, 232, .08), rgba(11, 92, 232, 0) 70%),
      radial-gradient(36% 40% at 72% 52%, rgba(56, 232, 255, .035), rgba(56, 232, 255, 0) 70%),
      radial-gradient(56% 20% at 50% 78%, rgba(11, 92, 232, .06), rgba(11, 92, 232, 0) 100%);
  }
}

/* FID-06 · Filetes soltos de largura grande com as pontas esmaecidas. No espaço, uma linha que
   corta a página de ponta a ponta e termina seca vira uma "régua" sobre as estrelas. Aqui as
   linhas abertas (sem borda nos lados: não são caixas) somem nas pontas; cartões, faixas,
   tabelas e o índice em caixa continuam com a borda inteira. A cor de cada filete é a de antes.
   Só na tela e fora das cores forçadas (lá as bordas do sistema voltam, M32). */
@media screen and (not (forced-colors: active)) {
  html.tem-fundo-espaco .site-clean.tema-escuro :is(.leitura-extra, .home-aplicacoes-grade, .rodape__grade, .pratica-leitura, .produto-indice) {
    border-image-slice: 1;
    border-image-source: linear-gradient(90deg, transparent, var(--filete-cor, #34445C) 14%, var(--filete-cor, #34445C) 86%, transparent);
  }
  html.tem-fundo-espaco .site-clean.tema-escuro .home-aplicacoes-grade { --filete-cor: #2C4A70; }
  html.tem-fundo-espaco .site-clean.tema-escuro .rodape__grade { --filete-cor: #55708F; }
  html.tem-fundo-espaco .site-clean.tema-escuro .pratica-leitura { --filete-cor: #22385A; }
  /* O índice do Produto e da Contratação zera a borda com o atalho "border" numa regra mais
     específica (pag-produto.css), que também zera o border-image: aqui com a mesma força. */
  html.tem-fundo-espaco .site-clean.tema-escuro .m24 .m24-hero .produto-indice {
    --filete-cor: #1C3150;
    border-image-slice: 1;
    border-image-source: linear-gradient(90deg, transparent, var(--filete-cor) 14%, var(--filete-cor) 86%, transparent);
  }
  /* Sobre: a barra de acento fica no começo do filete; só a ponta da direita some. */
  html.tem-fundo-espaco .site-clean.tema-escuro .sobre-assinatura {
    border-image-slice: 1;
    border-image-source: linear-gradient(90deg, rgba(56, 232, 255, .14) 70%, transparent);
  }
  /* Método: o filete de cima de cada subseção. */
  html.tem-fundo-espaco .site-clean.pagina-metodo.tema-escuro .metodo-sub > .env::after {
    background: linear-gradient(90deg, transparent, var(--v-borda-forte, #2C4A70) 14%, var(--v-borda-forte, #2C4A70) 86%, transparent);
  }
}