/* Videre · camada "futuro" (W19, P5, 28/09/2026). Fidelidade aos conceitos do visual 2.5
   pedida por Tiago (28/09 ~13h15–13h25). Especificação: _w19/visual-image25/p5/spec-P5-futurista.md.
   §A: tokens de luz, o ÚNICO lugar deles. §B: a camada das páginas internas (C6). Carregado
   pelas 21 páginas que carregam style.css. Arquivos carregados fora das páginas que têm este
   arquivo não dependem destes tokens: todo var(--fx-*) neles leva reserva literal. */

/* §A · Tokens de luz */
:root {
  /* superfícies */
  --fx-fundo: #010309; --fx-elevado: #050B16; --fx-cartao: #0A1526;   /* escurecidos na raia FUNDO (29/09); eram #03060D, #07101D e #0C192B */
  /* matizes (M6 + acento lilás do 2.5, R-06) */
  --fx-cobalto: #0B5CE8; --fx-cobalto-escuro: #0746C8; --fx-cobalto-medio: #2F6BEF;
  --fx-cobalto-claro: #5B8CFF; --fx-azul-ceu: #47B8FF; --fx-ciano: #38E8FF; --fx-branco-luz: #EAFDFF;
  --fx-lilas: #9AA4FA;          /* ponta lilás do 2.5: título da dobra 2 e volume. Para voltar ao M6 puro: #5B8CFF */
  --fx-indigo: #3F3FD0; --fx-violeta: #512BC2;   /* pílula ativa. Para voltar ao cobalto: #0746C8 e #0A2F8E */
  /* bordas */
  --fx-borda: rgba(91, 140, 255, .30);           /* decorativa */
  --fx-borda-forte: #3A6BB0;                     /* 3,78:1 sobre #03060D: controles */
  --fx-borda-controle: #4A7795;                  /* 3,9–4,2:1: pílulas e barra da constelação */
  --fx-borda-luz: rgba(56, 232, 255, .60);
  /* brilho (halo), sempre estático */
  --fx-halo: 0 0 0 1px rgba(91, 140, 255, .10), 0 0 28px rgba(11, 92, 232, .20), 0 22px 56px rgba(0, 0, 0, .45);
  --fx-halo-forte: 0 0 0 1px rgba(56, 232, 255, .35), 0 0 34px rgba(56, 232, 255, .18), 0 22px 56px rgba(0, 0, 0, .45);
  --fx-reflexo: inset 0 1px 0 rgba(255, 255, 255, .08);
  /* F12-LUZ tarefa 2 (W19q): o vidro deixa de ser o degradê vertical liso (parecia cor única) e passa a
     uma camada só, com a luz no canto de cima (radial): todo consumidor ganha a luz sem mudar a lista de camadas. */
  --fx-vidro: radial-gradient(130% 150% at 0% 0%, rgba(30, 78, 128, .78) 0%, rgba(18, 41, 74, .75) 34%, rgba(9, 20, 37, .84) 68%, rgba(6, 13, 25, .90) 100%);
  /* nó luminoso (núcleo, corpo, anel) */
  --fx-no: radial-gradient(circle, #FFFFFF 0 2px, #9FF6FF 3px, #38E8FF 5px, rgba(56, 232, 255, .40) 6.5px, rgba(11, 92, 232, .30) 8.5px, rgba(11, 92, 232, 0) 11px);
  /* tempos (todos fora de 4–6 s, M23) e curvas (M11/M12). A grade do piso e os tempos dela
     saíram com os fundos de linhas (raia FUNDO, 29/09). */
  --fx-t-trilha: 9s; --fx-t-trilha-calmo: 20s;
  --fx-t-cintila: 9s; --fx-t-respira: 14s; --fx-t-cometa: 11s; --fx-t-cometa-calmo: 24s;
  --fx-ease-sai: cubic-bezier(.2, .7, .3, 1); --fx-ease-respira: cubic-bezier(.45, 0, .55, 1);
  /* W19 · P6 (29/09): anel de foco, barras de rolagem e estados (alerta, erro, sucesso). */
  --fx-anel-foco: 0 0 0 2px #03060D, 0 0 0 4px #38E8FF, 0 0 14px 2px rgba(56, 232, 255, .45); /* EX3-04 */
  --fx-barra-polegar: rgba(56, 232, 255, .42); --fx-barra-trilho: #03060D;                        /* EX3-05/06 */
  --fx-alerta: #FFC575; --fx-alerta-borda: rgba(255, 197, 117, .55);
  --fx-erro: #FF8A8A; --fx-erro-borda: #E5484D;
  --fx-sucesso: #3DDC97; --fx-sucesso-borda: rgba(61, 220, 151, .55);
  /* F12-LUZ (W19q, Tiago 06/10: "LUZ EM TODOS OS QUADROS, NENHUM QUADRO COM COR SOLIDA.. BORDA EM TODOS OS
     CARDS"): a linguagem da ficha das normas (W19o) e do bloco do Método (F11) num lugar só. Cada camada
     leva posição e tamanho próprios (sintaxe curta), para entrar em qualquer lista de fundo sem
     desalinhar as outras. Vidro translúcido em diagonal (nunca cor chapada), luz radial nos cantos,
     fio de luz no topo, borda acesa nos 4 lados (mais viva no topo) e halo. Tudo estático. */
  --luz-fio:
    linear-gradient(90deg, rgba(56, 232, 255, 0), rgba(56, 232, 255, .85) 30%, #EAFDFF 50%, rgba(56, 232, 255, .85) 70%, rgba(56, 232, 255, 0)) 50% 0 / 76% 1px no-repeat,
    radial-gradient(50% 100% at 50% 0%, rgba(56, 232, 255, .20), rgba(56, 232, 255, 0)) 50% 0 / 76% 16px no-repeat;
  --luz-canto:
    radial-gradient(60% 140% at 0% 0%, rgba(56, 232, 255, .11), rgba(56, 232, 255, 0) 62%) 0 0 / 100% 100% no-repeat,
    radial-gradient(55% 120% at 100% 100%, rgba(11, 92, 232, .16), rgba(11, 92, 232, 0) 66%) 0 0 / 100% 100% no-repeat;
  /* Cartão escuro (era o degradê vertical .92 → .98, quase opaco e liso): uma camada só, com a luz no
     canto de cima, para entrar em qualquer lista de fundo sem desalinhar as outras camadas. */
  --luz-cartao: radial-gradient(130% 150% at 0% 0%, rgba(26, 62, 106, .93) 0%, rgba(14, 32, 57, .94) 36%, rgba(7, 16, 29, .96) 66%, rgba(5, 11, 21, .98) 100%);
  --luz-vidro: linear-gradient(165deg, rgba(20, 45, 80, .66) 0%, rgba(10, 22, 40, .74) 50%, rgba(6, 13, 25, .84) 100%);
  --luz-fundo: var(--luz-fio), var(--luz-canto), var(--luz-vidro);
  /* Fundo de botão e selo: vidro curto com luz no canto de cima. */
  --luz-chip:
    radial-gradient(80% 120% at 0% 0%, rgba(56, 232, 255, .14), rgba(56, 232, 255, 0) 70%) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(20, 45, 80, .55) 0%, rgba(6, 13, 25, .62) 100%);
  /* Controles e selos sobre a constelação e o caso (p6): mesmo vidro curto, mais denso (≈ .85, a leitura
     sobre as estrelas continua a mesma do fundo chapado que ele substitui). */
  --luz-chip-denso:
    radial-gradient(80% 120% at 0% 0%, rgba(56, 232, 255, .16), rgba(56, 232, 255, 0) 70%) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(20, 46, 82, .84) 0%, rgba(4, 14, 27, .88) 100%);
  /* Campo de texto: vidro escuro com luz no canto (o texto digitado continua sobre fundo quase preto). */
  --luz-campo:
    radial-gradient(70% 140% at 0% 0%, rgba(56, 232, 255, .08), rgba(56, 232, 255, 0) 70%) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(10, 22, 40, .92) 0%, rgba(4, 10, 20, .94) 100%);
  --luz-chip-aceso:
    radial-gradient(90% 130% at 0% 0%, rgba(56, 232, 255, .24), rgba(56, 232, 255, 0) 72%) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(24, 58, 104, .70) 0%, rgba(8, 20, 38, .74) 100%);
  /* Cantoneiras F11 (8 barras de 2 px e o brilho de 6 px), nas mesmas posições do F11 (o anel aceso
     do vivo-sinais.css, .vs-painel > vs-brilho::after, desenha por cima a 11/9 px). */
  --luz-cantos:
    linear-gradient(#38E8FF, #38E8FF) 10px 10px / 18px 2px no-repeat,
    linear-gradient(#38E8FF, #38E8FF) 10px 10px / 2px 18px no-repeat,
    linear-gradient(#38E8FF, #38E8FF) calc(100% - 10px) 10px / 18px 2px no-repeat,
    linear-gradient(#38E8FF, #38E8FF) calc(100% - 10px) 10px / 2px 18px no-repeat,
    linear-gradient(#38E8FF, #38E8FF) 10px calc(100% - 10px) / 18px 2px no-repeat,
    linear-gradient(#38E8FF, #38E8FF) 10px calc(100% - 10px) / 2px 18px no-repeat,
    linear-gradient(#38E8FF, #38E8FF) calc(100% - 10px) calc(100% - 10px) / 18px 2px no-repeat,
    linear-gradient(#38E8FF, #38E8FF) calc(100% - 10px) calc(100% - 10px) / 2px 18px no-repeat,
    linear-gradient(rgba(56, 232, 255, .18), rgba(56, 232, 255, .18)) 8px 8px / 22px 6px no-repeat,
    linear-gradient(rgba(56, 232, 255, .18), rgba(56, 232, 255, .18)) 8px 8px / 6px 22px no-repeat,
    linear-gradient(rgba(56, 232, 255, .18), rgba(56, 232, 255, .18)) calc(100% - 8px) calc(100% - 8px) / 22px 6px no-repeat,
    linear-gradient(rgba(56, 232, 255, .18), rgba(56, 232, 255, .18)) calc(100% - 8px) calc(100% - 8px) / 6px 22px no-repeat;
  /* Borda (topo, direita, base, esquerda): ciano no topo, cobalto nas laterais, mais fraca na base.
     Controles (links-cartão, botões) usam -controle: laterais #3A6BB0 (3,78:1, F13). */
  --luz-borda: rgba(56, 232, 255, .55) rgba(91, 140, 255, .42) rgba(91, 140, 255, .30) rgba(91, 140, 255, .42);
  --luz-borda-controle: rgba(56, 232, 255, .80) #3A6BB0 #3A6BB0 #3A6BB0;
  --luz-borda-acesa: #38E8FF rgba(56, 232, 255, .62) rgba(91, 140, 255, .55) rgba(56, 232, 255, .62);
  --luz-halo: inset 0 1px 0 rgba(234, 253, 255, .10), inset 0 0 48px rgba(56, 232, 255, .045), 0 0 0 1px rgba(56, 232, 255, .05), 0 0 34px rgba(56, 232, 255, .10), 0 24px 60px rgba(0, 0, 0, .42);
  --luz-halo-leve: inset 0 1px 0 rgba(234, 253, 255, .10), 0 0 0 1px rgba(56, 232, 255, .05), 0 0 18px rgba(56, 232, 255, .10);
  --luz-halo-aceso: inset 0 1px 0 rgba(234, 253, 255, .14), inset 0 0 56px rgba(56, 232, 255, .07), 0 0 0 1px rgba(56, 232, 255, .22), 0 0 44px rgba(56, 232, 255, .18), 0 24px 60px rgba(0, 0, 0, .42);
  --luz-halo-leve-aceso: inset 0 1px 0 rgba(234, 253, 255, .14), 0 0 0 1px rgba(56, 232, 255, .25), 0 0 18px rgba(56, 232, 255, .26);
}

/* ===========================================================================
   §B · Camada das páginas internas (C6, spec §2.6, efeitos F01–F16)
   Escopo: .site-clean.tema-escuro:not(.home-clean). A Home não recebe nada daqui. O
   ".tema-escuro" a mais protege as páginas que continuam claras (404, área interna e as
   versões preparadas do contato): elas carregam o arquivo e não mudam.
   M7: nenhum seletor alcança .map-stage, .universo__palco, [data-universe], .ex-map nem
   .x-graph-viewport; as regras de seção os excluem com :has(). Nenhuma animação própria:
   a grade do pé do herói (F03), os nós dos cantos (F04) e os filetes de seção e do rodapé
   (F10/F16) saíram com os fundos de linhas (raia FUNDO, 29/09); o fundo é o espaço com
   estrelas em movimento (nav.js). O resto é estático.
   Sem backdrop-filter: o vidro é gradiente, filete e brilho estático.
   ========================================================================= */

/* --- F01 · Escurecimento: as cores claras fixas das folhas de página ganham a contraparte
   escura (pag-metodo, pag-institucional-b, editorial, style.css). Só na tela: a
   impressão continua clara. Os tokens do tema escuro vêm de componentes.css. */
@media screen {
  .site-clean.tema-escuro:not(.home-clean) main .indice-estudo { background: transparent; }
  /* W19q r2: estas regras (0,5,1) vencem a do F12.1 (um seletor por quadro, 0,4,2); a luz da lista
     (borda acesa, fio no topo, luz no canto, halo) e o hover aceso entram aqui também. */
  .site-clean.tema-escuro:not(.home-clean):is(.pagina-metodo, .pagina-enterprise) .indice-estudo ul {
    border-color: var(--luz-borda);
    background: var(--luz-fundo);
    box-shadow: var(--luz-halo);
  }
  .site-clean.tema-escuro:not(.home-clean):is(.pagina-metodo, .pagina-enterprise) .indice-estudo li { border-color: rgba(91, 140, 255, .26); }
  .site-clean.tema-escuro:not(.home-clean):is(.pagina-metodo, .pagina-enterprise) .indice-estudo a:hover { background: radial-gradient(70% 90% at 50% 100%, rgba(56, 232, 255, .16), rgba(56, 232, 255, 0) 72%), linear-gradient(180deg, rgba(24, 58, 104, .45), rgba(8, 20, 38, .30)); color: #FFFFFF; }
  .site-clean.tema-escuro:not(.home-clean):is(.pagina-metodo, .pagina-enterprise) .indice-estudo a::after { color: var(--fx-ciano); }

  .site-clean.tema-escuro:not(.home-clean).pagina-metodo :is(.v-trilha.metodo-criterio, .metodo-linhagem) {
    border-color: var(--luz-borda);
    background: var(--luz-fundo);
    box-shadow: var(--luz-halo);
  }
  .site-clean.tema-escuro:not(.home-clean).pagina-metodo .metodo-linhagem > div + div,
  .site-clean.tema-escuro:not(.home-clean).pagina-metodo .metodo-referencias__lista > li { border-color: #22385A; }

  .site-clean.tema-escuro:not(.home-clean).pagina-enterprise .blueprint-metodo__painel { background: var(--fx-cartao); }
  .site-clean.tema-escuro:not(.home-clean) main .selo--grafite { border-color: #34445C; background: #111D2E; color: #C9D6E8; }

  /* W19q r2: esta regra (0,5,0) vence a do F12.1 (um seletor por quadro, 0,4,2); por isso a luz da
     lista (borda acesa, fio no topo e luz no canto) entra aqui também. */
  .site-clean.tema-escuro:not(.home-clean) .m24--confianca .protecao-detalhe {
    border-color: var(--luz-borda);
    background: var(--luz-fio), var(--luz-canto), var(--luz-cartao);
    box-shadow: var(--luz-halo);
  }
  .site-clean.tema-escuro:not(.home-clean) .m24--confianca .protecao-detalhe .prosa { border-top-color: #22385A; }
  .site-clean.tema-escuro:not(.home-clean) .m24--confianca .protecao-detalhe summary::after { color: var(--fx-ciano); }

  /* F14 · Formulário do Contato no escuro, com a moldura de vidro (F11) e campos de borda ≥ 3:1. */
  .site-clean.tema-escuro:not(.home-clean) :is(.m24--contato .m24-form, .contato-form) {
    border: 1px solid rgba(91, 140, 255, .38);
    background: var(--fx-vidro);
    box-shadow: var(--fx-reflexo), var(--fx-halo);
  }
  .site-clean.tema-escuro:not(.home-clean) :is(.m24--contato .m24-field, .campo) :is(input, textarea, select) {
    border: 1px solid var(--fx-borda-forte);
    background: var(--fx-elevado);
    color: #F6F8FC;
  }
  .site-clean.tema-escuro:not(.home-clean) :is(.m24--contato .m24-field, .campo) :is(input, textarea, select):hover { border-color: #5B8CFF; }
  .site-clean.tema-escuro:not(.home-clean) :is(.m24--contato .m24-field, .campo) :is(input, textarea, select):focus-visible {
    outline: 2px solid var(--fx-ciano);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(56, 232, 255, .18);
  }
  .site-clean.tema-escuro:not(.home-clean) :is(.m24--contato .m24-field, .campo) :is(input, textarea):read-only { background: var(--fx-cartao); }
  .site-clean.tema-escuro:not(.home-clean) :is(.m24--contato, .contato-form) ::placeholder { color: #93A7C2; opacity: 1; }
}

/* --- F02 · Brilho radial de fundo. Aparece onde a seção é transparente; os heróis e os painéis
   de seção passam a transparentes (F15 dá a luz). Vai no fundo do próprio body (propagado à
   tela, rola com a página). O ladrilho estático de estrelas (fundo-estrelas.svg) saiu na raia
   FUNDO (29/09): as estrelas agora se movem na tela fixa de nav.js (fundo-espaco.css), que
   fica ATRÁS de todo o conteúdo (uma camada fixa POR CIMA da tela animada é que puxava o
   conteúdo para outra camada, revisão da P5, COD-01/MOV-02). */
@media screen {
  .site-clean.tema-escuro:not(.home-clean) {
    background-image:
      radial-gradient(60rem 36rem at 88% 8%, rgba(11, 92, 232, .07), transparent 70%),
      radial-gradient(44rem 30rem at 6% 96%, rgba(56, 232, 255, .03), transparent 70%);
    /* As duas luzes ficam na primeira tela (no pé da página, a segunda caía longe do leitor). */
    background-position: 0 0, 0 0;
    background-size: 100% 100vh, 100% 100vh;
    background-repeat: no-repeat, no-repeat;
  }
  .site-clean.tema-escuro:not(.home-clean) main :is(.secao, .m24-section, .conexoes-pagina):not(:has(.map-stage, .universo__palco, [data-universe], .ex-map, .x-graph-viewport)) { background-color: transparent; }
  .site-clean.tema-escuro:not(.home-clean) main .v-painel:not(:has(.map-stage, .universo__palco, [data-universe], .ex-map, .x-graph-viewport)) {
    background:
      radial-gradient(60rem 30rem at 88% -12%, rgba(11, 92, 232, .08), transparent 62%),
      radial-gradient(42rem 26rem at -4% 112%, rgba(56, 232, 255, .03), transparent 60%),
      linear-gradient(180deg, rgba(5, 11, 22, .4), rgba(1, 3, 9, 0));
  }
}

/* --- F15 · Brilho ambiente no herói (o fundo opaco sai para as estrelas aparecerem). */
.site-clean.tema-escuro:not(.home-clean) main :is(.heroi--pagina, .modalidade-heroi, .produto-heroi) {
  background:
    radial-gradient(56rem 34rem at 78% 30%, rgba(11, 92, 232, .08), transparent 68%),
    radial-gradient(28rem 20rem at 70% 18%, rgba(56, 232, 255, .035), transparent 70%);
}

/* --- F03/F04 · A grade em perspectiva no pé do herói e os nós de constelação dos cantos
   saíram com os fundos de linhas (raia FUNDO, 29/09); os pseudos do herói voltam ao
   display:none de style.css. O caso didático mantém o contexto isolado da chuva. */
.site-clean.tema-escuro:not(.home-clean) main .caso-didatico { position: relative; isolation: isolate; overflow-x: clip; }

/* --- F05 · Expressão-chave do h1 em gradiente (palavras que já existem no título).
   Pontas #5B8CFF (6,41:1) e #38E8FF (13,67:1) sobre #03060D; reserva sólida sem clip. */
.site-clean.tema-escuro:not(.home-clean) :is(.texto-gradiente, .caso-didatico h1 > span, .x-heading h1 > span) { color: #5B8CFF; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .site-clean.tema-escuro:not(.home-clean) :is(.texto-gradiente, .caso-didatico h1 > span, .x-heading h1 > span) {
    background-image: linear-gradient(90deg, #5B8CFF 0%, #38E8FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  .site-clean.tema-escuro:not(.home-clean) :is(.texto-gradiente, .caso-didatico h1 > span, .x-heading h1 > span)::selection { color: #03060D; -webkit-text-fill-color: #03060D; background: #38E8FF; }
}

/* --- F06 · Nó luminoso antes do rótulo em versalete (estático). No herói, traço de 40 px
   que termina no nó. Fora do rodapé (main) e fora dos rótulos de dentro de cartões e faixas. */
.site-clean.tema-escuro:not(.home-clean) main :is(.secao, .m24-section, .chamada-final, .conexoes-pagina) :is(.versalete, .m24-meta, .v-rotulo):not(:where(.v-card *, .v-faixa *, .caso-didatico *, .experiencias *))::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 .75em .1em 0;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--fx-ciano);
  box-shadow: 0 0 0 3px rgba(56, 232, 255, .14), 0 0 12px 2px rgba(56, 232, 255, .55);
}
.site-clean.tema-escuro:not(.home-clean) main .heroi--pagina :is(.env, .modalidade-heroi__texto) > .versalete {
  position: relative;
  display: inline-block;
  padding-left: 52px;
}
.site-clean.tema-escuro:not(.home-clean) main .heroi--pagina :is(.env, .modalidade-heroi__texto) > .versalete::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, rgba(56, 232, 255, 0), #38E8FF);
}
.site-clean.tema-escuro:not(.home-clean) main .heroi--pagina :is(.env, .modalidade-heroi__texto) > .versalete::after {
  content: "";
  position: absolute;
  top: calc(50% - 3.5px);
  left: 38px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fx-ciano);
  box-shadow: 0 0 0 3px rgba(56, 232, 255, .14), 0 0 12px 2px rgba(56, 232, 255, .55);
}

/* --- F07 · Cartões com borda luminosa, halo e reflexo. No tema escuro a variante --claro
   também é escura, então entra. O ::after (borda que acende de cima para baixo) fica de
   fora onde já é usado (comparador). */
.site-clean.tema-escuro:not(.home-clean) main :is(.v-card, .modalidade-card):not(:where(.caso-didatico *, .experiencias *)) {
  border-color: var(--fx-borda);
  background: var(--luz-canto), var(--luz-cartao); /* luz dos cantos: F12-LUZ tarefa 2 */
  box-shadow: var(--fx-reflexo), var(--fx-halo);
}
/* W19q r2 (M8): o pacote de /contratacao/ (#personalizado, .pacote-cartao, .chamada-final) é da raia
   W19p e fica exatamente como na base c8b0033: o fundo do cartão e o --fx-vidro de antes (a mesma força
   da regra acima, pelo :where). A junção confere a combinação com a W19p. */
.site-clean.tema-escuro:not(.home-clean) main :is(.v-card, .modalidade-card):not(:where(.caso-didatico *, .experiencias *)):where(.pagina-contratacao :is(#personalizado, .pacote-cartao, .chamada-final), .pagina-contratacao :is(#personalizado, .pacote-cartao, .chamada-final) *) {
  background: linear-gradient(180deg, rgba(16, 36, 64, .92) 0%, rgba(7, 16, 29, .96) 55%, rgba(5, 11, 21, .98) 100%);
}
.site-clean.tema-escuro:not(.home-clean).pagina-contratacao main :is(#personalizado, .pacote-cartao, .chamada-final) { --fx-vidro: linear-gradient(180deg, rgba(20, 45, 80, .72) 0%, rgba(7, 16, 29, .88) 100%); }
.site-clean.tema-escuro:not(.home-clean) main :is(.v-card, .modalidade-card):not(:where(.caso-didatico *, .experiencias *))::before {
  height: 2px;
  box-shadow: 0 0 14px 1px rgba(56, 232, 255, .45);
}
/* Correção 2 da W19q: o fio fica na parte reta da borda de cima (recuado o raio de cada lado); com a
   largura toda e o raio 18px 18px 0 0 em 2 px de altura, ele passava reto por fora da curva dos cantos.
   Fora da raia da W19p (M8). */
.site-clean.tema-escuro:not(.home-clean) main :is(.v-card, .modalidade-card):not(:where(.caso-didatico *, .experiencias *)):not(:where(.pagina-contratacao :is(#personalizado, .pacote-cartao, .chamada-final), .pagina-contratacao :is(#personalizado, .pacote-cartao, .chamada-final) *))::before {
  inset: 0 18px auto;
  border-radius: 0;
}
.site-clean.tema-escuro:not(.home-clean) main :is(.v-card, .modalidade-card):not(:where(.caso-didatico *, .experiencias *)):not(.v-comparador > .v-card--atual:not(:has(> .v-cta)))::after {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(56, 232, 255, .55), rgba(91, 140, 255, .18) 35%, rgba(91, 140, 255, .08));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.site-clean.tema-escuro:not(.home-clean) main :is(.v-card.v-card--atual, .modalidade-card:last-child):not(:where(.caso-didatico *, .experiencias *)) {
  border-color: rgba(56, 232, 255, .45);
  box-shadow: var(--fx-reflexo), var(--fx-halo-forte);
}
@media (max-width: 720px) {
  .site-clean.tema-escuro:not(.home-clean) main :is(.v-card, .modalidade-card):not(:where(.caso-didatico *, .experiencias *)) { box-shadow: var(--fx-reflexo), 0 0 14px rgba(11, 92, 232, .20); }
}

/* --- F08 · Nós de etapa com anel luminoso e linha acesa (estático; as trilhas que a camada
   viva anima, .vs-trilha--nos, ficam com a linha dela). */
.site-clean.tema-escuro:not(.home-clean) main .v-trilha > li::before {
  border: 1.5px solid rgba(56, 232, 255, .75);
  background: radial-gradient(circle, #0A1526 55%, #010309 100%);
  box-shadow: 0 0 0 4px rgba(56, 232, 255, .06), 0 0 18px rgba(56, 232, 255, .40), inset 0 0 10px rgba(56, 232, 255, .18);
  color: var(--fx-ciano);
}
.site-clean.tema-escuro:not(.home-clean) main .v-trilha:not(.vs-trilha--nos) > li:not(:last-child)::after {
  left: calc(1.25rem - 1px);
  width: 2px;
  background: linear-gradient(180deg, rgba(56, 232, 255, .85), rgba(91, 140, 255, .35));
  box-shadow: 0 0 8px rgba(56, 232, 255, .45);
}
@media (max-width: 400px) {
  .site-clean.tema-escuro:not(.home-clean) main .v-trilha:not(.vs-trilha--nos) > li:not(:last-child)::after { left: calc(1rem - 1px); }
}
@media (min-width: 1024px) {
  .site-clean.tema-escuro:not(.home-clean) main .v-trilha--horizontal:not(.vs-trilha--nos) > li:not(:last-child)::after {
    top: calc(1.25rem - 1px);
    left: 3.25rem;
    width: auto;
    height: 2px;
    background: linear-gradient(90deg, rgba(56, 232, 255, .85), rgba(91, 140, 255, .35));
  }
}

/* --- F09 · Marcadores de lista em ponto luminoso (listas de conteúdo; role="list" no ul). */
.site-clean.tema-escuro:not(.home-clean) main :is(.metodo-lista, .produto-regras__lista, .modalidade-limites__lista, .pratica-lista, .ib-fontes-lista) > li {
  position: relative;
  padding-left: 1.6rem;
  list-style: none;
}
.site-clean.tema-escuro:not(.home-clean) main :is(.metodo-lista, .produto-regras__lista, .modalidade-limites__lista, .pratica-lista, .ib-fontes-lista) > li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: .2rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0 25%, var(--fx-ciano) 45%, var(--fx-cobalto) 100%);
  box-shadow: 0 0 10px rgba(56, 232, 255, .55);
}

/* --- F10/F16 · Sem filete entre as seções nem no topo do rodapé (saíram com os fundos de
   linhas, raia FUNDO, 29/09); as bordas herdadas entre seções ficam transparentes. */
.site-clean.tema-escuro:not(.home-clean) main > section + section:not(:has(.map-stage, .universo__palco, [data-universe], .ex-map, .x-graph-viewport)) { border-top-color: transparent; }
.site-clean.tema-escuro:not(.home-clean) main > section:not(:last-child) { border-bottom-color: transparent; }

/* --- F11 · Moldura de vidro com cantoneiras (blocos do Método e a ficha
   ao lado do título dos dossiês). 8 barras de cantoneira de 2 px, o brilho delas (6 px a .18,
   sem filtro) e o vidro. Os .v-painel são faixas de largura total: ficam
   transparentes com o brilho (F02), sem moldura. .v-faixa: versão leve (vidro, borda, barra com brilho). */
.site-clean.tema-escuro:not(.home-clean) main :is(.metodo-bloco, .modalidade-heroi .v-card.modalidade-ficha) {
  /* F12-LUZ (W19q): cantoneiras, fio de luz do topo, luz dos cantos e borda acesa. */
  border: 1px solid;
  border-color: var(--luz-borda);
  border-radius: 18px;
  background: var(--luz-cantos), var(--luz-fio), var(--luz-canto), var(--fx-vidro);
  box-shadow: var(--luz-halo);
}
.site-clean.tema-escuro:not(.home-clean) main .metodo-bloco { padding: clamp(1.75rem, 3vw, 2.75rem); }
.site-clean.tema-escuro:not(.home-clean) main .v-faixa {
  border-color: rgba(91, 140, 255, .38);
  background: var(--fx-vidro);
  box-shadow: var(--fx-reflexo);
}
.site-clean.tema-escuro:not(.home-clean) main .v-faixa::before { box-shadow: 0 0 12px rgba(56, 232, 255, .4); }

/* --- F11b · Selo "Lançamento conjunto" com brilho (estático; era o "F12 · Selo" antes do F12-LUZ). */
.site-clean.tema-escuro:not(.home-clean) main .v-estado { box-shadow: 0 0 0 1px rgba(56, 232, 255, .18), 0 0 16px rgba(56, 232, 255, .16); }
.site-clean.tema-escuro:not(.home-clean) main .v-estado::before { box-shadow: 0 0 0 3px rgba(56, 232, 255, .14), 0 0 12px 2px rgba(56, 232, 255, .55); }

/* --- F13 · Contorno luminoso em botão secundário, CTA e links de conexão. Borda #3A6BB0
   (3,78:1, corrige o 1.4.11). Borda e sombra trocam na hora; só o deslocamento anima. */
.site-clean.tema-escuro:not(.home-clean) main :is(.botao--secundario, .v-cta:not(.v-cta--primaria), .conexao-link) { border-color: var(--fx-borda-forte); }
.site-clean.tema-escuro:not(.home-clean) main :is(.botao--secundario, .v-cta:not(.v-cta--primaria), .conexao-link):is(:hover, :focus-visible) {
  border-color: var(--fx-ciano);
  box-shadow: 0 0 0 1px rgba(56, 232, 255, .25), 0 0 18px rgba(56, 232, 255, .22);
}
.site-clean.tema-escuro:not(.home-clean) main :is(.botao--secundario, .v-cta, .conexao-link) { transition: transform 180ms ease-out; }

/* ===========================================================================
   W19 · P6 · §C · demais superfícies (29/09/2026; spec _w19/visual-image25/p6/spec-P6-futurista.md §2.5)
   As internas usam .site-clean.tema-escuro:not(.home-clean); foco, barras de rolagem e
   color-scheme valem também para a Home (.site-clean.tema-escuro). Nenhuma regra daqui alcança
   a dobra 2 da Home (.conexao-dialog.is-inline-map): o diálogo Constelação leva
   .site-clean:not(.home-clean) e :not(.is-inline-map). Tudo estático: hover, foco e troca de
   estado não animam cor, borda nem sombra (M44). Modos de cada item no fim do próprio item.
   ========================================================================= */
/* W19 · P6 · §C */

/* --- D0 · Ação principal única das internas (MOD-2 da Home; revisão C1-03). Um desenho só para
   .botao--primario e .v-cta--primaria: gradiente #0746C8 → #0B5CE8 → #0A7F95 (branco 7,72/5,66/
   4,68:1), borda #5B8CFF → #38E8FF e brilho; hover igual ao repouso. Vence componentes.css
   L859–866 por ordem de carga. Só o deslocamento (transform) tem transição. */
.site-clean.tema-escuro:not(.home-clean) main :is(.botao--primario, .v-cta.v-cta--primaria):not(:where(.universo) *),
.site-clean.tema-escuro:not(.home-clean) main :is(.botao--primario, .v-cta.v-cta--primaria):not(:where(.universo) *):is(:hover, :active) {
  border: 1px solid transparent;
  background:
    linear-gradient(100deg, #0746C8 0%, #0B5CE8 40%, #0A7F95 100%) padding-box,
    linear-gradient(100deg, var(--fx-cobalto-claro, #5B8CFF), var(--fx-ciano, #38E8FF)) border-box;
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 0 26px rgba(11, 92, 232, .50), 18px 0 34px -14px rgba(56, 232, 255, .45);
  transition: transform 180ms ease-out;
}
.site-clean.tema-escuro:not(.home-clean) main :is(.botao--primario, .v-cta.v-cta--primaria):not(:where(.universo) *) :is(span[aria-hidden="true"], .v-cta__seta) { color: #FFFFFF; }
.site-clean.tema-escuro:not(.home-clean) main :is(.botao--primario, .v-cta.v-cta--primaria):not(:where(.universo) *):focus-visible {
  outline: 2px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 0 0 5px var(--fx-ciano, #38E8FF);
}
html:is(.vivo-quieto, .vivo-parado, .vivo-calmo) .site-clean.tema-escuro:not(.home-clean) main :is(.botao--primario, .v-cta.v-cta--primaria):not(:where(.universo) *) { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .site-clean.tema-escuro:not(.home-clean) main :is(.botao--primario, .v-cta.v-cta--primaria):not(:where(.universo) *) { transition: none; }
}
@media (prefers-contrast: more) {
  .site-clean.tema-escuro:not(.home-clean) main :is(.botao--primario, .v-cta.v-cta--primaria):not(:where(.universo) *) { border-color: #5B8CFF; box-shadow: none; }
}
@media (forced-colors: active) {
  .site-clean.tema-escuro:not(.home-clean) main :is(.botao--primario, .v-cta.v-cta--primaria):not(:where(.universo) *),
  .site-clean.tema-escuro:not(.home-clean) main :is(.botao--primario, .v-cta.v-cta--primaria):not(:where(.universo) *):is(:hover, :active) {
    forced-color-adjust: auto;
    border-color: ButtonText;
    background: ButtonFace;
    color: ButtonText;
    box-shadow: none;
  }
  .site-clean.tema-escuro:not(.home-clean) main :is(.botao--primario, .v-cta.v-cta--primaria):not(:where(.universo) *):focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
}

/* --- D1 · 404 escura (EXTRA-04). Sem .heroi--pagina (revisão C1-12), sem grade e sem os nós
   com linhas do canto (ordem de Tiago de 29/09 ~04h05: "REMOVE TUDO, QUERO ESTRELAS"; F-11 do
   inventário da raia FUNDO): o céu é o fundo de espaço (fundo-espaco.css e nav.js). O resto vem
   do §B e do D0. */

/* --- D2 · Área interna escura (EXTRA-05). Tem .heroi--pagina: recebe a F03 do §B. O cartão
   "Acesso ao Videre Studio" leva as cantoneiras de console (R-CANTOS = F11 com --fx-canto-luz);
   a ação principal é a do D0 e a secundária a do F13. */
.site-clean.tema-escuro:not(.home-clean) main.ib-area-interna .v-grade > .v-card:first-child {
  /* F12-LUZ (W19q): cantoneiras, fio de luz do topo, luz dos cantos e borda acesa. */
  border: 1px solid;
  border-color: var(--luz-borda);
  border-radius: 18px;
  background: var(--luz-cantos), var(--luz-fio), var(--luz-canto), var(--fx-vidro);
  box-shadow: var(--luz-halo);
}
@media (prefers-reduced-transparency: reduce) {
  .site-clean.tema-escuro:not(.home-clean) main.ib-area-interna .v-grade > .v-card:first-child { background-color: #0C192B; }
}
@media (forced-colors: active) {
  .site-clean.tema-escuro:not(.home-clean) main.ib-area-interna .v-grade > .v-card:first-child { background-image: none; }
}

/* --- D3 · Diálogo Constelação fora do palco (EX3-03), no desenho do console da dobra 2 da Home.
   Escopo (revisão C1-01): .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map); a
   dobra 2 da Home (is-inline-map) não muda. O .map-stage, as estrelas e as linhas não mudam
   (M7; P-P6-3): só a geometria do contêiner (a calha de 22 px das cantoneiras) e o estilo
   estático dos controles DOM. Sem animação e sem transição. */
.site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .conexao-dialog__topo {
  border-bottom: 1px solid rgba(56, 232, 255, .45);
  border-radius: 0;
  background: var(--fx-vidro, linear-gradient(180deg, rgba(20, 45, 80, .72) 0%, rgba(7, 16, 29, .88) 100%)), #03060D;
  box-shadow: var(--fx-reflexo, inset 0 1px 0 rgba(255, 255, 255, .08)), 0 1px 12px rgba(56, 232, 255, .16);
}
/* A marca "VIDERE" mostrada pelo logotipo: o texto fica no DOM (leitor de tela, cores forçadas),
   com font-size 0 (revisão C2-16), e o logotipo é o fundo. */
.site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-brand__word {
  display: inline-block;
  /* FID-P6-10: 144×36, o mesmo peso do logotipo na barra da imersão. */
  width: 144px;
  height: 36px;
  font-size: 0;
  line-height: 0;
  letter-spacing: 0;
  background: url("/assets/marca/logo-mono-claro.svg") 0 50% / contain no-repeat;
}
.site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-brand > span:nth-child(2) { color: #4A7795; }
.site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-brand h2 { color: #C8F6FF; }
/* Rótulos em R-ROTULO (mono ciano com o nó). */
.site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-kicker {
  color: var(--fx-ciano, #38E8FF);
  font: 500 .7rem/1.6 var(--fonte-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-kicker::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 .75em .1em 0;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--fx-ciano, #38E8FF);
  box-shadow: 0 0 0 3px rgba(56, 232, 255, .14), 0 0 12px 2px rgba(56, 232, 255, .55);
}
/* Cabeçalho de console (E2-03/E2-04) na faixa que já existe acima do palco. */
.site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-context {
  position: relative;
  padding-right: 4.5rem;
  border-bottom: 0;
  color: #C8F6FF;
}
.site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-context::after {
  content: "";
  position: absolute;
  right: 1.8rem;
  top: 50%;
  width: 34px;
  height: 10px;
  margin-top: -5px;
  pointer-events: none;
  background: radial-gradient(circle, var(--fx-branco-luz, #EAFDFF) 0 1.5px, var(--fx-ciano, #38E8FF) 2.2px 2.8px, rgba(56, 232, 255, .35) 3.4px, rgba(56, 232, 255, 0) 5px) 0 0 / 12px 10px repeat-x;
}
.site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-context::before {
  content: "";
  position: absolute;
  left: 1.8rem;
  right: 1.8rem;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(56, 232, 255, .15), #2A5F80 20%, #3C7FA6 50%, #2A5F80 80%, rgba(56, 232, 255, .15));
}
/* Moldura do palco (R-CONSOLE-PALCO): colchetes de 16 × 2 com halo na calha do contêiner, a
   8 px da borda; o palco começa depois da calha de 22 px e nada é pintado sobre ele. */
@media (min-width: 781px) {
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .universe-space {
    position: relative;
    padding: 22px;
    gap: 0;
  }
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .universe-space::before {
    content: "";
    position: absolute;
    inset: 8px;
    pointer-events: none;
    background-image:
      linear-gradient(#38E8FF, #38E8FF),
      linear-gradient(#38E8FF, #38E8FF),
      linear-gradient(#38E8FF, #38E8FF),
      linear-gradient(#38E8FF, #38E8FF),
      linear-gradient(#38E8FF, #38E8FF),
      linear-gradient(#38E8FF, #38E8FF),
      linear-gradient(#38E8FF, #38E8FF),
      linear-gradient(#38E8FF, #38E8FF),
      linear-gradient(180deg, rgba(56, 232, 255, .22), rgba(56, 232, 255, 0)),
      linear-gradient(90deg, rgba(56, 232, 255, .22), rgba(56, 232, 255, 0)),
      linear-gradient(180deg, rgba(56, 232, 255, .22), rgba(56, 232, 255, 0)),
      linear-gradient(270deg, rgba(56, 232, 255, .22), rgba(56, 232, 255, 0)),
      linear-gradient(0deg, rgba(56, 232, 255, .22), rgba(56, 232, 255, 0)),
      linear-gradient(90deg, rgba(56, 232, 255, .22), rgba(56, 232, 255, 0)),
      linear-gradient(0deg, rgba(56, 232, 255, .22), rgba(56, 232, 255, 0)),
      linear-gradient(270deg, rgba(56, 232, 255, .22), rgba(56, 232, 255, 0));
    background-position: left top, left top, right top, right top, left bottom, left bottom, right bottom, right bottom, left 0 top 2px, left 2px top 0, right 0 top 2px, right 2px top 0, left 0 bottom 2px, left 2px bottom 0, right 0 bottom 2px, right 2px bottom 0;
    background-size: 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px, 22px 6px, 6px 22px, 22px 6px, 6px 22px, 22px 6px, 6px 22px, 22px 6px, 6px 22px;
    background-repeat: no-repeat;
  }
  /* Borda e halo externo do palco (box-shadow externo pinta fora da caixa: permitido, §0.5). */
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-stage {
    border: 1px solid rgba(91, 140, 255, .38);
    box-shadow: 0 0 0 1px rgba(91, 140, 255, .10), 0 0 28px rgba(11, 92, 232, .20);
  }
}
/* FID-P6-04 · Console da dobra 2 da Home no diálogo Constelação (computador): a moldura (E2-01) e
   os colchetes (E2-02) passam do .universe-space para um quadro comum ao cabeçalho de console
   (.map-context, com o rótulo, o "•••" e a divisória recuada na mesma linha) e ao palco, a 20 px
   da tela. O quadro é o ::before do próprio diálogo, posto na grade sobre as linhas 2 e 3 (as
   quatro faixas do diálogo ganham linha fixa para ele não deslocar ninguém). Os colchetes ficam a
   8 px da borda do quadro, na calha; o palco começa 22 px depois dela (M7). A dobra 2 da Home
   (.is-inline-map) não é alcançada. */
@media (min-width: 781px) {
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) > .conexao-dialog__topo { grid-row: 1; grid-column: 1; }
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) > .map-context { grid-row: 2; grid-column: 1; margin: 17px 21px 0; padding-left: 2.25rem; }
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) > .universe-space { grid-row: 3; grid-column: 1; margin: 0 21px 21px; }
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) > .map-footer { grid-row: 4; grid-column: 1; }
  .site-clean:not(.home-clean) .conexao-dialog[open]:not(.is-inline-map)::before {
    content: "";
    grid-row: 2 / 4;
    grid-column: 1;
    margin: 16px 20px 20px;
    border: 1px solid #1C3D57;
    border-bottom-color: #2A5F80;
    border-radius: 14px;
    pointer-events: none;
    background:
      linear-gradient(var(--fx-ciano, #38E8FF), var(--fx-ciano, #38E8FF)) left 8px top 8px / 16px 2px no-repeat,
      linear-gradient(var(--fx-ciano, #38E8FF), var(--fx-ciano, #38E8FF)) left 8px top 8px / 2px 16px no-repeat,
      linear-gradient(var(--fx-ciano, #38E8FF), var(--fx-ciano, #38E8FF)) right 8px top 8px / 16px 2px no-repeat,
      linear-gradient(var(--fx-ciano, #38E8FF), var(--fx-ciano, #38E8FF)) right 8px top 8px / 2px 16px no-repeat,
      linear-gradient(var(--fx-ciano, #38E8FF), var(--fx-ciano, #38E8FF)) left 8px bottom 8px / 16px 2px no-repeat,
      linear-gradient(var(--fx-ciano, #38E8FF), var(--fx-ciano, #38E8FF)) left 8px bottom 8px / 2px 16px no-repeat,
      linear-gradient(var(--fx-ciano, #38E8FF), var(--fx-ciano, #38E8FF)) right 8px bottom 8px / 16px 2px no-repeat,
      linear-gradient(var(--fx-ciano, #38E8FF), var(--fx-ciano, #38E8FF)) right 8px bottom 8px / 2px 16px no-repeat,
      linear-gradient(180deg, rgba(56, 232, 255, .22), rgba(56, 232, 255, 0)) left 8px top 10px / 22px 6px no-repeat,
      linear-gradient(90deg, rgba(56, 232, 255, .22), rgba(56, 232, 255, 0)) left 10px top 8px / 6px 22px no-repeat,
      linear-gradient(180deg, rgba(56, 232, 255, .22), rgba(56, 232, 255, 0)) right 8px top 10px / 22px 6px no-repeat,
      linear-gradient(270deg, rgba(56, 232, 255, .22), rgba(56, 232, 255, 0)) right 10px top 8px / 6px 22px no-repeat,
      linear-gradient(0deg, rgba(56, 232, 255, .22), rgba(56, 232, 255, 0)) left 8px bottom 10px / 22px 6px no-repeat,
      linear-gradient(90deg, rgba(56, 232, 255, .22), rgba(56, 232, 255, 0)) left 10px bottom 8px / 6px 22px no-repeat,
      linear-gradient(0deg, rgba(56, 232, 255, .22), rgba(56, 232, 255, 0)) right 8px bottom 10px / 22px 6px no-repeat,
      linear-gradient(270deg, rgba(56, 232, 255, .22), rgba(56, 232, 255, 0)) right 10px bottom 8px / 6px 22px no-repeat,
      linear-gradient(180deg, #071A2C 0%, #04101C 120px);
    box-shadow: inset 0 1px 0 rgba(143, 220, 255, .14), inset 0 0 22px rgba(56, 232, 255, .06), 0 0 0 1px #02060D, 0 0 24px rgba(11, 92, 232, .16);
  }
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .universe-space::before { display: none; }
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .universe-space { background: transparent; }
}
/* Painel de texto ao lado do palco: R-VIDRO simples, sem cantoneiras (revisão C1-06). */
.site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-reader {
  border-left: 1px solid rgba(91, 140, 255, .38);
  background: var(--fx-vidro, linear-gradient(180deg, rgba(20, 45, 80, .72) 0%, rgba(7, 16, 29, .88) 100%));
  box-shadow: var(--fx-reflexo, inset 0 1px 0 rgba(255, 255, 255, .08));
}
@media (min-width: 781px) {
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-reader { border: 1px solid rgba(91, 140, 255, .38); border-left-width: 0; }
}
/* Integração P6: até 780 px o painel fica abaixo do palco, sem rolagem própria, numa linha "auto"
   da grade de altura fixa; com o min-height: 0 do style.css a linha encolhia à sobra (~170 px a
   390 × 844) e o texto passava do vidro, com emenda reta no meio do painel. O mínimo automático
   faz a linha medir o conteúdo; quem rola é o .universe-space. O palco mantém a altura de antes
   (53dvh, no mínimo 25rem), que o minmax só alcançava com a sobra. */
@media (max-width: 780px) {
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .universe-space { grid-template-rows: max(25rem, 53dvh) auto; }
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-reader { min-height: auto; }
}
.site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-reader__questions { border-top-color: rgba(91, 140, 255, .18); }
.site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-reader__note { border-top-color: rgba(91, 140, 255, .18); }
.site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-go {
  color: var(--fx-lilas, #9AA4FA);
  border-bottom: 1px solid;
  border-image: linear-gradient(90deg, var(--fx-lilas, #9AA4FA), var(--fx-ciano, #38E8FF)) 1;
}
.site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-go:hover { color: #FFFFFF; }
.site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-sources a { color: var(--fx-lilas, #9AA4FA); }
.site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-footer {
  border-top: 1px solid rgba(56, 232, 255, .35);
  background: #07101D;
}
/* Pílulas e botões em R-PILULA de contorno (E2-07; revisão C1-08: nada de gradiente). */
.site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) :is([data-map-question], [data-conexao-close], [data-map-reset], .map-tools button, .map-back, .map-clear, .map-connect, .map-context .constellation-modes button) {
  min-height: 44px;
  border: 1px solid var(--fx-borda-controle, #4A7795);
  border-radius: 999px;
  background: var(--luz-chip-denso, rgba(4, 16, 29, .85));
  color: #EAF2FF;
  box-shadow: var(--fx-reflexo, inset 0 1px 0 rgba(255, 255, 255, .08));
  transition: none;
}
.site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .conexao-dialog__topo button > span { color: var(--fx-ciano, #38E8FF); }
.site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-connect:disabled { border-color: #3A6BB0; background: #0C192B; color: #93A7C2; box-shadow: none; }
@media (hover: hover) {
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) :is([data-map-question], [data-conexao-close], [data-map-reset], .map-tools button, .map-back, .map-clear, .map-connect:not(:disabled), .map-context .constellation-modes button):not([aria-pressed="true"]):hover {
    border-color: var(--fx-ciano, #38E8FF);
    box-shadow: 0 0 0 1px rgba(56, 232, 255, .25), 0 0 18px rgba(56, 232, 255, .22);
  }
}
/* Pílula ativa (revisão C1-04; W19v, regra de Tiago "nenhum quadro com cor sólida"): era o degradê opaco
   azul → violeta da Home; passa ao vidro aceso das outras pílulas ativas (luz no canto, borda acesa nos 4 lados,
   anel por dentro e halo). W19v r2: mais o marcador de 2 px embaixo (o da aba ativa de /experiencias/) e um vidro mais claro que o das inativas. Mesma borda de 1 px; estático. */
.site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) :is([data-map-question], .map-tools button, .map-context .constellation-modes button)[aria-pressed="true"] {
  border: 1px solid;
  border-color: var(--luz-borda-acesa);
  background:
    radial-gradient(90% 150% at 0% 0%, rgba(56, 232, 255, .30), rgba(56, 232, 255, 0) 72%) 0 0 / 100% 100% no-repeat,
    radial-gradient(70% 130% at 100% 100%, rgba(11, 92, 232, .24), rgba(11, 92, 232, 0) 70%) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(38, 96, 176, .88) 0%, rgba(16, 48, 98, .90) 100%);
  color: #FFFFFF;
  box-shadow: inset 0 -2px 0 #38E8FF, inset 0 0 0 1px rgba(56, 232, 255, .30), var(--luz-halo-leve-aceso);
}
/* Foco R-FOCO (sai o #e5bbff); dentro do palco, que corta, o anel fica para dentro. */
.site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) :focus-visible {
  outline: 2px solid var(--fx-ciano, #38E8FF);
  outline-offset: 3px;
  box-shadow: 0 0 14px 2px rgba(56, 232, 255, .40);
}
.site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-stage :focus-visible { outline-offset: -3px; }
@media (max-width: 780px) {
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-brand__word { width: 112px; height: 28px; }
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-context { padding-right: 3.5rem; }
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-context::after { right: 1rem; }
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-context::before { left: 1rem; right: 1rem; }
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-reader { border-left: 0; border-top: 1px solid rgba(91, 140, 255, .38); }
}
@media (prefers-reduced-transparency: reduce) {
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) :is(.conexao-dialog__topo, .map-reader) { background: #0C192B; }
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) :is([data-map-question], .map-tools button, .map-context .constellation-modes button)[aria-pressed="true"] { background: #1D4A85; }
}
@media (prefers-contrast: more) {
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) :is([data-map-question], [data-conexao-close], [data-map-reset], .map-tools button, .map-back, .map-clear, .map-connect, .map-context .constellation-modes button) { border-color: #5B8CFF; box-shadow: none; }
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) :is(.map-reader, .map-stage) { border-color: #6F8FB0; box-shadow: none; }
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) :is([data-map-question], .map-tools button, .map-context .constellation-modes button)[aria-pressed="true"] { border-color: #38E8FF; box-shadow: inset 0 -2px 0 #38E8FF, inset 0 0 0 1px #38E8FF; }
}
@media (forced-colors: active) {
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-brand__word { width: auto; height: auto; font-size: .9rem; line-height: 1.4; letter-spacing: .34em; background: none; }
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-context::before,
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-context::after,
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .universe-space::before,
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-kicker::before { display: none; }
  .site-clean:not(.home-clean) .conexao-dialog[open]:not(.is-inline-map)::before { background: none; border-color: CanvasText; box-shadow: none; }
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) :is(.conexao-dialog__topo, .map-reader, .map-footer) { background: Canvas; border-color: CanvasText; box-shadow: none; }
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) :is([data-map-question], [data-conexao-close], [data-map-reset], .map-tools button, .map-back, .map-clear, .map-connect, .map-context .constellation-modes button) { border-color: ButtonBorder; background: ButtonFace; color: ButtonText; box-shadow: none; }
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) :is([data-map-question], .map-tools button, .map-context .constellation-modes button)[aria-pressed="true"] { forced-color-adjust: none; border: 1px solid Highlight; background: Highlight; color: HighlightText; box-shadow: none; }
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-go { color: LinkText; border-image: none; }
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) :focus-visible { outline-color: Highlight; box-shadow: none; }
}

/* --- D4 · Tabelas .v-tabela (F07/F11): vidro, borda luminosa, filete de 2 px no topo, cabeçalho
   mono ciano com o nó no primeiro rótulo, linhas finas. Sem overflow: hidden (cortaria a
   legenda, componentes.css L668): o raio fica nas células das pontas, como já era. Nenhuma
   marcação nova: "Sim", "Não" e "A publicar" não têm classe, então ficam em #F6F8FC. */
@media (min-width: 720px) {
  .site-clean.tema-escuro:not(.home-clean) main table.v-tabela {
    border: 1px solid;
    border-color: var(--luz-borda);
    border-radius: 18px;
    background: var(--luz-canto), var(--fx-vidro);
    box-shadow: var(--luz-halo);
  }
  .site-clean.tema-escuro:not(.home-clean) main table.v-tabela thead th {
    border-bottom-color: rgba(91, 140, 255, .38);
    background: linear-gradient(180deg, rgba(56, 232, 255, .12) 0%, rgba(91, 140, 255, .06) 100%);
    box-shadow: inset 0 2px 0 rgba(56, 232, 255, .55);
    color: var(--fx-ciano);
  }
  .site-clean.tema-escuro:not(.home-clean) main table.v-tabela thead tr > :first-child { border-top-left-radius: 17px; }
  .site-clean.tema-escuro:not(.home-clean) main table.v-tabela thead tr > :last-child { border-top-right-radius: 17px; }
  .site-clean.tema-escuro:not(.home-clean) main table.v-tabela tbody tr:last-child > :first-child { border-bottom-left-radius: 17px; }
  .site-clean.tema-escuro:not(.home-clean) main table.v-tabela tbody tr:last-child > :last-child { border-bottom-right-radius: 17px; }
  .site-clean.tema-escuro:not(.home-clean) main table.v-tabela thead th:first-child::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 .75em .1em 0;
    border-radius: 50%;
    vertical-align: middle;
    background: var(--fx-ciano);
    box-shadow: 0 0 0 3px rgba(56, 232, 255, .14), 0 0 12px 2px rgba(56, 232, 255, .55);
  }
}
.site-clean.tema-escuro:not(.home-clean) main table.v-tabela :is(th, td) { border-top-color: rgba(91, 140, 255, .18); }
.site-clean.tema-escuro:not(.home-clean) main table.v-tabela td:not([colspan]) { color: #F6F8FC; }
.site-clean.tema-escuro:not(.home-clean) main table.v-tabela caption { color: var(--fx-ciano); }
/* Empilhada (≤ 719 px): cada linha é um cartão F07. */
@media (max-width: 719px) {
  .site-clean.tema-escuro:not(.home-clean) main table.v-tabela tr {
    border: 1px solid;
    border-color: var(--luz-borda);
    border-radius: 14px;
    background: var(--luz-canto), var(--fx-vidro);
    box-shadow: var(--fx-reflexo), inset 0 2px 0 rgba(56, 232, 255, .45), 0 0 14px rgba(11, 92, 232, .20);
  }
  .site-clean.tema-escuro:not(.home-clean) main table.v-tabela td[data-rotulo]::before { color: var(--fx-ciano); }
}
@media (prefers-contrast: more) {
  .site-clean.tema-escuro:not(.home-clean) main table.v-tabela,
  .site-clean.tema-escuro:not(.home-clean) main table.v-tabela tr { border-color: #6F8FB0; box-shadow: none; }
  .site-clean.tema-escuro:not(.home-clean) main table.v-tabela thead th { box-shadow: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-clean.tema-escuro:not(.home-clean) main table.v-tabela,
  .site-clean.tema-escuro:not(.home-clean) main table.v-tabela tr { background: #0C192B; }
}
@media (forced-colors: active) {
  .site-clean.tema-escuro:not(.home-clean) main table.v-tabela,
  .site-clean.tema-escuro:not(.home-clean) main table.v-tabela tr { background: Canvas; border-color: CanvasText; box-shadow: none; }
  .site-clean.tema-escuro:not(.home-clean) main table.v-tabela thead th { box-shadow: none; background: Canvas; }
  .site-clean.tema-escuro:not(.home-clean) main table.v-tabela thead th:first-child::before { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
}

/* --- D5 · Protótipo do Enterprise (.blueprint-metodo) como janela de console: vidro com
   cantoneiras, abas em pílulas soltas (R-ABAS, a primeira na pílula ativa da Home, sem trilho
   nem filete; revisão C1-07), menu com o nó no item ativo, métricas em gradiente e selos por
   estado (classes que já existem: selo--cyan aprovado, selo revisão, selo--grafite bloqueio). */
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo {
  --fx-canto: linear-gradient(#38E8FF, #38E8FF);
  --fx-canto-luz: linear-gradient(rgba(56, 232, 255, .18), rgba(56, 232, 255, .18));
  /* F12-LUZ (W19q): o fio do topo já é o ::before; aqui a luz dos cantos e a borda acesa. */
  border: 1px solid;
  border-color: var(--luz-borda);
  border-radius: 18px;
  background: var(--luz-cantos), var(--luz-canto), var(--fx-vidro);
  box-shadow: var(--luz-halo);
}
/* A barra de 3 px antiga vira o filete luminoso de 1 px, recuado das cantoneiras. */
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo::before {
  inset: 0 36px auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(56, 232, 255, 0), rgba(56, 232, 255, .85) 50%, rgba(56, 232, 255, 0));
  box-shadow: 0 0 10px rgba(56, 232, 255, .45);
}
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo figcaption { padding: 1.5rem 2rem 1rem; border-bottom-color: rgba(91, 140, 255, .18); color: var(--fx-ciano); }
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__abas {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  padding: 1rem 2rem;
  border-bottom: 1px solid rgba(91, 140, 255, .18);
}
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__abas > span,
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__abas > span:nth-child(n) {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .45rem 1rem;
  border: 1px solid var(--fx-borda-controle);
  border-top-color: rgba(56, 232, 255, .70);
  border-radius: 999px;
  background: var(--luz-chip-denso, rgba(4, 16, 29, .85));
  box-shadow: var(--fx-reflexo);
  color: #EAF2FF;
  font: 500 .72rem/1.3 var(--fonte-mono);
  letter-spacing: .08em;
  text-align: start;
  text-transform: uppercase;
}
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__abas > span:first-child {
  border: 1px solid transparent;
  background:
    linear-gradient(100deg, var(--fx-cobalto) 0%, var(--fx-indigo) 55%, var(--fx-violeta) 100%) padding-box,
    linear-gradient(100deg, #74ADF2, #A170F2) border-box;
  color: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(56, 232, 255, .16), 0 0 14px rgba(81, 43, 194, .45);
}
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__menu { border-color: rgba(91, 140, 255, .18); }
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__menu li { border-bottom-color: rgba(91, 140, 255, .18); color: #B2C0D4; }
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__menu li:first-child { color: var(--fx-ciano); }
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__menu li:first-child::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 .65em .1em 0;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--fx-ciano);
  box-shadow: 0 0 0 3px rgba(56, 232, 255, .14), 0 0 12px 2px rgba(56, 232, 255, .55);
}
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__painel { background: rgba(3, 6, 13, .35); color: #B2C0D4; }
/* No /enterprise/ o subpainel é opaco (var(--fx-cartao), bloco do topo) e vai até o canto de baixo à
   direita da janela: a cantoneira desse canto (barras e brilho do fundo da janela, acima) ficava
   coberta. O próprio subpainel a redesenha no mesmo ponto (os cantos dos dois coincidem). */
.site-clean.tema-escuro:not(.home-clean).pagina-enterprise main .blueprint-metodo__painel {
  /* F12-LUZ (W19q): sai o fundo opaco chapado (--fx-cartao); fica um vidro escuro quase opaco com a
     luz do canto (o texto continua sobre fundo escuro). */
  background:
    var(--fx-canto), var(--fx-canto), var(--fx-canto-luz), var(--fx-canto-luz),
    radial-gradient(60% 80% at 0% 0%, rgba(56, 232, 255, .08), rgba(56, 232, 255, 0) 65%),
    linear-gradient(160deg, rgba(13, 28, 50, .90) 0%, rgba(6, 13, 25, .94) 100%);
  background-position:
    calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) calc(100% - 8px),
    0 0, 0 0;
  background-size: 18px 2px, 2px 18px, 22px 6px, 6px 22px, auto, auto;
  background-repeat: no-repeat;
}
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__painel h3 { color: #F6F8FC; }
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__painel > p,
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__regra span:not(.selo) { color: #B2C0D4; }
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__regra strong { color: #F6F8FC; }
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__metricas { border-radius: 14px; } /* vidro, borda e halo: F12-LUZ */
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__metrica { border-color: rgba(91, 140, 255, .18); }
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__metrica strong { color: #5B8CFF; }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__metrica strong {
    background-image: linear-gradient(90deg, #5B8CFF 0%, #38E8FF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    width: max-content;
  }
}
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__metrica > span { color: #B2C0D4; }
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__metrica > span::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 .55em .1em 0;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--fx-ciano);
  box-shadow: 0 0 8px 1px rgba(56, 232, 255, .55);
}
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__regra { border-top-color: rgba(91, 140, 255, .18); }
/* Selos em pílula com brilho do próprio estado. */
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo :is(.blueprint-metodo__regra, .blueprint-metodo__painel) > .selo { justify-self: start; align-self: start; border-radius: 999px; background: #07101D; } /* fundo: F12-LUZ */
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__painel > .selo { border-color: var(--fx-borda-controle); color: #EAF2FF; }
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__regra > .selo--cyan { border-color: rgba(56, 232, 255, .55); color: #38E8FF; box-shadow: 0 0 12px rgba(56, 232, 255, .30); }
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__regra > .selo:not(.selo--cyan):not(.selo--grafite) { border-color: var(--fx-alerta-borda); color: var(--fx-alerta); box-shadow: 0 0 12px rgba(255, 197, 117, .25); }
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__regra > .selo--grafite { border-color: var(--fx-erro-borda); color: var(--fx-erro); box-shadow: 0 0 12px rgba(229, 72, 77, .30); }
@media (max-width: 720px) {
  .site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo figcaption,
  .site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__abas { padding-inline: 1.25rem; }
}
@media (prefers-contrast: more) {
  .site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo { border-color: #6F8FB0; box-shadow: none; }
  .site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__abas > span { border-color: #5B8CFF; box-shadow: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo { background-color: #0C192B; }
}
@media (forced-colors: active) {
  .site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo { background: Canvas; border-color: CanvasText; box-shadow: none; }
  .site-clean.tema-escuro:not(.home-clean).pagina-enterprise main .blueprint-metodo__painel { background: Canvas; }
  .site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo::before,
  .site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__menu li:first-child::before,
  .site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__metrica > span::before { display: none; }
  .site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__abas > span { border-color: CanvasText; background: Canvas; color: CanvasText; box-shadow: none; }
  .site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__abas > span:first-child { forced-color-adjust: none; border: 1px solid Highlight; background: Highlight; color: HighlightText; }
  .site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo__metrica strong { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
  .site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo .selo { box-shadow: none; }
}

/* --- D6 · Chamadas finais como painel largo de console: a faixa fica transparente (sai a
   diagonal cobalto de style.css L1545–1556, que pintava a /metodologia/) e o .env vira o painel
   de vidro com cantoneiras, sem grade nem piso em perspectiva (ordem de Tiago de 29/09 ~04h05:
   "REMOVE TUDO, QUERO ESTRELAS"; o ::after/::before da faixa já são do F10). Nenhum título tem <em>:
   o h2 fica #F6F8FC e o rótulo com o nó (F06). CTA = D0; secundário = F13. */
.site-clean.tema-escuro:not(.home-clean) main .chamada-final {
  border-top: 0;
  background: transparent;
  background-image: none;
}
.site-clean.tema-escuro:not(.home-clean) main .chamada-final > .env {
  --fx-canto: linear-gradient(#38E8FF, #38E8FF);
  --fx-canto-luz: linear-gradient(rgba(56, 232, 255, .18), rgba(56, 232, 255, .18));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: calc(100% - 2 * var(--margem-pagina));
  max-width: calc(var(--coluna-max) - 2 * var(--margem-pagina));
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid rgba(91, 140, 255, .38);
  border-radius: 18px;
  background:
    var(--fx-canto), var(--fx-canto), var(--fx-canto), var(--fx-canto),
    var(--fx-canto), var(--fx-canto), var(--fx-canto), var(--fx-canto),
    var(--fx-canto-luz), var(--fx-canto-luz), var(--fx-canto-luz), var(--fx-canto-luz),
    var(--fx-vidro);
  background-position:
    10px 10px, 10px 10px, calc(100% - 10px) 10px, calc(100% - 10px) 10px,
    10px calc(100% - 10px), 10px calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) calc(100% - 10px),
    8px 8px, 8px 8px, calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) calc(100% - 8px),
    0 0;
  background-size:
    18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px,
    22px 6px, 6px 22px, 22px 6px, 6px 22px,
    auto;
  background-repeat: no-repeat;
  box-shadow: var(--fx-reflexo), var(--fx-halo);
}
.site-clean.tema-escuro:not(.home-clean):not(.pagina-contratacao) main .chamada-final > .env {
  /* F12-LUZ (W19q): fio de luz do topo, luz dos cantos e borda acesa (a /contratacao/ é da raia W19p). */
  border-color: var(--luz-borda);
  background: var(--luz-cantos), var(--luz-fio), var(--luz-canto), var(--fx-vidro);
  box-shadow: var(--luz-halo);
}
.site-clean.tema-escuro:not(.home-clean) main .chamada-final h2 { color: #F6F8FC; }
.site-clean.tema-escuro:not(.home-clean) main .chamada-final .lead { color: #B2C0D4; }
.site-clean.tema-escuro:not(.home-clean) main .chamada-final .link-seta { color: #EAF2FF; text-decoration-color: var(--fx-ciano); }
@media (prefers-contrast: more) {
  .site-clean.tema-escuro:not(.home-clean) main .chamada-final > .env { border-color: #6F8FB0; box-shadow: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-clean.tema-escuro:not(.home-clean) main .chamada-final > .env { background-color: #0C192B; }
}
@media (forced-colors: active) {
  .site-clean.tema-escuro:not(.home-clean) main .chamada-final > .env { background: Canvas; border-color: CanvasText; box-shadow: none; }
}

/* --- D7 · Atalho "Comparar os quatro dossiês" (F13 + medidor aceso): contorno #3A6BB0 com o
   halo do F13 no hover/foco, sem transição; itens em vidro; segmentos ativos em gradiente com o
   nó na ponta; rótulo mono com o nó; seta ciano (só ela se desloca). */
.site-clean.tema-escuro:not(.home-clean) main a.v-atalho { transition: none; } /* vidro, borda e halo: F12-LUZ */
.site-clean.tema-escuro:not(.home-clean) main .v-atalho__item { color: #F6F8FC; transition: none; }
/* W19q: o atalho e os itens viram cartões da camada viva (vivo-sinais.js, CARTOES); o .sr-apenas de
   dentro é absoluto, e sem um ancestral posicionado o cartão não acenderia. Sem deslocamento: nada se move. */
.site-clean.tema-escuro:not(.home-clean) main :is(a.v-atalho, .v-atalho__item) { position: relative; }
/* No hover e no foco do atalho, os quatro dossiês acendem junto (troca na hora). */
.site-conectado.site-clean.tema-escuro main a.v-atalho:is(:hover, :focus-visible) .v-atalho__item {
  border-color: var(--luz-borda-acesa);
  box-shadow: var(--luz-halo-leve-aceso);
}
/* W19q: o medidor de cada dossiê cresce (3rem x 4 px deixava o fluxo de luz invisível) e o fluxo
   corre pelas barras acesas uma depois da outra, como um trilho (vivo-sinais.css). */
.site-clean.tema-escuro:not(.home-clean) main .v-atalho .v-medidor--mini { width: 4.5rem; gap: 4px; }
.site-clean.tema-escuro:not(.home-clean) main .v-atalho .v-medidor--mini > span { height: 6px; }
.site-clean.tema-escuro:not(.home-clean) main .v-atalho > :is(.v-atalho__rotulo, .ib-atalho__rotulo, .sr-apenas:first-child) { color: var(--fx-ciano); }
.site-clean.tema-escuro:not(.home-clean) main .v-atalho > :is(.v-atalho__rotulo, .ib-atalho__rotulo)::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 .75em .1em 0;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--fx-ciano);
  box-shadow: 0 0 0 3px rgba(56, 232, 255, .14), 0 0 12px 2px rgba(56, 232, 255, .55);
}
.site-clean.tema-escuro:not(.home-clean) main .v-atalho__seta { color: var(--fx-ciano); transition: transform 180ms ease-out; }
.site-clean.tema-escuro:not(.home-clean) main a.v-atalho:is(:hover, :focus-visible) .v-atalho__seta { transform: translateX(3px); }
.site-clean.tema-escuro:not(.home-clean) main .v-atalho .v-medidor--mini > .is-ativo {
  background: linear-gradient(90deg, #0B5CE8, #38E8FF);
  box-shadow: 0 0 6px rgba(56, 232, 255, .45);
}
/* O nó na ponta: o último segmento aceso ganha o ponto branco-ciano na extremidade. */
.site-clean.tema-escuro:not(.home-clean) main .v-atalho .v-medidor--mini > .is-ativo:is(:last-child, :has(+ :not(.is-ativo))) {
  background:
    radial-gradient(circle at calc(100% - 2px) 50%, #FFFFFF 0 1.5px, rgba(159, 246, 255, 0) 2.5px),
    linear-gradient(90deg, #0B5CE8, #38E8FF);
  box-shadow: 2px 0 8px 1px rgba(56, 232, 255, .75);
}
html:is(.vivo-quieto, .vivo-parado, .vivo-calmo) .site-clean.tema-escuro:not(.home-clean) main .v-atalho__seta { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .site-clean.tema-escuro:not(.home-clean) main .v-atalho__seta { transition: none; }
}
@media (forced-colors: active) {
  .site-clean.tema-escuro:not(.home-clean) main a.v-atalho,
  .site-clean.tema-escuro:not(.home-clean) main .v-atalho__item { border-color: CanvasText; background: Canvas; box-shadow: none; }
  .site-clean.tema-escuro:not(.home-clean) main .v-atalho > :is(.v-atalho__rotulo, .ib-atalho__rotulo)::before { display: none; }
  .site-clean.tema-escuro:not(.home-clean) main .v-atalho .v-medidor--mini > .is-ativo,
  .site-clean.tema-escuro:not(.home-clean) main .v-atalho .v-medidor--mini > .is-ativo:is(:last-child, :has(+ :not(.is-ativo))) { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
}

/* --- D8 · Players dos filmes (/sobre/, /enterprise/; EX-07) em moldura de console: o quadro
   ganha vidro, cantoneiras e halo, com as cantoneiras FORA do vídeo, na calha de 12 px; o vídeo
   mantém 16:9 dentro dela. Controles nativos em ciano (accent-color); a parte em negrito da
   legenda em rótulo mono com o nó. */
.site-clean.tema-escuro:not(.home-clean) main .video-apresentacao__quadro {
  --fx-canto: linear-gradient(#38E8FF, #38E8FF);
  --fx-canto-luz: linear-gradient(rgba(56, 232, 255, .18), rgba(56, 232, 255, .18));
  aspect-ratio: auto;
  padding: 12px;
  border: 1px solid rgba(91, 140, 255, .38);
  border-radius: 18px;
  border-color: var(--luz-borda);
  background:
    var(--fx-canto), var(--fx-canto), var(--fx-canto), var(--fx-canto),
    var(--fx-canto), var(--fx-canto), var(--fx-canto), var(--fx-canto),
    var(--fx-canto-luz), var(--fx-canto-luz), var(--fx-canto-luz), var(--fx-canto-luz),
    linear-gradient(90deg, rgba(56, 232, 255, 0), rgba(56, 232, 255, .85) 30%, #EAFDFF 50%, rgba(56, 232, 255, .85) 70%, rgba(56, 232, 255, 0)),
    radial-gradient(50% 100% at 50% 0%, rgba(56, 232, 255, .20), rgba(56, 232, 255, 0)),
    radial-gradient(60% 140% at 0% 0%, rgba(56, 232, 255, .11), rgba(56, 232, 255, 0) 62%),
    radial-gradient(55% 120% at 100% 100%, rgba(11, 92, 232, .16), rgba(11, 92, 232, 0) 66%),
    var(--fx-vidro);
  background-position:
    4px 4px, 4px 4px, calc(100% - 4px) 4px, calc(100% - 4px) 4px,
    4px calc(100% - 4px), 4px calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) calc(100% - 4px),
    2px 2px, 2px 2px, calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) calc(100% - 2px),
    50% 0, 50% 0,
    0 0, 0 0,
    0 0;
  background-size:
    18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px,
    22px 6px, 6px 22px, 22px 6px, 6px 22px,
    76% 1px, 76% 12px, /* fio de luz do topo: F12-LUZ tarefa 2 */
    100% 100%, 100% 100%,
    auto;
  background-repeat: no-repeat;
  box-shadow: var(--luz-halo);
}
.site-clean.tema-escuro:not(.home-clean) main .video-apresentacao__quadro > .video-apresentacao__midia {
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  accent-color: #38E8FF;
}
.site-clean.tema-escuro:not(.home-clean) main .video-apresentacao--institucional { overflow: visible; border: 0; background: transparent; box-shadow: none; }
.site-clean.tema-escuro:not(.home-clean) main .video-apresentacao figcaption { border-top: 0; background: transparent; color: #B2C0D4; }
.site-clean.tema-escuro:not(.home-clean) main .video-apresentacao figcaption strong {
  display: block;
  margin-bottom: .35rem;
  color: var(--fx-ciano);
  font: 500 .75rem/1.5 var(--fonte-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-clean.tema-escuro:not(.home-clean) main .video-apresentacao figcaption strong::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 .75em .1em 0;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--fx-ciano);
  box-shadow: 0 0 0 3px rgba(56, 232, 255, .14), 0 0 12px 2px rgba(56, 232, 255, .55);
}
@media (prefers-contrast: more) {
  .site-clean.tema-escuro:not(.home-clean) main .video-apresentacao__quadro { border-color: #6F8FB0; box-shadow: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-clean.tema-escuro:not(.home-clean) main .video-apresentacao__quadro { background-color: #0C192B; }
}
@media (forced-colors: active) {
  .site-clean.tema-escuro:not(.home-clean) main .video-apresentacao__quadro { background: Canvas; border-color: CanvasText; box-shadow: none; }
  .site-clean.tema-escuro:not(.home-clean) main .video-apresentacao figcaption strong::before { display: none; }
}

/* --- EXTRA-03 · details "Descrição completa
   do filme" (Enterprise) em R-DETALHE: resumo com +/− ciano (reserva antes da sintaxe com texto
   alternativo vazio; revisão C2-19). O conteúdo aberto vai em vidro.
   Lista do filme com numeração mono ciano por contador (sem texto). O EXTRA-01 e o EXTRA-02
   (animação da marca na Home) saíram com o item, no 7d4725f. */
.site-clean.tema-escuro details.video-transcricao > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.site-clean.tema-escuro details.video-transcricao > summary::-webkit-details-marker { display: none; }
.site-clean.tema-escuro details.video-transcricao > summary::after {
  content: "+";
  content: "+" / "";
  flex: none;
  color: var(--fx-ciano, #38E8FF);
  font: 500 1rem var(--fonte-mono);
}
.site-clean.tema-escuro details.video-transcricao[open] > summary::after {
  content: "\2212";
  content: "\2212" / "";
}
.site-clean.tema-escuro:not(.home-clean) main details.video-transcricao {
  margin-top: 1rem;
  border: 1px solid rgba(91, 140, 255, .38);
  border-radius: 18px;
  background: var(--fx-vidro);
  box-shadow: var(--fx-reflexo), var(--fx-halo);
}
.site-clean.tema-escuro:not(.home-clean) main details.video-transcricao > summary { padding: .75rem 1.25rem; color: var(--fx-ciano); }
.site-clean.tema-escuro:not(.home-clean) main details.video-transcricao > summary::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: -.25rem;
  border-radius: 50%;
  background: var(--fx-ciano);
  box-shadow: 0 0 0 3px rgba(56, 232, 255, .14), 0 0 12px 2px rgba(56, 232, 255, .55);
}
.site-clean.tema-escuro:not(.home-clean) main details.video-transcricao > summary { justify-content: flex-start; }
.site-clean.tema-escuro:not(.home-clean) main details.video-transcricao > summary::after { margin-left: auto; }
.site-clean.tema-escuro:not(.home-clean) main .video-transcricao__corpo { padding: 0 1.25rem 1.25rem; color: #B2C0D4; }
.site-clean.tema-escuro:not(.home-clean) main .video-transcricao__corpo strong { color: #F6F8FC; }
.site-clean.tema-escuro:not(.home-clean) main .video-transcricao__nota { border-top-color: rgba(91, 140, 255, .18); }
.site-clean.tema-escuro:not(.home-clean) main .video-transcricao__corpo ol { padding-left: 0; list-style: none; counter-reset: filme; }
.site-clean.tema-escuro:not(.home-clean) main .video-transcricao__corpo ol > li { position: relative; padding-left: 2.5rem; counter-increment: filme; }
.site-clean.tema-escuro:not(.home-clean) main .video-transcricao__corpo ol > li::before {
  content: counter(filme, decimal-leading-zero);
  content: counter(filme, decimal-leading-zero) / "";
  position: absolute;
  left: 0;
  top: .1em;
  color: var(--fx-ciano);
  font: 500 .75rem/1.6 var(--fonte-mono);
  letter-spacing: .08em;
}
@media (prefers-contrast: more) {
  .site-clean.tema-escuro:not(.home-clean) main details.video-transcricao { border-color: #6F8FB0; box-shadow: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-clean.tema-escuro:not(.home-clean) main details.video-transcricao { background: #0C192B; }
}
@media (forced-colors: active) {
  .site-clean.tema-escuro:not(.home-clean) main details.video-transcricao { background: Canvas; border-color: CanvasText; box-shadow: none; }
  .site-clean.tema-escuro:not(.home-clean) main details.video-transcricao > summary::before { display: none; }
}

/* --- D9 · Menu compacto aberto (≤ 1200 px): vidro contínuo com a cápsula do cabeçalho (mesma
   borda), cantoneiras no pé do painel, filetes finos entre os itens e o item atual com o nó e o
   traço ciano do desktop. Estático. */
@media (max-width: 1200px) {
  .site-clean.tema-escuro .topo:has(#nav-principal.nav--aberta) {
    border-color: rgba(91, 140, 255, .38);
    background: var(--fx-vidro, linear-gradient(180deg, rgba(20, 45, 80, .72) 0%, rgba(7, 16, 29, .88) 100%)), #07101D;
  }
  html.js .site-clean.tema-escuro #nav-principal.nav--aberta {
    border: 1px solid rgba(91, 140, 255, .42);
    border-top: 0;
    border-bottom-color: rgba(56, 232, 255, .75);
    border-radius: 0 0 14px 14px;
    background-color: #07101D;
    background-image:
      linear-gradient(#38E8FF, #38E8FF), linear-gradient(#38E8FF, #38E8FF),
      linear-gradient(#38E8FF, #38E8FF), linear-gradient(#38E8FF, #38E8FF),
      linear-gradient(rgba(56, 232, 255, .18), rgba(56, 232, 255, .18)), linear-gradient(rgba(56, 232, 255, .18), rgba(56, 232, 255, .18)),
      radial-gradient(60% 45% at 0% 100%, rgba(56, 232, 255, .10), rgba(56, 232, 255, 0) 70%),
      radial-gradient(55% 40% at 100% 0%, rgba(11, 92, 232, .16), rgba(11, 92, 232, 0) 72%),
      linear-gradient(165deg, rgba(20, 45, 80, .72) 0%, rgba(10, 22, 40, .80) 50%, rgba(7, 16, 29, .88) 100%);
    background-position: 10px calc(100% - 10px), 10px calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), 8px calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), 0 0, 0 0, 0 0;
    background-size: 18px 2px, 2px 18px, 18px 2px, 2px 18px, 22px 6px, 22px 6px, 100% 100%, 100% 100%, auto;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 40px rgba(56, 232, 255, .04), 0 1px 12px rgba(56, 232, 255, .25), 0 0 30px rgba(11, 92, 232, .18), 0 22px 45px rgba(2, 7, 14, .34);
  }
  html.js .site-clean.tema-escuro #nav-principal.nav--aberta ul a { border-bottom-color: rgba(91, 140, 255, .18); }
  html.js .site-clean.tema-escuro #nav-principal.nav--aberta ul a[aria-current="page"] {
    border-bottom-color: var(--fx-ciano, #38E8FF);
    box-shadow: 0 5px 8px -5px rgba(56, 232, 255, .6);
    color: #FFFFFF;
  }
  html.js .site-clean.tema-escuro #nav-principal.nav--aberta ul a[aria-current="page"]::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 .75em .1em 0;
    border-radius: 50%;
    vertical-align: middle;
    background: var(--fx-ciano, #38E8FF);
    box-shadow: 0 0 0 3px rgba(56, 232, 255, .14), 0 0 12px 2px rgba(56, 232, 255, .55);
  }
}
@media (max-width: 1200px) {
  /* Correção 2 da W19q: o painel do menu aberto também tem a borda de cima (era 0: só 3 lados), um
     filete aceso; a margem de -1 px devolve o 1 px, e os itens ficam onde estavam. */
  html.js .site-clean.tema-escuro #nav-principal.nav--aberta { margin-top: -1px; border-top: 1px solid rgba(56, 232, 255, .48); }
}
@media (max-width: 1200px) and (prefers-reduced-transparency: reduce) {
  .site-clean.tema-escuro .topo:has(#nav-principal.nav--aberta) { background: #07101D; }
}
@media (max-width: 1200px) and (forced-colors: active) {
  html.js .site-clean.tema-escuro #nav-principal.nav--aberta { background-image: none; }
  html.js .site-clean.tema-escuro #nav-principal.nav--aberta ul a[aria-current="page"]::before { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
}

/* --- EX-06 · Cabeçalho de 721 a 1200 px (revisões C1-11/C2-11): a cápsula de vidro do celular
   (style.css L3713) continua valendo até a cápsula do desktop entrar em 1201 px, com o logotipo,
   "Entrar na plataforma" e "Menu" dentro dela. Mesmo vidro, borda, raio e filete. */
@media (min-width: 721px) and (max-width: 1200px) {
  .site-clean .topo {
    top: 8px;
    margin: 8px 12px 0;
    border: 1px solid rgba(120, 160, 255, .2);
    border-radius: 14px;
    background: #07101D;
    backdrop-filter: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 28px rgba(0, 0, 0, .45);
  }
  .site-clean .topo::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: -1px;
    left: 14px;
    height: 1px;
    background: linear-gradient(90deg, rgba(91, 140, 255, 0) 0%, rgba(91, 140, 255, .75) 22%, rgba(56, 232, 255, .9) 50%, rgba(91, 140, 255, .75) 78%, rgba(91, 140, 255, 0) 100%);
    pointer-events: none;
  }
  .site-clean .topo > .env.topo__env { padding-inline: calc(var(--margem-pagina) - 13px); }
  .site-clean .topo > :is(vs-topo-linha, vs-progresso) { right: 14px; left: 14px; }
  /* Logotipo completo dentro da cápsula (no lugar do símbolo). */
  .site-clean .topo .marca__assinatura { display: block; width: 11rem; }
  .site-clean .topo .marca__simbolo { display: none; }
}
@media (min-width: 721px) and (max-width: 1200px) and (forced-colors: active) {
  .site-clean .topo::after { display: none; }
}

/* --- D10 · Privacidade: listas da prosa com o ponto luminoso do F09 (role="list" no <ul>) e o
   nó da R-ROTULO antes de cada h2 de seção, sem texto novo. Escopo só na página da política
   (main.privacidade-contato), para não mexer na prosa das outras páginas. */
.site-clean.tema-escuro:not(.home-clean) main.privacidade-contato .secao .prosa ul > li {
  position: relative;
  padding-left: 1.6rem;
  list-style: none;
}
.site-clean.tema-escuro:not(.home-clean) main.privacidade-contato .secao .prosa ul > li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: .2rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0 25%, var(--fx-ciano) 45%, var(--fx-cobalto) 100%);
  box-shadow: 0 0 10px rgba(56, 232, 255, .55);
}
.site-clean.tema-escuro:not(.home-clean) main.privacidade-contato .secao .prosa ul { padding-left: 0; }
.site-clean.tema-escuro:not(.home-clean) main.privacidade-contato .secao .prosa h2::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 .6em .2em 0;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--fx-ciano);
  box-shadow: 0 0 0 3px rgba(56, 232, 255, .14), 0 0 12px 2px rgba(56, 232, 255, .55);
}
@media (forced-colors: active) {
  .site-clean.tema-escuro:not(.home-clean) main.privacidade-contato .secao .prosa ul > li::before,
  .site-clean.tema-escuro:not(.home-clean) main.privacidade-contato .secao .prosa h2::before { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
}

/* --- D11 · Navegação "Outros dossiês" (/produto/<dossiê>/): F07 compacto (vidro, filete de topo,
   halo) e a seta ciano com o nó; só a seta se desloca. */
.site-clean.tema-escuro:not(.home-clean).modalidade-detalhe main .v-cta.modalidade-navmod__link,
.site-clean.tema-escuro:not(.home-clean).modalidade-detalhe main .v-cta.modalidade-navmod__link:is(:hover, .modalidade-navmod__link--voltar, .modalidade-navmod__link--voltar:hover) {
  position: relative;
  border-color: rgba(91, 140, 255, .38);
  background: var(--luz-cartao);
  box-shadow: var(--fx-reflexo), inset 0 2px 0 rgba(56, 232, 255, .45), 0 0 18px rgba(11, 92, 232, .20);
  transition: transform 180ms ease-out;
}
.site-clean.tema-escuro:not(.home-clean).modalidade-detalhe main .v-cta.modalidade-navmod__link:is(:hover, :focus-visible) {
  border-color: var(--fx-ciano);
  box-shadow: var(--fx-reflexo), inset 0 2px 0 rgba(56, 232, 255, .6), 0 0 0 1px rgba(56, 232, 255, .25), 0 0 18px rgba(56, 232, 255, .22);
}
.site-clean.tema-escuro:not(.home-clean).modalidade-detalhe main .modalidade-navmod__nome { color: #F6F8FC; }
.site-clean.tema-escuro:not(.home-clean).modalidade-detalhe main .modalidade-navmod__rotulo { color: var(--fx-ciano); }
.site-clean.tema-escuro:not(.home-clean).modalidade-detalhe main .modalidade-navmod__link > .modalidade-navmod__seta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--fx-ciano);
  transition: transform 180ms ease-out;
}
.site-clean.tema-escuro:not(.home-clean).modalidade-detalhe main .modalidade-navmod__link > .modalidade-navmod__seta::after {
  content: "";
  order: -1;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fx-ciano);
  box-shadow: 0 0 8px 1px rgba(56, 232, 255, .6);
}
.site-clean.tema-escuro:not(.home-clean).modalidade-detalhe main .modalidade-navmod__link--anterior > .modalidade-navmod__seta::after { order: 1; }
.site-clean.tema-escuro:not(.home-clean).modalidade-detalhe main .modalidade-navmod__link:is(:hover, :focus-visible) > .modalidade-navmod__seta { transform: translateX(3px); }
.site-clean.tema-escuro:not(.home-clean).modalidade-detalhe main .modalidade-navmod__link--anterior:is(:hover, :focus-visible) > .modalidade-navmod__seta { transform: translateX(-3px); }
html:is(.vivo-quieto, .vivo-parado, .vivo-calmo) .site-clean.tema-escuro:not(.home-clean).modalidade-detalhe main .modalidade-navmod__link > .modalidade-navmod__seta { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .site-clean.tema-escuro:not(.home-clean).modalidade-detalhe main .modalidade-navmod__link > .modalidade-navmod__seta { transition: none; }
}
@media (prefers-contrast: more) {
  .site-clean.tema-escuro:not(.home-clean).modalidade-detalhe main .v-cta.modalidade-navmod__link { border-color: #6F8FB0; box-shadow: none; }
}
@media (forced-colors: active) {
  .site-clean.tema-escuro:not(.home-clean).modalidade-detalhe main .v-cta.modalidade-navmod__link { background: Canvas; border-color: ButtonText; box-shadow: none; }
  .site-clean.tema-escuro:not(.home-clean).modalidade-detalhe main .modalidade-navmod__link > .modalidade-navmod__seta::after { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
}

/* --- D12 · Referências do Método: painel de vidro (R-VIDRO) com filete luminoso de topo no
   .env da seção; número mono ciano com o nó; hover do F13 (borda e halo trocam na hora, só o
   deslocamento anima). Nenhuma animação nova. */
.site-clean.tema-escuro:not(.home-clean).pagina-metodo main .metodo-referencias > .env {
  position: relative;
  width: calc(100% - 2 * var(--margem-pagina));
  max-width: calc(var(--coluna-max) - 2 * var(--margem-pagina));
  padding: clamp(1.75rem, 3.5vw, 3rem);
  border: 1px solid;
  border-color: var(--luz-borda);
  border-radius: 18px;
  background: var(--luz-canto), var(--fx-vidro);
  box-shadow: var(--fx-reflexo), inset 0 1px 0 rgba(56, 232, 255, .55), var(--fx-halo);
}
.site-clean.tema-escuro:not(.home-clean).pagina-metodo main .metodo-referencias > .env::before {
  position: absolute;
  top: -1px;
  left: 18px;
  right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 232, 255, .95) 20%, rgba(56, 232, 255, .95) 80%, transparent);
  box-shadow: 0 0 10px 1px rgba(56, 232, 255, .55);
  content: "";
  pointer-events: none;
}
.site-clean.tema-escuro:not(.home-clean).pagina-metodo main .metodo-referencias__lista > li { border-color: rgba(91, 140, 255, .22); }
.site-clean.tema-escuro:not(.home-clean).pagina-metodo main .metodo-referencias__lista a {
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  margin-inline: -.6rem;
  padding-inline: .6rem;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #DCE6F4;
  transition: transform 180ms ease-out;
}
.site-clean.tema-escuro:not(.home-clean).pagina-metodo main .metodo-referencias__lista a::before {
  display: inline-flex;
  align-items: center;
  padding-left: 12px;
  color: var(--fx-ciano);
  content: counter(referencia, decimal-leading-zero);
}
.site-clean.tema-escuro:not(.home-clean).pagina-metodo main .metodo-referencias__lista a::after {
  position: absolute;
  top: 1.25rem;
  left: .6rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fx-ciano);
  box-shadow: 0 0 8px 1px rgba(56, 232, 255, .7);
  content: "";
}
.site-clean.tema-escuro:not(.home-clean).pagina-metodo main .metodo-referencias__lista a { position: relative; }
.site-clean.tema-escuro:not(.home-clean).pagina-metodo main .metodo-referencias__lista a:is(:hover, :focus-visible) {
  border-color: var(--fx-ciano);
  background: rgba(16, 36, 64, .55);
  box-shadow: 0 0 0 1px rgba(56, 232, 255, .25), 0 0 18px rgba(56, 232, 255, .22);
  color: #F6F8FC;
}
.site-clean.tema-escuro:not(.home-clean).pagina-metodo main .metodo-referencias__cabeca p a { color: #8FC7FF; }
@media (prefers-reduced-motion: reduce) {
  .site-clean.tema-escuro:not(.home-clean).pagina-metodo main .metodo-referencias__lista a { transition: none; }
}
html.vivo-calmo .site-clean.tema-escuro:not(.home-clean).pagina-metodo main .metodo-referencias__lista a { transition: none; }
@media (prefers-contrast: more) {
  .site-clean.tema-escuro:not(.home-clean).pagina-metodo main .metodo-referencias > .env { border-color: #5B8CFF; background: #07101D; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-clean.tema-escuro:not(.home-clean).pagina-metodo main .metodo-referencias > .env { background: #07101D; }
}
@media (forced-colors: active) {
  .site-clean.tema-escuro:not(.home-clean).pagina-metodo main .metodo-referencias > .env { border-color: CanvasText; background: Canvas; box-shadow: none; }
  .site-clean.tema-escuro:not(.home-clean).pagina-metodo main .metodo-referencias > .env::before,
  .site-clean.tema-escuro:not(.home-clean).pagina-metodo main .metodo-referencias__lista a::after { display: none; }
  .site-clean.tema-escuro:not(.home-clean).pagina-metodo main .metodo-referencias__lista a { border-color: Canvas; }
  .site-clean.tema-escuro:not(.home-clean).pagina-metodo main .metodo-referencias__lista a:is(:hover, :focus-visible) { border-color: Highlight; box-shadow: none; }
}

/* --- D13 · "Conexões" (acionador fixo button.conexao-launcher, visível onde não há o assistente)
   e "Ver todas as conexões" (.conexoes-pagina__heading > button): sai o lilás antigo (style.css
   L2571/L2574) para o F13: contorno #3A6BB0 (3,78:1), fundo de vidro escuro, halo ciano no
   hover/foco trocando na hora, ícone da constelação ciano com o nó. Sem animação. */
.site-clean.tema-escuro:not(.home-clean) :is(button.conexao-launcher, .conexoes-pagina__heading > button) {
  border: 1px solid var(--fx-borda-forte, #3A6BB0);
  border-radius: 999px;
  background: var(--luz-cartao);
  box-shadow: var(--fx-reflexo), 0 0 18px rgba(11, 92, 232, .20);
  color: #EAF2FF;
}
.site-clean.tema-escuro:not(.home-clean) :is(button.conexao-launcher, .conexoes-pagina__heading > button):is(:hover, :focus-visible) {
  border-color: var(--fx-ciano);
  box-shadow: 0 0 0 1px rgba(56, 232, 255, .25), 0 0 18px rgba(56, 232, 255, .22);
  color: #F6F8FC;
}
.site-clean.tema-escuro:not(.home-clean) :is(button.conexao-launcher, .conexoes-pagina__heading > button) > span[aria-hidden="true"] {
  position: relative;
  color: var(--fx-ciano);
  text-shadow: 0 0 10px rgba(56, 232, 255, .55);
}
.site-clean.tema-escuro:not(.home-clean) button.conexao-launcher > span[aria-hidden="true"]::after {
  position: absolute;
  top: .1em;
  right: -.2em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--fx-ciano);
  box-shadow: 0 0 8px 1px rgba(56, 232, 255, .75);
  content: "";
}
.site-clean.tema-escuro:not(.home-clean) .conexoes-pagina__heading > button { display: inline-flex; align-items: center; }
.site-clean.tema-escuro:not(.home-clean) .conexoes-pagina__heading > button::before {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fx-ciano);
  box-shadow: 0 0 8px 1px rgba(56, 232, 255, .75);
  content: "";
}
@media (forced-colors: active) {
  .site-clean.tema-escuro:not(.home-clean) :is(button.conexao-launcher, .conexoes-pagina__heading > button) { border-color: ButtonText; background: ButtonFace; box-shadow: none; color: ButtonText; }
  .site-clean.tema-escuro:not(.home-clean) :is(button.conexao-launcher, .conexoes-pagina__heading > button):is(:hover, :focus-visible) { border-color: Highlight; }
  .site-clean.tema-escuro:not(.home-clean) :is(button.conexao-launcher, .conexoes-pagina__heading > button) > span[aria-hidden="true"] { color: ButtonText; text-shadow: none; }
  .site-clean.tema-escuro:not(.home-clean) button.conexao-launcher > span[aria-hidden="true"]::after,
  .site-clean.tema-escuro:not(.home-clean) .conexoes-pagina__heading > button::before { display: none; }
}

/* --- EX-01 · Retorno do formulário do Contato (bloqueante de legibilidade): R-ALERTA no escuro.
   Sai o fundo lavado claro de m24-layout.css L92–93 (rgb(255,229,232) com texto claro por cima).
   Erro: borda #E5484D, nó #FF8A8A; sucesso: borda e nó #3DDC97; "Enviando" (form[aria-busy],
   sem data-state novo: contact.js não muda) em #B2C0D4 com o nó ciano estático. Texto #F6F8FC
   (14,9:1 no topo do vidro). O nó é pintura de ::before (sem texto). Sem animação (M21). */
.site-clean.tema-escuro:not(.home-clean) .m24-form [role="status"]:not(:empty) {
  position: relative;
  padding-left: calc(var(--esp-4, 1rem) + 1.1rem);
  border: 1px solid rgba(91, 140, 255, .38);
  border-radius: 14px;
  background: var(--fx-vidro);
  box-shadow: var(--fx-reflexo);
  color: #F6F8FC;
}
.site-clean.tema-escuro:not(.home-clean) .m24-form [role="status"]:not(:empty)::before {
  position: absolute;
  top: calc(var(--esp-4, 1rem) + .55em);
  left: var(--esp-4, 1rem);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fx-ciano);
  box-shadow: 0 0 0 3px rgba(56, 232, 255, .14), 0 0 12px 2px rgba(56, 232, 255, .55);
  content: "";
}
.site-clean.tema-escuro:not(.home-clean) .m24-form [role="status"][data-state="error"] {
  border-color: var(--fx-erro-borda, #E5484D);
  background: linear-gradient(180deg, rgba(229, 72, 77, .10), rgba(229, 72, 77, .04)), var(--fx-vidro);
  color: #F6F8FC;
}
.site-clean.tema-escuro:not(.home-clean) .m24-form [role="status"][data-state="error"]::before {
  background: var(--fx-erro, #FF8A8A);
  box-shadow: 0 0 0 3px rgba(255, 138, 138, .14), 0 0 12px 2px rgba(255, 138, 138, .5);
}
.site-clean.tema-escuro:not(.home-clean) .m24-form [role="status"][data-state="success"] {
  border-color: var(--fx-sucesso-borda, rgba(61, 220, 151, .55));
  background: linear-gradient(180deg, rgba(61, 220, 151, .08), rgba(61, 220, 151, .03)), var(--fx-vidro);
  color: #F6F8FC;
}
.site-clean.tema-escuro:not(.home-clean) .m24-form [role="status"][data-state="success"]::before {
  background: var(--fx-sucesso, #3DDC97);
  box-shadow: 0 0 0 3px rgba(61, 220, 151, .14), 0 0 12px 2px rgba(61, 220, 151, .5);
}
.site-clean.tema-escuro:not(.home-clean) .m24-form[aria-busy="true"] [role="status"]:not(:empty) {
  border-color: rgba(91, 140, 255, .38);
  background: var(--fx-vidro);
  color: #B2C0D4;
}
.site-clean.tema-escuro:not(.home-clean) .m24-form[aria-busy="true"] [role="status"]:not(:empty)::before {
  background: var(--fx-ciano);
  box-shadow: 0 0 0 3px rgba(56, 232, 255, .14), 0 0 12px 2px rgba(56, 232, 255, .55);
}
@media (forced-colors: active) {
  .site-clean.tema-escuro:not(.home-clean) .m24-form [role="status"]:not(:empty) { padding-left: var(--esp-4, 1rem); border-color: CanvasText; background: Canvas; box-shadow: none; color: CanvasText; }
  .site-clean.tema-escuro:not(.home-clean) .m24-form [role="status"]:not(:empty)::before { display: none; }
}

/* --- EX-02 · Campo inválido do Contato (R-CAMPO inválido): borda #E5484D (4,1:1 no topo do vidro)
   com o brilho vermelho; a mensagem #contact-*-error em #FF8A8A (9,0:1). A borda dos campos passa
   à --fx-borda-controle (#4A7795, 3,3:1 sobre o vidro; revisão C2-08), no lugar da #3A6BB0 do
   F14, que dá 2,97:1 no topo do vidro. Sem animação. */
.site-clean.tema-escuro:not(.home-clean) .m24--contato .m24-field :is(input, textarea) { border-color: var(--fx-borda-controle, #4A7795); border-radius: 12px; }
/* Sem a alça cinza nativa de redimensionar no campo da mensagem (FID-P6-12); a altura mínima fica. */
.site-clean.tema-escuro:not(.home-clean) .m24--contato .m24-field textarea { resize: none; }
.site-clean.tema-escuro:not(.home-clean) .m24--contato .m24-field :is(input, textarea)[aria-invalid="true"],
.site-clean.tema-escuro:not(.home-clean) .m24--contato .m24-field :is(input, textarea)[aria-invalid="true"]:hover {
  border: 1px solid var(--fx-erro-borda, #E5484D);
  box-shadow: 0 0 0 3px rgba(229, 72, 77, .18);
}
.site-clean.tema-escuro:not(.home-clean) .m24--contato .m24-field :is(input, textarea)[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(229, 72, 77, .18), 0 0 0 4px rgba(56, 232, 255, .18);
}
.site-clean.tema-escuro:not(.home-clean) .m24--contato .m24-error:not(:empty) { color: var(--fx-erro, #FF8A8A); }
@media (forced-colors: active) {
  .site-clean.tema-escuro:not(.home-clean) .m24--contato .m24-field :is(input, textarea)[aria-invalid="true"] { border: 2px solid Highlight; box-shadow: none; }
  .site-clean.tema-escuro:not(.home-clean) .m24--contato .m24-error:not(:empty) { color: CanvasText; }
}

/* --- EX-03 · Envio desabilitado e campos somente leitura do Contato. O botão desabilitado
   ("Enviar mensagem" antes do script, "Enviando…" durante o envio) recebe o desabilitado da R-CTA
   (fundo #0C192B, borda #3A6BB0, texto #93A7C2: 7,2:1; sai o opacity .75 do cobalto chapado,
   contact.css L10) e vence a ação principal do §C (D0), inclusive no hover. Os campos travados
   durante o envio (read-only) ganham o somente leitura da R-CAMPO. "Ocupado" sem pulso (M21). */
.site-clean.tema-escuro:not(.home-clean) main .m24-form button.botao--primario:disabled,
.site-clean.tema-escuro:not(.home-clean) main .m24-form button.botao--primario:disabled:is(:hover, :active) {
  border: 1px solid transparent;
  background: linear-gradient(#0C192B, #0C192B) padding-box, linear-gradient(100deg, #3A6BB0, #3A6BB0) border-box;
  color: #93A7C2;
  box-shadow: none;
  opacity: 1;
  cursor: default;
  transform: none;
}
.site-clean.tema-escuro:not(.home-clean) main .m24-form button.botao--primario:disabled :is(span[aria-hidden="true"], .v-cta__seta) { color: #93A7C2; }
.site-clean.tema-escuro:not(.home-clean) .m24--contato .m24-field :is(input, textarea):read-only {
  border-color: rgba(58, 107, 176, .55);
  background: #0A1422;
  color: #B2C0D4;
}
@media (forced-colors: active) {
  .site-clean.tema-escuro:not(.home-clean) main .m24-form button.botao--primario:disabled,
  .site-clean.tema-escuro:not(.home-clean) main .m24-form button.botao--primario:disabled:is(:hover, :active) { border-color: GrayText; background: ButtonFace; color: GrayText; }
  .site-clean.tema-escuro:not(.home-clean) .m24--contato .m24-field :is(input, textarea):read-only { border-color: GrayText; background: Canvas; color: CanvasText; }
}

/* --- EX-10 · Faixa de prévia (.faixa-rascunho, injetada por nav.js só em *.pages.dev): R-ALERTA
   âmbar no escuro. Sai o fundo lavado claro (style.css L1755): vidro escuro, filete âmbar no pé,
   texto #F6F8FC em mono (14,9:1) e o nó âmbar estático pintado no ::before (sem texto). Vale para
   a Home e as internas escuras. Sem animação. */
.site-clean.tema-escuro .faixa-rascunho {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--fx-alerta-borda, rgba(255, 197, 117, .55));
  background: linear-gradient(180deg, rgba(255, 197, 117, .08), rgba(255, 197, 117, .03)), linear-gradient(180deg, #0C192B, #07101D);
  box-shadow: var(--fx-reflexo), 0 6px 22px rgba(0, 0, 0, .45);
  color: #F6F8FC;
  letter-spacing: .02em;
}
.site-clean.tema-escuro .faixa-rascunho::before {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 .75em .1em 0;
  border-radius: 50%;
  vertical-align: middle;
  background: var(--fx-alerta, #FFC575);
  box-shadow: 0 0 0 3px rgba(255, 197, 117, .14), 0 0 12px 2px rgba(255, 197, 117, .5);
  content: "";
}
@media (forced-colors: active) {
  .site-clean.tema-escuro .faixa-rascunho { border-bottom-color: CanvasText; background: Canvas; box-shadow: none; color: CanvasText; }
  .site-clean.tema-escuro .faixa-rascunho::before { display: none; }
}

/* --- EX3-04 · Anel de foco genérico 2.5 (--fx-anel-foco), na Home e nas internas escuras: contorno
   ciano de 2 px (13,7:1) com o brilho estático, no raio do próprio componente (o outline segue o
   border-radius). Sobrepõe style.css L255, L260 e L352 (o box-shadow de 5 px e o contorno âmbar).
   No menu, no rodapé, no índice das páginas de estudo e em "Pausar animações" o recuo é de 2 px,
   para o anel não invadir o vizinho. Regras de foco mais específicas (ação principal D0, pílulas,
   mídia) continuam valendo. A dobra 2 da Home (.conexao-dialog.is-inline-map, o modelo; revisão
   C1-01) fica de fora, por :where() para não mudar a especificidade. Sem transição. Cores forçadas: o sistema troca a cor e tira o brilho. */
.site-clean.tema-escuro :focus-visible:not(:where(.conexao-dialog.is-inline-map *)) {
  outline: 2px solid var(--fx-ciano, #38E8FF);
  outline-offset: 3px;
  box-shadow: 0 0 14px 2px rgba(56, 232, 255, .40);
}
.site-clean.tema-escuro :is(#nav-principal, .rodape, .indice-estudo) :focus-visible,
.site-clean.tema-escuro [data-vivo-pausa]:focus-visible { outline-offset: 2px; }
@media (forced-colors: active) {
  .site-clean.tema-escuro :focus-visible:not(:where(.conexao-dialog.is-inline-map *)) { outline-color: Highlight; box-shadow: none; }
}

/* --- EX3-05 · Barra de rolagem da página escura: color-scheme dark (hoje html fica light, style.css
   L110, e a barra do sistema sai clara sobre o fundo #03060D) e o polegar ciano translúcido sobre
   o trilho #03060D (tokens --fx-barra-*). Vale para a Home e as internas escuras. */
html:has(body.tema-escuro) {
  color-scheme: dark;
  scrollbar-color: var(--fx-barra-polegar, rgba(56, 232, 255, .42)) var(--fx-barra-trilho, #03060D);
}
@media (forced-colors: active) {
  html:has(body.tema-escuro) { scrollbar-color: auto; }
}

/* --- EX3-06 · Barras dos painéis roláveis do diálogo Constelação (fora da dobra 2 da Home;
   revisões C1-01 e C2-10): .map-reader e .universe-space (regras de mesmo nome em style.css) com o mesmo
   token da página. Ficam fora de G5: .x-graph-viewport (palco, M7), inspetor e lista da imersão
   (G1) e .ex-transcript (G2). O antigo .demo-ui__abas, sem uso, saiu com a demonstração
   (higiene do turno 16, COD-01). */
.site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) :is(.map-reader, .universe-space) {
  scrollbar-color: var(--fx-barra-polegar, rgba(56, 232, 255, .42)) var(--fx-barra-trilho, #03060D);
}
/* A dobra 2 da Home (modelo, revisão C1-01) não herda o token da página do EX3-05
   (scrollbar-color é herdada): volta ao auto de antes, e o .map-reader dela mantém o próprio valor. */
.site-clean.home-clean .conexao-dialog.is-inline-map { scrollbar-color: auto; }
@media (forced-colors: active) {
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) :is(.map-reader, .universe-space) { scrollbar-color: auto; }
}

/* --- EX3-01 · Anel de foco dos nós da constelação: R-FOCO sem recorte, no botão DOM (o desenho do
   ponto e do rótulo não muda; M7). Na constelação da Home (.universo, hoje #ffc575 recortado,
   style.css L2324) o anel fica para dentro (outline-offset -3px) e em pílula; é exceção deliberada
   (defeito de legibilidade EX-01 da varredura) e só aparece com foco. No diálogo Constelação, .map-star
   só fora da dobra 2 da Home (revisão C1-01). Estático. */
.site-clean.tema-escuro .universo :focus-visible,
.site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-star:focus-visible {
  outline: 2px solid var(--fx-ciano, #38E8FF);
  outline-offset: -3px;
  border-radius: 999px;
  box-shadow: 0 0 14px 2px rgba(56, 232, 255, .40);
}
@media (forced-colors: active) {
  .site-clean.tema-escuro .universo :focus-visible,
  .site-clean:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-star:focus-visible { outline-color: Highlight; box-shadow: none; }
}

/* --- EXTRA-08 · Rótulo "09 ASSUNTOS · UM SISTEMA CONECTADO" do painel da constelação da Home
   abaixo de 860 px (onde o inset é 1rem): os rótulos das estrelas, que giram, passavam por baixo
   dele na borda esquerda. O rótulo (controle DOM estático do painel; o canvas, as estrelas e as
   linhas não mudam, M7) ganha o vidro por trás do texto, recuo à esquerda alinhado com "Temas
   ligados" e fica acima dos rótulos das estrelas. Conferido a 360, 390 e 480. Estático. */
@media (max-width: 859px) {
  .site-clean.tema-escuro.home-clean .universo--abertura .universo__caption {
    z-index: 3;
    width: max-content;
    max-width: calc(100% - 2rem);
    padding: .2rem .5rem;
    border-radius: 6px;
    background: rgba(7, 16, 29, .92);
  }
}
@media (max-width: 859px) and (forced-colors: active) {
  .site-clean.tema-escuro.home-clean .universo--abertura .universo__caption { background: Canvas; }
}

/* --- G6 · EX3-08 · Logotipo do cabeçalho e do rodapé em cores forçadas. O <img> não passa pelas
   cores forçadas: o ciano e o branco do SVG sumiam sobre o Canvas claro ("DUE DILIGENCE" quase
   ilegível). Aqui o conteúdo do <img> sai da caixa (object-position) e o mesmo SVG vira máscara de
   um fundo CanvasText: o desenho é o da marca, na cor de texto do tema do sistema (clara ou escura).
   Fora das cores forçadas nada muda. Estático. */
@media (forced-colors: active) {
  .marca :is(.marca__assinatura, .marca__simbolo, .marca__micro) {
    forced-color-adjust: none;
    background: CanvasText;
    object-position: -1000vw 0;
    -webkit-mask: var(--marca-mascara) center / contain no-repeat;
    mask: var(--marca-mascara) center / contain no-repeat;
  }
  .marca .marca__assinatura { --marca-mascara: url("/assets/marca/logo-mono-claro.svg"); }
  /* F7: o símbolo usa a variante 2.5 de uma cor só (EX3-08), feita para máscara; mesma geometria
     da logo-simbolo-claro.svg (conferida caminho a caminho). */
  .marca .marca__simbolo { --marca-mascara: url("/assets/marca/logo-simbolo-2-5-currentcolor.svg"); }
  .marca .marca__micro { --marca-mascara: url("/assets/marca/micro-simbolo-claro.svg"); }
}

/* §C · fim */

/* --- Modos -------------------------------------------------------------- */
html:is(.vivo-quieto, .vivo-parado, .vivo-calmo) .site-clean.tema-escuro:not(.home-clean) main :is(.botao--secundario, .v-cta, .conexao-link) { transition: none; }

/* Contraste reforçado (M33): halos saem, bordas sólidas, fundo mais discreto. */
@media (prefers-contrast: more) {
  .site-clean.tema-escuro:not(.home-clean) { background-image: radial-gradient(60rem 36rem at 88% 8%, rgba(11, 92, 232, .10), transparent 70%); background-size: 100% 100vh; background-repeat: no-repeat; }
  .site-clean.tema-escuro:not(.home-clean) main :is(.v-card, .modalidade-card) { border-color: #3A6BB0; box-shadow: none; }
  .site-clean.tema-escuro:not(.home-clean) main :is(.v-card, .modalidade-card)::after { display: none; }
  .site-clean.tema-escuro:not(.home-clean) main :is(.metodo-bloco, .v-faixa, .m24--contato .m24-form) { border-color: #6F8FB0; box-shadow: none; }
  .site-clean.tema-escuro:not(.home-clean) main .v-estado { box-shadow: none; }
  .site-clean.tema-escuro:not(.home-clean) main .v-trilha > li::before { box-shadow: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-clean.tema-escuro:not(.home-clean) main :is(.metodo-bloco, .v-faixa, .m24--contato .m24-form, .indice-estudo ul) { background: #0C192B; }
}
/* Cores forçadas (M32): a decoração some; marcadores e bordas no sistema; gradiente em CanvasText. */
@media (forced-colors: active) {
  .site-clean.tema-escuro:not(.home-clean) main :is(.v-card, .modalidade-card)::after { display: none; }
  .site-clean.tema-escuro:not(.home-clean) { background-image: none; }
  .site-clean.tema-escuro:not(.home-clean) :is(.texto-gradiente, .caso-didatico h1 > span, .x-heading h1 > span) { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
  .site-clean.tema-escuro:not(.home-clean) main :is(.v-card, .modalidade-card, .metodo-bloco, .v-faixa, .m24--contato .m24-form) { border-color: CanvasText; box-shadow: none; background-image: none; }
  .site-clean.tema-escuro:not(.home-clean) main :is(.versalete, .m24-meta, .v-rotulo)::before,
  .site-clean.tema-escuro:not(.home-clean) main .heroi--pagina :is(.env, .modalidade-heroi__texto) > .versalete::after,
  .site-clean.tema-escuro:not(.home-clean) main :is(.metodo-lista, .produto-regras__lista, .modalidade-limites__lista, .pratica-lista, .ib-fontes-lista) > li::before { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
  .site-clean.tema-escuro:not(.home-clean) main .v-trilha > li::before { border-color: CanvasText; box-shadow: none; }
  .site-clean.tema-escuro:not(.home-clean) main .v-trilha > li:not(:last-child)::after { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
  .site-clean.tema-escuro:not(.home-clean) main .v-estado { border-color: CanvasText; box-shadow: none; }
  .site-clean.tema-escuro:not(.home-clean) main .v-estado::before { box-shadow: none; }
  .site-clean.tema-escuro:not(.home-clean) main :is(.botao--secundario, .v-cta, .conexao-link) { border-color: ButtonText; box-shadow: none; }
}
@media print {
  .site-clean.tema-escuro:not(.home-clean) :is(.texto-gradiente, .caso-didatico h1 > span, .x-heading h1 > span) { background: none; color: #000; -webkit-text-fill-color: #000; }
  /* EX-04 (W19 · P6) · Contrato 2.5 de impressão, na Home e nas internas escuras: fundo branco e
     texto preto (o body escuro vencia style.css L1933); painéis de vidro sem fundo nem brilho, com
     filete #999; os pseudo-elementos decorativos (nós, cantoneiras, grade) perdem a pintura, e os
     que têm texto (numeração, +/−) ficam em preto; canvas, camadas vs-* do vivo-sinais, acionador
     do assistente, lançador de conexões e faixa de prévia somem. p6-caso.css e p6-conversa.css
     trazem os próprios blocos (§1.5). */
  html:has(body.tema-escuro), body.site-clean.tema-escuro { background: #fff !important; color: #000 !important; }
  .site-clean.tema-escuro :is(main, main *) {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    color: #000 !important;
    -webkit-text-fill-color: currentColor !important;
  }
  .site-clean.tema-escuro main *::before,
  .site-clean.tema-escuro main *::after {
    background: none !important;
    border-color: #999 !important;
    box-shadow: none !important;
    color: #000 !important;
    -webkit-text-fill-color: currentColor !important;
  }
  .site-clean.tema-escuro main :is(.vs-cartao, .card, .chamada-final, .v-tabela, .v-tabela th, .v-tabela td, .blueprint-metodo, .metodo-referencias, .video-apresentacao__quadro, .v-atalho, .v-atalho__item, .modalidade-navmod__link, .m24-form, .conexao-link, details, .protecao-detalhe) { border-color: #999 !important; }
  .site-clean.tema-escuro :is(canvas, vs-brilho, vs-claro, vs-cursor, vs-decod, vs-etapa, vs-filete, vs-medidor, vs-progresso, vs-progresso-cheio, vs-progresso-ponta, vs-reflexo, vs-ruido, vs-topo-linha, vs-trilho, vs-varredura, vs-barra, vs-barra-vazia, .videre-assistant-launcher, .conexao-launcher, .faixa-rascunho) { display: none !important; }
}

/* ===========================================================================
   F12-LUZ · Luz em todos os quadros (W19q, 06/10/2026). Tiago: "LUZ EM TODOS OS QUADROS, NENHUM
   QUADRO COM COR SOLIDA.. BORDA EM TODOS OS CARDS", "AUDITE TUDO" e "BARRA DE MENU PRINCIPAL TBM
   ESTA SEM EFEITO". Uma linguagem só, a da ficha das normas (W19o) e do bloco do Método (F11),
   com os tokens --luz-* do §A: vidro translúcido em diagonal com luz radial nos cantos, borda acesa
   nos 4 lados (mais viva no topo), fio de luz no topo (camada de fundo: não ocupa pseudo-elemento)
   e halo; os painéis grandes levam também as cantoneiras F11. Vale para a Home e as internas
   (.site-conectado.site-clean.tema-escuro, a mesma força de :not(.home-clean)). Ficam de fora o
   palco da constelação (M7), as zonas de /experiencias/ e /explorar/ (p6-caso.css e
   p6-conversa.css), a ficha das normas (pag-normas.css, W19o), o pacote de /contratacao/ (W19p)
   e o herói da Home (W19r). Tudo estático: o brilho do hover e do foco troca na hora (M44) e o
   movimento é só o do vivo-sinais.js (CARTOES/PAINEIS). Modos no fim do bloco.
   ========================================================================= */

/* --- F12.1 · Lista única dos quadros: vidro com luz no canto, fio no topo, borda acesa e halo.
   Correção 2: um seletor por quadro (num :is() a lista inteira herdava a força do item mais forte,
   (0,5,2), e passava por cima de regras próprias das páginas). Saíram daqui o "Lançamento conjunto"
   da ficha (.modalidade-ficha__estado volta a ser só a divisória: a pílula já é acesa) e as colunas
   das Aplicações da Home (moldura por fora, F12.10, sem mudar a folga). */
.site-conectado.site-clean.tema-escuro main .v-faixa,
.site-conectado.site-clean.tema-escuro main details.protecao-detalhe,
.site-conectado.site-clean.tema-escuro main details.video-transcricao,
.site-conectado.site-clean.tema-escuro main .indice-estudo ul,
.site-conectado.site-clean.tema-escuro main :is(.pagina-fontes .m24-index),
.site-conectado.site-clean.tema-escuro main :is(.m24--contato .m24-form),
.site-conectado.site-clean.tema-escuro main .contato-form,
.site-conectado.site-clean.tema-escuro main .blueprint-metodo__metricas,
.site-conectado.site-clean.tema-escuro main .pratica-ficha,
.site-conectado.site-clean.tema-escuro main .nr-destaques,
.site-conectado.site-clean.tema-escuro main .nr-temas__texto,
.site-conectado.site-clean.tema-escuro main .nr-oficial,
.site-conectado.site-clean.tema-escuro main .v-atalho__item,
.site-conectado.site-clean.tema-escuro main .v-card.home-protecoes {
  border-width: 1px;
  border-style: solid;
  border-color: var(--luz-borda);
  background: var(--luz-fundo);
  box-shadow: var(--luz-halo);
}
/* Os pequenos (itens do atalho, temas das normas) com o halo curto. */
.site-conectado.site-clean.tema-escuro main :is(.v-atalho__item, .nr-temas__texto) { box-shadow: var(--luz-halo-leve); }
/* Painéis grandes: também as cantoneiras F11 (Regras de proteção, formulário do Contato). O body
   iguala a força da lista acima (0,5,2), e esta regra vem depois. */
body.site-conectado.site-clean.tema-escuro main :is(.v-faixa.produto-regras, .m24--contato .m24-form, .contato-form) {
  background: var(--luz-cantos), var(--luz-fundo);
}
/* Celular (≤ 480 px): o "Situação atual" de /produto/ e /contratacao/ continua sem caixa (FID-P6-09,
   pag-produto.css: o selo cabe numa linha e o texto usa a largura toda). */
@media (max-width: 480px) {
  body.site-conectado.site-clean.tema-escuro main .produto-heroi .v-faixa.produto-estado { padding: 0; border: 0; background: none; box-shadow: none; }
  body.site-conectado.site-clean.tema-escuro main .produto-heroi .v-faixa.produto-estado::before { display: none; }
}
/* O fio azul da esquerda dos avisos vira luz em degradê sobre a borda (a moldura inteira já acende). */
.site-conectado.site-clean.tema-escuro main .v-faixa::before {
  inset: 16% auto 16% -1px;
  width: 1px;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(56, 232, 255, 0), rgba(56, 232, 255, .85) 40%, rgba(91, 140, 255, .7) 70%, rgba(91, 140, 255, 0));
  box-shadow: 0 0 10px rgba(56, 232, 255, .45);
}
/* "O que diz o texto oficial" (normas): sai o fio grosso da esquerda e o raio assimétrico. */
.site-conectado.site-clean.tema-escuro main .nr-oficial { border-radius: 14px; }
/* r5: na base (pag-normas.css) a borda da esquerda do .nr-oficial tinha 2 px (o fio ciano). O border-width: 1px
   da lista acima a afina para a moldura ficar igual nos 4 lados, e o texto ganhava 1 px (LGPD a 390: um
   parágrafo perdia uma linha e a página encurtava 28 px). O 1 px devolvido vai para a folga da esquerda
   (mesmo clamp() de pag-normas.css + 1 px): borda + folga = base, a medida do texto fica igual e não volta
   o fio grosso da esquerda que Tiago rejeitou. */
body.site-conectado.site-clean.tema-escuro main .nr-oficial { padding-left: calc(clamp(1.1rem, 2.4vw, 1.6rem) + 1px); }
/* Os quadros que eram só um filete (regras da contratação, colunas das Aplicações da Home) ganham a
   moldura por fora no F12.10, sem folga nova: a grade e o texto ficam onde estavam. */
/* Divisórias de dentro dos quadros: degradê suave no lugar da linha chapada. */
.site-conectado.site-clean.tema-escuro main :is(.indice-estudo li, .pagina-fontes .m24-index a) { border-color: rgba(91, 140, 255, .26); }
.site-conectado.site-clean.tema-escuro main .blueprint-metodo__metrica { border-color: rgba(91, 140, 255, .26); }

/* --- F12.2 · Controles com moldura (links-cartão, botões secundários, pílulas): vidro curto,
   (correção 2: fora do pacote de /contratacao/ da raia W19p, #personalizado, .pacote-cartao e
   .chamada-final, que ficam como estão; o resto da /contratacao/ acende)
   borda acesa no topo e laterais #3A6BB0 (3,78:1, F13), halo curto; no hover e no foco a borda e o
   halo acendem (troca na hora). */
.site-conectado.site-clean.tema-escuro main :is(.conexoes-pagina__links > a.conexao-link, a.v-atalho),
.site-clean.tema-escuro:not(.home-clean) main :is(.botao--secundario, .v-cta:not(.v-cta--primaria)):not(.modalidade-navmod__link):not(:where(.pagina-contratacao :is(#personalizado, .pacote-cartao, .chamada-final) *)) {
  border-color: var(--luz-borda-controle);
  background: var(--luz-fundo);
  box-shadow: var(--luz-halo-leve);
}
.site-clean.tema-escuro:not(.home-clean) main :is(.botao--secundario, .v-cta:not(.v-cta--primaria)):not(.modalidade-navmod__link):not(:where(.pagina-contratacao :is(#personalizado, .pacote-cartao, .chamada-final) *)) { background: var(--luz-chip); }
.site-conectado.site-clean.tema-escuro main :is(.conexoes-pagina__links > a.conexao-link, a.v-atalho):is(:hover, :focus-visible),
.site-clean.tema-escuro:not(.home-clean) main :is(.botao--secundario, .v-cta:not(.v-cta--primaria)):not(.modalidade-navmod__link):not(:where(.pagina-contratacao :is(#personalizado, .pacote-cartao, .chamada-final) *)):is(:hover, :focus-visible) {
  border-color: var(--luz-borda-acesa);
  box-shadow: var(--luz-halo-leve-aceso);
}
.site-clean.tema-escuro:not(.home-clean) main :is(.botao--secundario, .v-cta:not(.v-cta--primaria)):not(.modalidade-navmod__link):not(:where(.pagina-contratacao :is(#personalizado, .pacote-cartao, .chamada-final) *)):is(:hover, :focus-visible) { background: var(--luz-chip-aceso); }
/* Selos e pílulas: o mesmo vidro curto (sai o fundo opaco #010309 / #07101D). */
.site-conectado.site-clean.tema-escuro main :is(.v-card__tipo, .modalidade-card__tipo, .nr-item__tipo, .v-estado):not(:where(.pagina-contratacao :is(#personalizado, .pacote-cartao, .chamada-final) *)),
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo .blueprint-metodo__abas > span:not(:first-child),
.site-clean.tema-escuro .m24 .m24-hero.produto-heroi .produto-indice a {
  background: var(--luz-chip);
  box-shadow: var(--luz-halo-leve);
}
.site-conectado.site-clean.tema-escuro main :is(.v-card__tipo, .modalidade-card__tipo, .nr-item__tipo):not(:where(.pagina-contratacao :is(#personalizado, .pacote-cartao, .chamada-final) *)) { border-color: rgba(56, 232, 255, .55) #2C4A70 #2C4A70 #2C4A70; }
.site-clean.tema-escuro .m24 .m24-hero.produto-heroi .produto-indice a { border-color: var(--luz-borda-controle); }
.site-clean.tema-escuro .m24 .m24-hero.produto-heroi .produto-indice a:is(:hover, :focus-visible) {
  border-color: var(--luz-borda-acesa);
  background: var(--luz-chip-aceso);
  box-shadow: var(--luz-halo-leve-aceso);
}
/* Selos do protótipo: só o fundo muda (os de estado mantêm o brilho da própria cor, D5). */
.site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo :is(.blueprint-metodo__regra, .blueprint-metodo__painel) > .selo { background: var(--luz-chip); }

/* --- F12.3 · Hover e foco dos quadros que se abrem ou levam a outro lugar. */
.site-conectado.site-clean.tema-escuro main :is(details.protecao-detalhe, details.video-transcricao):is(:hover, :focus-within),
.site-conectado.site-clean.tema-escuro main .nr-temas > li:hover .nr-temas__texto {
  border-color: var(--luz-borda-acesa);
  box-shadow: var(--luz-halo-aceso);
}
.site-conectado.site-clean.tema-escuro main .nr-temas > li:hover .nr-temas__texto { box-shadow: var(--luz-halo-leve-aceso); }
.site-conectado.site-clean.tema-escuro main .indice-estudo a:hover,
.site-conectado.site-clean.tema-escuro main :is(.pagina-fontes .m24-index) a:is(:hover, :focus-visible, [aria-current="location"]) {
  background: radial-gradient(70% 90% at 50% 100%, rgba(56, 232, 255, .16), rgba(56, 232, 255, 0) 72%), linear-gradient(180deg, rgba(24, 58, 104, .45), rgba(8, 20, 38, .30));
  color: #FFFFFF;
}

/* --- F12.4 · Campos do Contato: vidro escuro em vez do bloco preto, borda ≥ 3:1 (EX-02) com o
   topo aceso. Os estados de erro (EX-02) e somente leitura (EX-03) continuam valendo. */
.site-clean.tema-escuro:not(.home-clean) .m24--contato .m24-field :is(input, textarea):not([aria-invalid="true"]):not(:read-only) {
  border-color: rgba(56, 232, 255, .70) var(--fx-borda-controle, #4A7795) var(--fx-borda-controle, #4A7795);
  background:
    radial-gradient(70% 140% at 0% 0%, rgba(56, 232, 255, .07), rgba(56, 232, 255, 0) 70%),
    linear-gradient(180deg, rgba(10, 22, 40, .80) 0%, rgba(4, 10, 20, .86) 100%);
  box-shadow: inset 0 1px 0 rgba(234, 253, 255, .06);
}

/* --- F12.5 · Cabeçalho (menu principal). O .topo está em FORA no vivo-sinais.js: a luz é estática,
   por CSS, e o brilho vem no hover e no foco. O fundo continua opaco (FID-13 e CEL-01: o texto de
   baixo não pode aparecer através da cápsula ao rolar), mas deixa de ser cor chapada: degradê
   cobalto, luz radial nos cantos e reflexo no topo. Borda acesa nos 4 lados (mais viva no topo e na
   base), filete de luz da base mais forte e com brilho; item ativo e hover/foco acesos; "Entrar na
   plataforma", Instagram e Menu com borda acesa. */
.site-clean.tema-escuro .topo {
  --luz-topo:
    radial-gradient(34% 170% at 0% 0%, rgba(56, 232, 255, .10), rgba(56, 232, 255, 0) 70%),
    radial-gradient(30% 160% at 100% 100%, rgba(11, 92, 232, .18), rgba(11, 92, 232, 0) 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 45%),
    linear-gradient(170deg, #0B1B33 0%, #07111F 55%, #050C18 100%);
  --luz-topo-filete: linear-gradient(90deg, rgba(91, 140, 255, 0) 0%, rgba(91, 140, 255, .8) 18%, rgba(56, 232, 255, .95) 40%, #EAFDFF 50%, rgba(56, 232, 255, .95) 60%, rgba(91, 140, 255, .8) 82%, rgba(91, 140, 255, 0) 100%);
}
@media (min-width: 1201px) {
  .site-clean.tema-escuro .topo {
    border-color: rgba(56, 232, 255, .42) rgba(91, 140, 255, .40) rgba(56, 232, 255, .30) rgba(91, 140, 255, .40);
    background: var(--luz-topo);
    box-shadow: inset 0 1px 0 rgba(234, 253, 255, .10), inset 0 0 40px rgba(56, 232, 255, .04), 0 0 0 1px rgba(56, 232, 255, .06), 0 0 30px rgba(11, 92, 232, .22), 0 14px 36px rgba(0, 0, 0, .38), 0 -16px 0 16px #060E1B;
  }
}
@media (max-width: 1200px) {
  .site-clean.tema-escuro .topo {
    border-color: rgba(56, 232, 255, .40) rgba(91, 140, 255, .36) rgba(56, 232, 255, .28) rgba(91, 140, 255, .36);
    background: var(--luz-topo);
    box-shadow: inset 0 1px 0 rgba(234, 253, 255, .09), 0 0 0 1px rgba(56, 232, 255, .05), 0 0 24px rgba(11, 92, 232, .20), 0 10px 28px rgba(0, 0, 0, .45);
  }
  .site-clean.tema-escuro .topo:has(#nav-principal.nav--aberta) { background: var(--luz-topo); }
}
.site-clean.tema-escuro .topo::after {
  background: var(--luz-topo-filete);
  box-shadow: 0 0 10px rgba(56, 232, 255, .65), 0 0 22px rgba(11, 92, 232, .40);
}
/* Itens do menu: no hover, no foco e na página atual o rótulo acende (brilho no texto e luz embaixo
   dele), sem mudar a medida nem a folga (invariante do cabeçalho: os rótulos não quebram). */
.site-clean.tema-escuro .nav ul a:is(:hover, :focus-visible),
.site-clean.tema-escuro .nav ul a[aria-current="page"] {
  border-bottom-color: var(--fx-ciano, #38E8FF);
  background: radial-gradient(70% 60% at 50% 100%, rgba(56, 232, 255, .20), rgba(56, 232, 255, 0) 75%);
  color: #FFFFFF;
  text-shadow: 0 0 14px rgba(56, 232, 255, .55);
}
.site-clean.tema-escuro .nav ul a[aria-current="page"] { box-shadow: 0 6px 10px -6px rgba(56, 232, 255, .85); }
/* "Entrar na plataforma", Instagram e Menu: vidro curto, topo aceso, laterais #5F7899 (AC-01, 3,7:1). */
.site-clean.tema-escuro .topo :is(.topo__instagram, .botao.topo__plataforma, .nav-alternar) {
  border-color: rgba(56, 232, 255, .72) #5F7899 #5F7899;
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(56, 232, 255, .16), rgba(56, 232, 255, 0) 70%),
    linear-gradient(180deg, rgba(24, 52, 92, .75) 0%, rgba(7, 16, 30, .90) 100%);
  box-shadow: inset 0 1px 0 rgba(234, 253, 255, .10), 0 0 0 1px rgba(56, 232, 255, .06), 0 0 14px rgba(56, 232, 255, .12);
}
.site-clean.tema-escuro .topo :is(.topo__instagram, .botao.topo__plataforma, .nav-alternar):is(:hover, :focus-visible, [aria-expanded="true"]) {
  border-color: #38E8FF rgba(56, 232, 255, .70) rgba(56, 232, 255, .55);
  background:
    radial-gradient(90% 130% at 0% 0%, rgba(56, 232, 255, .26), rgba(56, 232, 255, 0) 72%),
    linear-gradient(180deg, rgba(28, 66, 116, .85) 0%, rgba(8, 20, 38, .92) 100%);
  box-shadow: inset 0 1px 0 rgba(234, 253, 255, .16), 0 0 0 1px rgba(56, 232, 255, .25), 0 0 20px rgba(56, 232, 255, .32);
}

/* --- F12.6 · Rodapé e atalhos de teclado: "Pausar animações" e "Ir para o conteúdo" com a mesma
   moldura (os atalhos aparecem sobre o conteúdo: base opaca, com luz). */
.site-clean.tema-escuro .vivo-pausa {
  border-color: rgba(56, 232, 255, .70) #5F7899 #5F7899;
  background: var(--luz-chip);
  box-shadow: var(--luz-halo-leve);
}
.site-clean.tema-escuro .vivo-pausa:is(:hover, :focus-visible, [aria-pressed="true"]) {
  border-color: #38E8FF rgba(56, 232, 255, .70) rgba(56, 232, 255, .55);
  background: var(--luz-chip-aceso);
  box-shadow: var(--luz-halo-leve-aceso);
}
.site-clean.tema-escuro :is(.vivo-pausa.vivo-pausa--atalho, .pular) {
  border: 1px solid;
  border-color: #38E8FF rgba(56, 232, 255, .70) rgba(56, 232, 255, .55);
  background: var(--luz-chip-aceso), #07101D;
  color: #F6F8FC;
  box-shadow: var(--luz-halo-leve-aceso);
}

/* --- F12.7 · Modos. Nada aqui anima; o calmo e o pausado não mudam a luz estática. */
@media (prefers-contrast: more) {
  .site-conectado.site-clean.tema-escuro main :is(.v-faixa, details.protecao-detalhe, details.video-transcricao, .indice-estudo ul, .pagina-fontes .m24-index, .m24--contato .m24-form, .contato-form, .blueprint-metodo__metricas, .pratica-ficha, .nr-destaques, .nr-temas__texto, .nr-oficial, .v-atalho__item, .v-card.home-protecoes, .conexoes-pagina__links > a.conexao-link, a.v-atalho) { border-color: #6F8FB0; box-shadow: none; }
  .site-clean.tema-escuro .topo { border-color: #6F8FB0; }
  .site-clean.tema-escuro .topo :is(.topo__instagram, .botao.topo__plataforma, .nav-alternar),
  .site-clean.tema-escuro .vivo-pausa { border-color: #8FA9C8; box-shadow: none; }
  .site-clean.tema-escuro .nav ul a { text-shadow: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-conectado.site-clean.tema-escuro main :is(.v-faixa, details.protecao-detalhe, details.video-transcricao, .indice-estudo ul, .pagina-fontes .m24-index, .m24--contato .m24-form, .contato-form, .blueprint-metodo__metricas, .pratica-ficha, .nr-destaques, .nr-temas__texto, .nr-oficial, .v-atalho__item, .v-card.home-protecoes, .conexoes-pagina__links > a.conexao-link, a.v-atalho) { background: var(--luz-fio), #0C192B; }
}
/* Cores forçadas (M32): o sistema pinta fundo e borda; as camadas de luz e o fio da esquerda somem. */
@media (forced-colors: active) {
  .site-conectado.site-clean.tema-escuro main :is(.v-faixa, details.protecao-detalhe, details.video-transcricao, .indice-estudo ul, .pagina-fontes .m24-index, .m24--contato .m24-form, .contato-form, .blueprint-metodo__metricas, .pratica-ficha, .nr-destaques, .nr-temas__texto, .nr-oficial, .v-atalho__item, .v-card.home-protecoes, .conexoes-pagina__links > a.conexao-link, a.v-atalho),
  .site-clean.tema-escuro:not(.home-clean) main :is(.botao--secundario, .v-cta:not(.v-cta--primaria)):not(:where(.pagina-contratacao :is(#personalizado, .pacote-cartao, .chamada-final), .pagina-contratacao :is(#personalizado, .pacote-cartao, .chamada-final) *)),
  .site-conectado.site-clean.tema-escuro main :is(.v-card__tipo, .modalidade-card__tipo, .nr-item__tipo, .v-estado):not(:where(.pagina-contratacao :is(#personalizado, .pacote-cartao, .chamada-final), .pagina-contratacao :is(#personalizado, .pacote-cartao, .chamada-final) *)),
  .site-clean.tema-escuro:not(.home-clean) main .blueprint-metodo :is(.blueprint-metodo__abas > span:not(:first-child), .selo),
  .site-clean.tema-escuro .m24 .m24-hero.produto-heroi .produto-indice a,
  .site-clean.tema-escuro .topo,
  .site-clean.tema-escuro .topo :is(.topo__instagram, .botao.topo__plataforma, .nav-alternar),
  .site-clean.tema-escuro :is(.vivo-pausa, .pular) { border-color: CanvasText; background: Canvas; box-shadow: none; }
  .site-conectado.site-clean.tema-escuro main .v-faixa::before,
  .site-clean.tema-escuro .topo::after { display: none; }
  .site-clean.tema-escuro .nav ul a { background: none; text-shadow: none; }
  .site-clean.tema-escuro .nav ul a[aria-current="page"] { box-shadow: none; }
}

/* --- F12.8 · Modos dos quadros que receberam a luz no próprio bloco (F01, F11, D2, D6) e impressão
   (EX-04: fundo branco, filete #999; a borda acesa não vai para o papel). */
@media (prefers-contrast: more) {
  .site-clean.tema-escuro:not(.home-clean) main :is(.metodo-bloco, .modalidade-heroi .v-card.modalidade-ficha),
  .site-clean.tema-escuro:not(.home-clean) main.ib-area-interna .v-grade > .v-card:first-child,
  .site-clean.tema-escuro:not(.home-clean):not(.pagina-contratacao) main .chamada-final > .env,
  .site-clean.tema-escuro:not(.home-clean).pagina-metodo :is(.v-trilha.metodo-criterio, .metodo-linhagem) { border-color: #6F8FB0; box-shadow: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-clean.tema-escuro:not(.home-clean) main :is(.metodo-bloco, .modalidade-heroi .v-card.modalidade-ficha),
  .site-clean.tema-escuro:not(.home-clean) main.ib-area-interna .v-grade > .v-card:first-child,
  .site-clean.tema-escuro:not(.home-clean):not(.pagina-contratacao) main .chamada-final > .env,
  .site-clean.tema-escuro:not(.home-clean).pagina-metodo :is(.v-trilha.metodo-criterio, .metodo-linhagem) { background: var(--luz-cantos), #0C192B; }
}
@media (forced-colors: active) {
  .site-clean.tema-escuro:not(.home-clean) main :is(.metodo-bloco, .modalidade-heroi .v-card.modalidade-ficha),
  .site-clean.tema-escuro:not(.home-clean) main.ib-area-interna .v-grade > .v-card:first-child,
  .site-clean.tema-escuro:not(.home-clean):not(.pagina-contratacao) main .chamada-final > .env,
  .site-clean.tema-escuro:not(.home-clean).pagina-metodo :is(.v-trilha.metodo-criterio, .metodo-linhagem),
  .site-clean.tema-escuro:not(.home-clean).pagina-enterprise main .blueprint-metodo__painel { border-color: CanvasText; background: Canvas; box-shadow: none; }
}
@media print {
  .site-conectado.site-clean.tema-escuro main :is(.v-faixa, details.protecao-detalhe, details.video-transcricao, .indice-estudo ul, .pagina-fontes .m24-index, .m24--contato .m24-form, .contato-form, .blueprint-metodo__metricas, .pratica-ficha, .nr-destaques, .nr-temas__texto, .nr-oficial, .v-atalho__item, .v-card.home-protecoes, .conexoes-pagina__links > a.conexao-link, a.v-atalho),
  .site-clean.tema-escuro:not(.home-clean) main :is(.metodo-bloco, .modalidade-heroi .v-card.modalidade-ficha, .botao--secundario, .v-cta, .v-card__tipo, .modalidade-card__tipo, .v-estado, table.v-tabela, table.v-tabela tr):not(:where(.pagina-contratacao :is(#personalizado, .pacote-cartao, .chamada-final), .pagina-contratacao :is(#personalizado, .pacote-cartao, .chamada-final) *)),
  .site-clean.tema-escuro:not(.home-clean):not(.pagina-contratacao) main .chamada-final > .env { border-color: #999 !important; }
}
/* ===========================================================================
   F12.9 · Pente fino (W19q, tarefa 2 de 2, 06/10/2026). O que a lista única do F12.1 não pegava,
   página por página. Os tokens novos do §A (--luz-cartao, --luz-chip-denso, --luz-campo e o
   --fx-vidro com luz no canto) já trocaram os fundos lisos em todas as folhas; aqui entram o fio de
   luz do topo, a borda acesa e o halo onde faltavam, e os quadros que eram só filete. Tudo estático.
   ========================================================================= */
/* Cartões das normas (Home, /conformidade/, /metodologia/): borda acesa, fio e halo. */
.site-conectado.site-clean.tema-escuro main .norma-cartao {
  border-color: var(--luz-borda);
  background:
    var(--luz-fio),
    radial-gradient(120% 80% at 18% 0%, rgba(11, 92, 232, .16) 0%, rgba(11, 92, 232, 0) 60%),
    var(--luz-canto),
    linear-gradient(180deg, rgba(10, 21, 38, .92) 0%, rgba(5, 11, 22, .94) 100%);
  box-shadow: var(--luz-halo);
}
.site-conectado.site-clean.tema-escuro main .norma-cartao--link:is(:hover, :focus-within) { border-color: var(--luz-borda-acesa); box-shadow: var(--luz-halo-aceso); }

/* Home · quatro dossiês: o fio de luz e a luz dos cantos por cima do desenho do D4-02 (pag-home.css). */
.site-conectado.site-clean.tema-escuro.home-clean #modalidades .v-card {
  background:
    var(--luz-fio),
    var(--luz-canto),
    radial-gradient(90% 40% at 50% 0%, rgba(47, 107, 239, .12), rgba(47, 107, 239, 0) 70%),
    linear-gradient(180deg, var(--cor-fundo-escuro-cartao, #0C192B) 0%, var(--cor-fundo-escuro-elevado, #07101D) 100%);
}
/* Home · trilha do Método em cartões: vidro com luz, borda acesa, fio e halo curto. */
.site-conectado.site-clean.tema-escuro.home-clean .home-metodo .metodo-trilha.metodo-trilha--cartoes > li {
  border-color: var(--luz-borda);
  background: var(--luz-fio), var(--luz-canto), var(--luz-vidro);
  box-shadow: var(--luz-halo-leve);
}
/* Home · chamadas secundárias (cartões dos dossiês, pé dos dossiês, Aplicações): o vidro curto do F12.2. */
.site-conectado.site-clean.tema-escuro.home-clean main .v-cta:not(.v-cta--primaria),
.site-conectado.site-clean.tema-escuro.home-clean #modalidades .v-card .v-cta {
  border-color: var(--luz-borda-controle);
  background: var(--luz-chip);
  box-shadow: var(--luz-halo-leve);
}
.site-conectado.site-clean.tema-escuro.home-clean main .v-cta:not(.v-cta--primaria):is(:hover, :focus-visible),
.site-conectado.site-clean.tema-escuro.home-clean #modalidades .v-card .v-cta:is(:hover, :focus-visible) {
  border-color: var(--luz-borda-acesa);
  background: var(--luz-chip-aceso);
  box-shadow: var(--luz-halo-leve-aceso);
}
/* Home · herói. Nota do estado (≥ 721 px; no celular continua sem caixa, E1-19) e painel da trilha
   com o fio de luz; no celular, a trilha ganha o mesmo painel (era só o divisor CEL-06). */
@media (min-width: 721px) {
  .site-conectado.site-clean.tema-escuro.home-clean .abertura--institucional .abertura__estado {
    border-color: var(--luz-borda);
    background: var(--luz-fio), var(--luz-canto), var(--luz-vidro);
    box-shadow: var(--luz-halo-leve);
  }
  .site-conectado.site-clean.tema-escuro.home-clean .abertura--institucional .abertura__contexto {
    background:
      var(--luz-fio),
      linear-gradient(118deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 26%),
      radial-gradient(80% 50% at 0% 0%, rgba(91, 140, 255, .18), rgba(91, 140, 255, 0) 70%),
      radial-gradient(70% 45% at 100% 100%, rgba(56, 232, 255, .07), rgba(56, 232, 255, 0) 70%),
      linear-gradient(180deg, rgba(14, 34, 70, .70) 0%, rgba(8, 20, 42, .74) 55%, rgba(5, 13, 28, .80) 100%);
  }
  .site-conectado.site-clean.tema-escuro.home-clean .abertura--institucional .produto-diferenciais > div { border-top-color: rgba(91, 140, 255, .24); }
}
@media (max-width: 720px) {
  /* Correção 2: no celular a trilha ganha o quadro aceso por fora (F12.10), sem folga nova. */
  .site-conectado.site-clean.tema-escuro.home-clean .abertura--institucional .produto-diferenciais > div { border-top-color: rgba(91, 140, 255, .24); }
}

/* Home · constelação (luz estática; o palco, M7, não muda): o cartão de leitura com fio e luz no
   canto, o pé (era #050B16 chapado) em vidro com o filete aceso, e os botões com o topo aceso. */
.site-conectado.site-clean.tema-escuro.home-clean .abertura--conexoes .abertura__grade > .conexao-dialog.is-inline-map {
  border-color: rgba(56, 232, 255, .50) rgba(91, 140, 255, .40) rgba(91, 140, 255, .30) rgba(91, 140, 255, .40);
  background:
    var(--luz-fio),
    var(--luz-canto),
    radial-gradient(120% 60% at 50% 0%, rgba(56, 232, 255, .05), rgba(56, 232, 255, 0) 60%),
    linear-gradient(180deg, #06182A 0%, #040F1C 38%, #040F1C 68%, #05182A 100%);
}
.site-conectado.site-clean.tema-escuro .conexao-dialog .map-footer {
  border-top: 1px solid rgba(56, 232, 255, .40);
  background:
    linear-gradient(90deg, rgba(56, 232, 255, 0), rgba(56, 232, 255, .55) 30%, rgba(234, 253, 255, .85) 50%, rgba(56, 232, 255, .55) 70%, rgba(56, 232, 255, 0)) 50% 0 / 76% 1px no-repeat,
    radial-gradient(60% 140% at 0% 0%, rgba(56, 232, 255, .08), rgba(56, 232, 255, 0) 62%) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(10, 24, 44, .92) 0%, rgba(5, 12, 23, .94) 100%);
}
.site-conectado.site-clean.tema-escuro.home-clean .abertura--conexoes .is-inline-map :is(.map-reader__questions button:not([aria-pressed="true"]), .map-footer button):where(:not(:hover):not(:focus-visible)),
.site-conectado.site-clean.tema-escuro.home-clean .abertura--conexoes .universo--abertura .universo__bottom button:not([aria-pressed="true"]):where(:not(:hover):not(:focus-visible)),
.site-conectado.site-clean.tema-escuro:not(.home-clean) .conexao-dialog:not(.is-inline-map) :is([data-map-question], [data-conexao-close], [data-map-reset], .map-tools button, .map-back, .map-clear, .map-connect:not(:disabled), .map-context .constellation-modes button):not([aria-pressed="true"]):where(:not(:hover):not(:focus-visible)) {
  border-top-color: rgba(56, 232, 255, .80);
}
/* Painel de texto ao lado do palco (diálogo das conexões nas internas): o fio de luz do topo. */
.site-conectado.site-clean.tema-escuro:not(.home-clean) .conexao-dialog:not(.is-inline-map) .map-reader { background: var(--luz-fio), var(--fx-vidro); }

/* /produto/ · os quatro dossiês: fio de luz (o filete animado do .modalidade-card__sinal continua por
   cima) e a chamada do cartão no vidro curto. */
.site-clean.tema-escuro:not(.home-clean) main .modalidade-card:not(:where(.caso-didatico *, .experiencias *)) { background: var(--luz-fio), var(--luz-canto), var(--luz-cartao); }
.site-conectado.site-clean.tema-escuro .m24 .modalidade-card__link {
  border-color: var(--luz-borda-controle);
  background: var(--luz-chip);
  box-shadow: var(--luz-halo-leve);
}
.site-conectado.site-clean.tema-escuro .m24 .modalidade-card__link:is(:hover, :focus-visible) {
  border-color: var(--luz-borda-acesa);
  background: var(--luz-chip-aceso);
  box-shadow: var(--luz-halo-leve-aceso);
}

/* Tabelas (D4): o fio de luz por cima da borda (as células do cabeçalho cobririam um fio de fundo);
   no celular, cada linha-cartão com o fio no próprio fundo. */
@media (min-width: 720px) {
  .site-clean.tema-escuro:not(.home-clean) main table.v-tabela { position: relative; }
  .site-clean.tema-escuro:not(.home-clean) main table.v-tabela::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 12%;
    width: 76%;
    height: 1px;
    background: linear-gradient(90deg, rgba(56, 232, 255, 0), rgba(56, 232, 255, .85) 30%, #EAFDFF 50%, rgba(56, 232, 255, .85) 70%, rgba(56, 232, 255, 0));
    box-shadow: 0 0 10px rgba(56, 232, 255, .55);
    pointer-events: none;
  }
}
@media (max-width: 719px) {
  .site-clean.tema-escuro:not(.home-clean) main table.v-tabela tr { background: var(--luz-fio), var(--luz-canto), var(--fx-vidro); }
}

/* /metodologia/ · referências: o fio do ::before estava oculto; vai para o fundo. */
.site-clean.tema-escuro:not(.home-clean).pagina-metodo main .metodo-referencias > .env { background: var(--luz-fio), var(--luz-canto), var(--fx-vidro); }

/* /contato/ · campo da mensagem (quadro grande): fio de luz e halo curto fora do foco (o foco é o anel). */
.site-clean.tema-escuro:not(.home-clean) .m24--contato .m24-field textarea:not([aria-invalid="true"]):not(:read-only) {
  background:
    var(--luz-fio),
    radial-gradient(70% 140% at 0% 0%, rgba(56, 232, 255, .07), rgba(56, 232, 255, 0) 70%),
    linear-gradient(180deg, rgba(10, 22, 40, .80) 0%, rgba(4, 10, 20, .86) 100%);
}
.site-clean.tema-escuro:not(.home-clean) .m24--contato .m24-field textarea:not([aria-invalid="true"]):not(:read-only):not(:focus-visible) { box-shadow: inset 0 1px 0 rgba(234, 253, 255, .06), 0 0 14px rgba(56, 232, 255, .08); }

/* /sobre/ ("Da evidência à clareza" e a lista de compromissos) e o rodapé: quadros acesos por fora
   (F12.10), sem folga nova; a divisória das linhas da lista em degradê suave. */
body.site-conectado.site-clean.tema-escuro main .sobre-conexao__lista > li { border-bottom-color: rgba(91, 140, 255, .24); }

/* Modos dos quadros do F12.9. */
@media (prefers-contrast: more) {
  .site-conectado.site-clean.tema-escuro main .norma-cartao,
  .site-conectado.site-clean.tema-escuro.home-clean .home-metodo .metodo-trilha.metodo-trilha--cartoes > li { border-color: #6F8FB0; box-shadow: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-conectado.site-clean.tema-escuro.home-clean .home-metodo .metodo-trilha.metodo-trilha--cartoes > li { background: var(--luz-fio), #0C192B; }
}
@media (forced-colors: active) {
  .site-conectado.site-clean.tema-escuro main .norma-cartao,
  .site-conectado.site-clean.tema-escuro.home-clean .home-metodo .metodo-trilha.metodo-trilha--cartoes > li,
  .site-conectado.site-clean.tema-escuro.home-clean #modalidades .v-card,
  .site-conectado.site-clean.tema-escuro.home-clean main .v-cta:not(.v-cta--primaria),
  .site-conectado.site-clean.tema-escuro.home-clean .abertura--institucional :is(.abertura__estado, .abertura__contexto),
  .site-conectado.site-clean.tema-escuro.home-clean .abertura--conexoes .abertura__grade > .conexao-dialog.is-inline-map,
  .site-conectado.site-clean.tema-escuro .conexao-dialog .map-footer,
  .site-conectado.site-clean.tema-escuro .m24 .modalidade-card__link,
  html.tem-fundo-espaco body.site-conectado.site-clean.tema-escuro main .sobre-assinatura,
  body.site-conectado.site-clean.tema-escuro main :is(.sobre-assinatura, .sobre-conexao__lista),
  html.tem-fundo-espaco body.site-conectado.site-clean.tema-escuro .rodape__grade,
  body.site-conectado.site-clean.tema-escuro .rodape__grade { border-color: CanvasText; background: Canvas; box-shadow: none; }
  .site-clean.tema-escuro:not(.home-clean) main table.v-tabela::before { display: none; }
}
@media print {
  .site-conectado.site-clean.tema-escuro main .norma-cartao { border-color: #999 !important; background: none !important; box-shadow: none !important; }
  .site-clean.tema-escuro:not(.home-clean) main table.v-tabela::before { display: none; }
}
/* /fontes/ · índice 01–04: a moldura inteira acesa (a lateral direita, mais apagada, parecia cortada
   em tela larga; medido a 1440, 1920 e 2560 com barra de rolagem real: nada passa da tela). */
body.site-conectado.site-clean.tema-escuro.pagina-fontes main .m24-index {
  border-color: rgba(56, 232, 255, .70) rgba(56, 232, 255, .52) rgba(91, 140, 255, .48) rgba(56, 232, 255, .52);
  box-shadow: var(--luz-halo), 0 0 0 1px rgba(56, 232, 255, .08);
}
@media (prefers-contrast: more) {
  body.site-conectado.site-clean.tema-escuro.pagina-fontes main .m24-index { border-color: #6F8FB0; box-shadow: none; }
}
/* Correção 2: a luz acompanha as células 01–04 (antes ficava só no canto esquerdo da faixa e as
   células 02–04 pareciam azul-marinho liso). A faixa fica com o vidro, o fio e a luz dos cantos; cada
   célula ganha o próprio fio de luz no topo e a luz no canto. Estático; o hover, o foco e a página atual
   (F12.3) continuam por cima. Só fundo: nenhuma medida muda. */
body.site-conectado.site-clean.tema-escuro.pagina-fontes main .m24-index { background: var(--luz-fundo); }
body.site-conectado.site-clean.tema-escuro.pagina-fontes main .m24-index a:not(:hover):not(:focus-visible):not([aria-current="location"]) {
  background:
    linear-gradient(90deg, rgba(56, 232, 255, 0), rgba(56, 232, 255, .70) 30%, #EAFDFF 50%, rgba(56, 232, 255, .70) 70%, rgba(56, 232, 255, 0)) 50% 0 / 70% 1px no-repeat,
    radial-gradient(50% 100% at 50% 0%, rgba(56, 232, 255, .16), rgba(56, 232, 255, 0)) 50% 0 / 70% 14px no-repeat,
    radial-gradient(70% 120% at 0% 0%, rgba(56, 232, 255, .10), rgba(56, 232, 255, 0) 70%),
    radial-gradient(60% 110% at 100% 100%, rgba(11, 92, 232, .14), rgba(11, 92, 232, 0) 70%);
}
@media (prefers-reduced-transparency: reduce) {
  body.site-conectado.site-clean.tema-escuro.pagina-fontes main .m24-index { background: #0C192B; }
}
@media (forced-colors: active) {
  body.site-conectado.site-clean.tema-escuro.pagina-fontes main .m24-index { border-color: CanvasText; box-shadow: none; }
  body.site-conectado.site-clean.tema-escuro.pagina-fontes main .m24-index a { background: none; }
}

/* ===========================================================================
   F12.10 · Moldura por fora (W19q, correção 2, 06/10/2026). A ordem é luz em todos os quadros SEM
   mudar texto nem layout. Nos quadros que eram só um filete (rodapé, /sobre/, colunas das Aplicações
   da Home, trilha da abertura no celular, regras da /contratacao/; a "Leitura do percurso" de
   /experiencias/ fica em p6-caso.css) e nos avisos que no celular não tinham caixa ("Situação atual"
   de /produto/ e /contratacao/, nota do estado da Home), a moldura acesa é um pseudo-elemento por
   trás do conteúdo (z-index -1 num elemento isolado), estendido para fora pelo --mx-*: a folga, a
   grade e o texto ficam exatamente onde estavam na base c8b0033. As divisórias antigas ficam com a
   mesma espessura e cor transparente (a moldura passa por cima delas). Luz estática (M42).
   --mx-t / --mx-b: topo e base (negativo = para fora); --mx-x: lados (sempre para fora).
   ========================================================================= */
html body.site-conectado.site-clean.tema-escuro .rodape__grade,
html body.site-conectado.site-clean.tema-escuro main .sobre-assinatura,
html body.site-conectado.site-clean.tema-escuro main .sobre-conexao__lista,
html body.site-conectado.site-clean.tema-escuro main .home-aplicacoes-grade > .home-aplicacao,
html body.site-conectado.site-clean.tema-escuro main .produto-regras__lista.contratacao-regras > div {
  position: relative;
  isolation: isolate;
  border-color: transparent;
  border-image: none;
  background: none;
  box-shadow: none;
}
html body.site-conectado.site-clean.tema-escuro .rodape__grade { --mx-t: calc(-1 * clamp(1rem, 2.4vw, 1.75rem)); --mx-x: clamp(.75rem, 2.4vw, 2rem); --mx-b: 0px; --mx-raio: 18px; }
html body.site-conectado.site-clean.tema-escuro main .sobre-assinatura { --mx-t: calc(-1 * clamp(1.25rem, 3vw, 2.25rem)); --mx-x: clamp(.75rem, 2.5vw, 2.25rem); --mx-b: clamp(1rem, 2.5vw, 2.25rem); --mx-raio: 18px; }
html body.site-conectado.site-clean.tema-escuro main .sobre-conexao__lista { --mx-t: -.5rem; --mx-x: .875rem; --mx-b: -.5rem; --mx-raio: 14px; }
html body.site-conectado.site-clean.tema-escuro main .home-aplicacoes-grade > .home-aplicacao { --mx-t: .5rem; --mx-x: .75rem; --mx-b: .5rem; --mx-raio: 18px; }
html body.site-conectado.site-clean.tema-escuro main .produto-regras__lista.contratacao-regras > div { --mx-t: 5px; --mx-x: clamp(.75rem, 1.2vw, .875rem); --mx-b: -3px; --mx-raio: 14px; }
@media (min-width: 720px) and (max-width: 1023px) {
  html body.site-conectado.site-clean.tema-escuro main .home-aplicacoes-grade > .home-aplicacao { --mx-x: 1rem; }
}
@media (min-width: 1024px) {
  html body.site-conectado.site-clean.tema-escuro main .home-aplicacoes-grade > .home-aplicacao { --mx-t: .75rem; --mx-x: calc(var(--home-apl-vao, 4rem) / 2 - .5rem); --mx-b: calc(-1 * clamp(1rem, 2vw, 1.5rem)); }
}
/* A grade das Aplicações perde só a cor do filete de cima (a espessura fica). */
html body.site-conectado.site-clean.tema-escuro main .home-aplicacoes-grade { border-top-color: transparent; border-image: none; }
/* Celular: a trilha da abertura da Home, a nota do estado (Home) e o "Situação atual" (/produto/ e
   /contratacao/) ganham a moldura por fora; no desktop eles já são caixa (F12.1 e F12.9). */
@media (max-width: 720px) {
  html body.site-conectado.site-clean.tema-escuro.home-clean .abertura--institucional :is(.abertura__contexto, .abertura__estado) { position: relative; isolation: isolate; }
  html body.site-conectado.site-clean.tema-escuro.home-clean .abertura--institucional .abertura__contexto { --mx-t: 0px; --mx-x: .75rem; --mx-b: -1rem; --mx-raio: 16px; }
  html body.site-conectado.site-clean.tema-escuro.home-clean .abertura--institucional .abertura__estado { --mx-t: -.5rem; --mx-x: .75rem; --mx-b: -.625rem; --mx-raio: 14px; }
}
@media (max-width: 480px) {
  html body.site-conectado.site-clean.tema-escuro main .produto-heroi .v-faixa.produto-estado { isolation: isolate; --mx-t: -.75rem; --mx-x: .75rem; --mx-b: -.75rem; --mx-raio: 14px; }
}
/* A moldura: ::before onde ele está livre; ::after onde o ::before já desenha algo (traço de acento
   das Aplicações, fio da esquerda do aviso). */
html body.site-conectado.site-clean.tema-escuro .rodape__grade::before,
html body.site-conectado.site-clean.tema-escuro main .sobre-assinatura::before,
html body.site-conectado.site-clean.tema-escuro main .sobre-conexao__lista::before,
html body.site-conectado.site-clean.tema-escuro main .home-aplicacoes-grade > .home-aplicacao::after,
html body.site-conectado.site-clean.tema-escuro main .produto-regras__lista.contratacao-regras > div::before {
  content: "";
  display: block;
  position: absolute;
  inset: var(--mx-t) calc(-1 * var(--mx-x)) var(--mx-b) calc(-1 * var(--mx-x));
  z-index: -1;
  width: auto;
  height: auto;
  box-sizing: border-box;
  border: 1px solid;
  border-color: var(--luz-borda);
  border-radius: var(--mx-raio);
  background: var(--luz-fundo);
  box-shadow: var(--luz-halo-leve);
  pointer-events: none;
}
@media (max-width: 720px) {
  html body.site-conectado.site-clean.tema-escuro.home-clean .abertura--institucional :is(.abertura__contexto, .abertura__estado)::before {
    content: "";
    display: block;
    position: absolute;
    inset: var(--mx-t) calc(-1 * var(--mx-x)) var(--mx-b) calc(-1 * var(--mx-x));
    z-index: -1;
    width: auto;
    height: auto;
    box-sizing: border-box;
    border: 1px solid;
    border-color: var(--luz-borda);
    border-radius: var(--mx-raio);
    background: var(--luz-fundo);
    box-shadow: var(--luz-halo-leve);
    pointer-events: none;
  }
}
@media (max-width: 480px) {
  html body.site-conectado.site-clean.tema-escuro main .produto-heroi .v-faixa.produto-estado::after {
    content: "";
    display: block;
    position: absolute;
    inset: var(--mx-t) calc(-1 * var(--mx-x)) var(--mx-b) calc(-1 * var(--mx-x));
    z-index: -1;
    box-sizing: border-box;
    border: 1px solid;
    border-color: var(--luz-borda);
    border-radius: var(--mx-raio);
    background: var(--luz-fundo);
    box-shadow: var(--luz-halo-leve);
    pointer-events: none;
  }
}
/* Os quadros grandes (assinatura do /sobre/, rodapé) com o halo inteiro; a assinatura com as cantoneiras. */
html body.site-conectado.site-clean.tema-escuro main .sobre-assinatura::before { background: var(--luz-cantos), var(--luz-fundo); box-shadow: var(--luz-halo); }
html body.site-conectado.site-clean.tema-escuro .rodape__grade::before { box-shadow: var(--luz-halo); }
/* Traços de acento: na borda da moldura, longe do canto. */
html body.site-conectado.site-clean.tema-escuro main .sobre-assinatura::after { bottom: calc(var(--mx-b) - 1px); left: calc(24px - var(--mx-x)); }
html body.site-conectado.site-clean.tema-escuro main .home-aplicacoes-grade > .home-aplicacao::before { top: calc(var(--mx-t) - 1px); left: calc(20px - var(--mx-x)); }
/* W19q r3: o cometa das Aplicações (o vs-filete--linha que o vivo-sinais.js põe em cada coluna) corria
   sobre o filete antigo da grade, que ficou transparente: passava no vão acima da moldura. Ele vai
   para a borda de cima da moldura (a linha de 2 px do cometa fica a 4 px do topo do nó), recuado o raio
   (18 px) dos dois lados para não sair da curva; vale também para o traço parado (pausado) e a linha
   acesa do hover, que são do mesmo nó. */
html body.site-conectado.site-clean.tema-escuro main .home-aplicacoes-grade > .home-aplicacao > vs-filete.vs-filete--linha {
  top: calc(var(--mx-t) - 5px);
  right: calc(18px - var(--mx-x));
  left: calc(18px - var(--mx-x));
}
/* Modos. Contraste: borda sólida da moldura, sem halo. Transparência reduzida: fundo fechado.
   Cores forçadas e impressão: a moldura some e voltam as divisórias da base (cor do sistema). */
@media (prefers-contrast: more) {
  html body.site-conectado.site-clean.tema-escuro :is(.rodape__grade, main .sobre-assinatura, main .sobre-conexao__lista, main .produto-regras__lista.contratacao-regras > div)::before,
  html body.site-conectado.site-clean.tema-escuro main .home-aplicacoes-grade > .home-aplicacao::after,
  html body.site-conectado.site-clean.tema-escuro.home-clean .abertura--institucional :is(.abertura__contexto, .abertura__estado)::before,
  html body.site-conectado.site-clean.tema-escuro main .produto-heroi .v-faixa.produto-estado::after { border-color: #6F8FB0; box-shadow: none; }
}
@media (prefers-reduced-transparency: reduce) {
  html body.site-conectado.site-clean.tema-escuro :is(.rodape__grade, main .sobre-assinatura, main .sobre-conexao__lista, main .produto-regras__lista.contratacao-regras > div)::before,
  html body.site-conectado.site-clean.tema-escuro main .home-aplicacoes-grade > .home-aplicacao::after,
  html body.site-conectado.site-clean.tema-escuro.home-clean .abertura--institucional :is(.abertura__contexto, .abertura__estado)::before,
  html body.site-conectado.site-clean.tema-escuro main .produto-heroi .v-faixa.produto-estado::after { background: var(--luz-fio), #0C192B; }
}
@media (forced-colors: active) {
  html body.site-conectado.site-clean.tema-escuro :is(.rodape__grade, main .sobre-assinatura, main .sobre-conexao__lista, main .produto-regras__lista.contratacao-regras > div)::before,
  html body.site-conectado.site-clean.tema-escuro main .home-aplicacoes-grade > .home-aplicacao::after,
  html body.site-conectado.site-clean.tema-escuro.home-clean .abertura--institucional :is(.abertura__contexto, .abertura__estado)::before,
  html body.site-conectado.site-clean.tema-escuro main .produto-heroi .v-faixa.produto-estado::after { display: none; }
  html body.site-conectado.site-clean.tema-escuro :is(.rodape__grade, main .sobre-assinatura, main .sobre-conexao__lista, main .home-aplicacoes-grade, main .home-aplicacoes-grade > .home-aplicacao, main .produto-regras__lista.contratacao-regras > div) { border-color: CanvasText; }
}
@media print {
  html body.site-conectado.site-clean.tema-escuro :is(.rodape__grade, main .sobre-assinatura, main .sobre-conexao__lista, main .produto-regras__lista.contratacao-regras > div)::before,
  html body.site-conectado.site-clean.tema-escuro main .home-aplicacoes-grade > .home-aplicacao::after,
  html body.site-conectado.site-clean.tema-escuro.home-clean .abertura--institucional :is(.abertura__contexto, .abertura__estado)::before,
  html body.site-conectado.site-clean.tema-escuro main .produto-heroi .v-faixa.produto-estado::after { display: none !important; }
  html body.site-conectado.site-clean.tema-escuro :is(.rodape__grade, main .sobre-assinatura, main .sobre-conexao__lista, main .home-aplicacoes-grade, main .home-aplicacoes-grade > .home-aplicacao, main .produto-regras__lista.contratacao-regras > div) { border-color: #999 !important; }
}

/* --- F12.11 · Correção 2: ajustes pontuais. */
/* Home · "Ver as formas de contratação" (seção Próximo passo): o mesmo botão aceso das internas (D0),
   degradê cobalto → ciano com borda acesa e brilho; era o azul chapado de componentes.css. */
.site-conectado.site-clean.tema-escuro.home-clean main .v-cta.v-cta--primaria:not(:where(.universo *)),
.site-conectado.site-clean.tema-escuro.home-clean main .v-cta.v-cta--primaria:not(:where(.universo *)):is(:hover, :active) {
  border: 1px solid transparent;
  background:
    linear-gradient(100deg, #0746C8 0%, #0B5CE8 40%, #0A7F95 100%) padding-box,
    linear-gradient(100deg, var(--fx-cobalto-claro, #5B8CFF), var(--fx-ciano, #38E8FF)) border-box;
  color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 0 26px rgba(11, 92, 232, .50), 18px 0 34px -14px rgba(56, 232, 255, .45);
}
.site-conectado.site-clean.tema-escuro.home-clean main .v-cta.v-cta--primaria:not(:where(.universo *)):focus-visible {
  outline: 2px solid transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 0 0 5px var(--fx-ciano, #38E8FF);
}
@media (forced-colors: active) {
  .site-conectado.site-clean.tema-escuro.home-clean main .v-cta.v-cta--primaria:not(:where(.universo *)) { border-color: ButtonText; background: ButtonFace; box-shadow: none; }
}
@media print {
  .site-conectado.site-clean.tema-escuro.home-clean main .v-cta.v-cta--primaria { border-color: #999 !important; background: none !important; box-shadow: none !important; }
}
/* Atalho "Comparar os quatro dossiês": as barras ficaram mais altas (6 px) para o fluxo se ver; a
   margem negativa devolve ao item a altura da base (4 px), sem mexer no layout. */
.site-clean.tema-escuro:not(.home-clean) main .v-atalho .v-medidor--mini { margin-block: -1px; }
/* "Ir para o conteúdo": a moldura de 1 px (F12.6) sai da folga, e o atalho fica com a medida da base. */
.site-clean.tema-escuro .pular { padding: calc(var(--esp-3) - 1px) calc(var(--esp-4) - 1px); }
/* Contato · campos de uma linha: o fio de luz do topo (a mensagem já tinha) e a luz do canto. */
.site-clean.tema-escuro:not(.home-clean) .m24--contato .m24-field input:not([aria-invalid="true"]):not(:read-only) {
  background:
    linear-gradient(90deg, rgba(56, 232, 255, 0), rgba(56, 232, 255, .70) 30%, #EAFDFF 50%, rgba(56, 232, 255, .70) 70%, rgba(56, 232, 255, 0)) 50% 0 / 76% 1px no-repeat,
    radial-gradient(70% 140% at 0% 0%, rgba(56, 232, 255, .09), rgba(56, 232, 255, 0) 70%),
    linear-gradient(180deg, rgba(10, 22, 40, .80) 0%, rgba(4, 10, 20, .86) 100%);
}
.site-clean.tema-escuro:not(.home-clean) .m24--contato .m24-field input:not([aria-invalid="true"]):not(:read-only):not(:focus-visible) { box-shadow: inset 0 1px 0 rgba(234, 253, 255, .06), 0 0 12px rgba(56, 232, 255, .07); }
@media (forced-colors: active) {
  .site-clean.tema-escuro:not(.home-clean) .m24--contato .m24-field :is(input, textarea) { background: Field; box-shadow: none; }
  /* Cores forçadas: os pseudos com degradê (o fio de luz dos cartões, o filete do sobretítulo, a
     trilha do botão do assistente) somem; fica a borda do sistema. */
  .site-clean.tema-escuro:not(.home-clean) main :is(.v-card, .modalidade-card):not(:where(.pagina-contratacao :is(#personalizado, .pacote-cartao, .chamada-final), .pagina-contratacao :is(#personalizado, .pacote-cartao, .chamada-final) *))::before,
  .site-clean.tema-escuro:not(.home-clean) main .heroi--pagina :is(.env, .modalidade-heroi__texto) > .versalete::before,
  .videre-assistant-launcher .va-trilha::before { display: none; }
}
/* ===========================================================================
   F12.12 · Correção 3 (W19q r3, 06/10/2026): achados da verificação r2. Só fundo, borda, pseudo e
   posição de camada decorativa: nenhuma folga nova, o texto e a grade ficam onde estavam (c8b0033).
   ========================================================================= */
/* Holofote do hover (vs-brilho) das colunas abertas da Home e das regras da /contratacao/: a mesma
   caixa da moldura por fora (F12.10), não a geometria da coluna aberta da base. */
html body.site-conectado.site-clean.tema-escuro main .home-aplicacoes-grade > .home-aplicacao.vs-cartao--aberto > vs-brilho,
html body.site-conectado.site-clean.tema-escuro main .produto-regras__lista.contratacao-regras > div.vs-cartao--aberto > vs-brilho {
  inset: var(--mx-t) calc(-1 * var(--mx-x)) var(--mx-b) calc(-1 * var(--mx-x)) !important;
  border-radius: var(--mx-raio);
}
/* /contratacao/ · regras empilhadas (abaixo de 1280 px): a moldura sobe 2 px e a base entra 6 px, e as
   quatro caixas ficam com 9 px entre si (eram 2 px, borda dupla); o texto fica a ~14 px da borda em
   cima e embaixo (padding da base: 17,6 e 20 px). */
@media (max-width: 1279px) {
  html body.site-conectado.site-clean.tema-escuro main .produto-regras__lista.contratacao-regras > div { --mx-t: 3px; --mx-b: 6px; }
}
/* Celular: a moldura por fora sai a 10 px da borda da tela (era 6 px), mais perto dos cartões comuns
   (18 px); o texto fica 8 px para dentro da moldura. */
@media (max-width: 480px) {
  html body.site-conectado.site-clean.tema-escuro .rodape__grade,
  html body.site-conectado.site-clean.tema-escuro main .sobre-assinatura,
  html body.site-conectado.site-clean.tema-escuro main .sobre-conexao__lista,
  html body.site-conectado.site-clean.tema-escuro main .home-aplicacoes-grade > .home-aplicacao,
  html body.site-conectado.site-clean.tema-escuro main .produto-regras__lista.contratacao-regras > div,
  html body.site-conectado.site-clean.tema-escuro main .produto-heroi .v-faixa.produto-estado,
  html body.site-conectado.site-clean.tema-escuro.home-clean .abertura--institucional .abertura__contexto,
  html body.site-conectado.site-clean.tema-escuro.home-clean .abertura--institucional .abertura__estado { --mx-x: 8px; }
}
/* A assinatura do /sobre/ no celular: com a moldura mais perto do texto, as cantoneiras F11 (a 10 px)
   encostavam no "D" de "Da evidência"; aqui elas ficam a 6 px da borda (barras de 14 px) e o raio
   cai para 12 px, para o canto do L ficar dentro da curva. */
@media (max-width: 480px) {
  html body.site-conectado.site-clean.tema-escuro main .sobre-assinatura { --mx-raio: 12px; }
  html body.site-conectado.site-clean.tema-escuro main .sobre-assinatura::before {
    background:
      linear-gradient(#38E8FF, #38E8FF) 6px 6px / 14px 2px no-repeat,
      linear-gradient(#38E8FF, #38E8FF) 6px 6px / 2px 14px no-repeat,
      linear-gradient(#38E8FF, #38E8FF) calc(100% - 6px) 6px / 14px 2px no-repeat,
      linear-gradient(#38E8FF, #38E8FF) calc(100% - 6px) 6px / 2px 14px no-repeat,
      linear-gradient(#38E8FF, #38E8FF) 6px calc(100% - 6px) / 14px 2px no-repeat,
      linear-gradient(#38E8FF, #38E8FF) 6px calc(100% - 6px) / 2px 14px no-repeat,
      linear-gradient(#38E8FF, #38E8FF) calc(100% - 6px) calc(100% - 6px) / 14px 2px no-repeat,
      linear-gradient(#38E8FF, #38E8FF) calc(100% - 6px) calc(100% - 6px) / 2px 14px no-repeat,
      var(--luz-fundo);
  }
}
/* Cantoneiras F11 nos painéis grandes que não tinham: o cartão 02 de /area-interna/ (par do 01, D2), o
   painel "03 · Rastreabilidade" de /conformidade/, as referências de /metodologia/, a ficha de
   /experiencias/ e o rodapé (este só a partir de 721 px: no celular a moldura fica a 8 px do texto). */
.site-clean.tema-escuro:not(.home-clean) main.ib-area-interna .v-grade > .v-card:nth-child(2) {
  border: 1px solid;
  border-color: var(--luz-borda);
  border-radius: 18px;
  background: var(--luz-cantos), var(--luz-fio), var(--luz-canto), var(--fx-vidro);
  box-shadow: var(--luz-halo);
}
html body.site-conectado.site-clean.tema-escuro main .v-card.ib-conexao { background: var(--luz-cantos), var(--luz-canto), var(--luz-cartao); }
html body.site-conectado.site-clean.tema-escuro.pagina-metodo main .metodo-referencias > .env { background: var(--luz-cantos), var(--luz-fio), var(--luz-canto), var(--fx-vidro); }
html body.site-conectado.site-clean.tema-escuro main .pratica-ficha { background: var(--luz-cantos), var(--luz-fundo); }
@media (min-width: 721px) {
  html body.site-conectado.site-clean.tema-escuro .rodape__grade::before { background: var(--luz-cantos), var(--luz-fundo); }
}
/* /enterprise/ empilhado (≤ 720 px): o subpainel opaco vai até o pé da janela e cobria a cantoneira de
   baixo à esquerda; ele a redesenha no mesmo ponto (já redesenhava a da direita). */
@media (max-width: 720px) {
  .site-clean.tema-escuro:not(.home-clean).pagina-enterprise main .blueprint-metodo__painel {
    background:
      var(--fx-canto), var(--fx-canto), var(--fx-canto-luz), var(--fx-canto-luz),
      var(--fx-canto), var(--fx-canto), var(--fx-canto-luz), var(--fx-canto-luz),
      radial-gradient(60% 80% at 0% 0%, rgba(56, 232, 255, .08), rgba(56, 232, 255, 0) 65%),
      linear-gradient(160deg, rgba(13, 28, 50, .90) 0%, rgba(6, 13, 25, .94) 100%);
    background-position:
      calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) calc(100% - 8px),
      10px calc(100% - 10px), 10px calc(100% - 10px), 8px calc(100% - 8px), 8px calc(100% - 8px),
      0 0, 0 0;
    background-size: 18px 2px, 2px 18px, 22px 6px, 6px 22px, 18px 2px, 2px 18px, 22px 6px, 6px 22px, auto, auto;
    background-repeat: no-repeat;
  }
}
/* /fontes/ · índice 01–04: cada célula com o vidro aceso de cima (as 02–04 pareciam azul-marinho de
   uma cor só), o fio mais vivo com a luz embaixo dele e a luz dos dois cantos. */
body.site-conectado.site-clean.tema-escuro.pagina-fontes main .m24-index a:not(:hover):not(:focus-visible):not([aria-current="location"]) {
  background:
    linear-gradient(90deg, rgba(56, 232, 255, 0), rgba(56, 232, 255, .85) 30%, #EAFDFF 50%, rgba(56, 232, 255, .85) 70%, rgba(56, 232, 255, 0)) 50% 0 / 76% 1px no-repeat,
    radial-gradient(50% 100% at 50% 0%, rgba(56, 232, 255, .26), rgba(56, 232, 255, 0)) 50% 0 / 76% 20px no-repeat,
    radial-gradient(70% 130% at 0% 0%, rgba(56, 232, 255, .16), rgba(56, 232, 255, 0) 70%),
    radial-gradient(60% 120% at 100% 100%, rgba(11, 92, 232, .22), rgba(11, 92, 232, 0) 70%),
    linear-gradient(180deg, rgba(30, 72, 124, .34) 0%, rgba(12, 28, 52, .10) 60%, rgba(8, 18, 34, 0) 100%);
}
/* /contato/ · campos: o fio do topo mais vivo, com a luz embaixo dele, e o vidro mais claro em cima
   (de longe pareciam escuros e lisos). O texto digitado continua sobre fundo escuro. */
.site-clean.tema-escuro:not(.home-clean) .m24--contato .m24-field :is(input, textarea):not([aria-invalid="true"]):not(:read-only) {
  background:
    linear-gradient(90deg, rgba(56, 232, 255, 0), rgba(56, 232, 255, .90) 30%, #EAFDFF 50%, rgba(56, 232, 255, .90) 70%, rgba(56, 232, 255, 0)) 50% 0 / 80% 1px no-repeat,
    radial-gradient(50% 100% at 50% 0%, rgba(56, 232, 255, .24), rgba(56, 232, 255, 0)) 50% 0 / 80% 16px no-repeat,
    radial-gradient(70% 140% at 0% 0%, rgba(56, 232, 255, .14), rgba(56, 232, 255, 0) 70%) 0 0 / 100% 100% no-repeat,
    radial-gradient(50% 120% at 100% 100%, rgba(11, 92, 232, .14), rgba(11, 92, 232, 0) 70%) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(18, 40, 70, .82) 0%, rgba(6, 14, 27, .86) 100%);
}
.site-clean.tema-escuro:not(.home-clean) .m24--contato .m24-field :is(input, textarea):not([aria-invalid="true"]):not(:read-only):not(:focus-visible) { box-shadow: inset 0 1px 0 rgba(234, 253, 255, .10), 0 0 0 1px rgba(56, 232, 255, .05), 0 0 16px rgba(56, 232, 255, .12); }
/* Menu principal: o hover e o foco com o mesmo brilho do item ativo (era só o texto claro e uma luz de
   .2), luz de vidro de cima e o sublinhado aceso. Só fundo, sombra e raio: a medida não muda. */
.site-clean.tema-escuro .nav ul a:is(:hover, :focus-visible) {
  border-radius: 8px 8px 0 0;
  background:
    radial-gradient(80% 90% at 50% 100%, rgba(56, 232, 255, .34), rgba(56, 232, 255, 0) 75%),
    linear-gradient(180deg, rgba(91, 140, 255, .10), rgba(91, 140, 255, 0) 70%);
  box-shadow: 0 6px 12px -6px rgba(56, 232, 255, .95), inset 0 -1px 0 rgba(234, 253, 255, .35);
  text-shadow: 0 0 16px rgba(56, 232, 255, .75);
}
.site-clean.tema-escuro .nav ul a[aria-current="page"] { border-radius: 8px 8px 0 0; }
/* Modos. Contraste e transparência reduzida: os quadros novos seguem as regras do F12.7/F12.8. */
@media (prefers-contrast: more) {
  .site-clean.tema-escuro:not(.home-clean) main.ib-area-interna .v-grade > .v-card:nth-child(2) { border-color: #6F8FB0; box-shadow: none; }
  .site-clean.tema-escuro .nav ul a:is(:hover, :focus-visible) { text-shadow: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-clean.tema-escuro:not(.home-clean) main.ib-area-interna .v-grade > .v-card:nth-child(2) { background: var(--luz-cantos), #0C192B; }
  html body.site-conectado.site-clean.tema-escuro main .v-card.ib-conexao,
  html body.site-conectado.site-clean.tema-escuro.pagina-metodo main .metodo-referencias > .env,
  html body.site-conectado.site-clean.tema-escuro main .pratica-ficha { background: var(--luz-cantos), #0C192B; }
  html body.site-conectado.site-clean.tema-escuro main .sobre-assinatura::before { background: var(--luz-fio), #0C192B; }
}
/* Cores forçadas: os pseudos decorativos com degradê ou brilho que ainda apareciam (ponto do
   sobretítulo, filete do meta, trilha dos tokens) somem; fica a borda do sistema. */
@media (forced-colors: active) {
  .site-clean.tema-escuro:not(.home-clean) main.ib-area-interna .v-grade > .v-card:nth-child(2),
  html body.site-conectado.site-clean.tema-escuro main .v-card.ib-conexao,
  html body.site-conectado.site-clean.tema-escuro.pagina-metodo main .metodo-referencias > .env,
  html body.site-conectado.site-clean.tema-escuro main .pratica-ficha,
  .site-clean.tema-escuro:not(.home-clean).pagina-enterprise main .blueprint-metodo__painel { border-color: CanvasText; background: Canvas; box-shadow: none; }
  .site-clean.tema-escuro:not(.home-clean) .m24--contato .m24-field :is(input, textarea) { background: Field; box-shadow: none; }
  body.site-conectado.site-clean.tema-escuro.pagina-fontes main .m24-index a { background: none; }
  html body.site-clean.tema-escuro main :is(span.v-rotulo, span.m24-meta, span.versalete)::before,
  html body.site-clean.tema-escuro main #tokens li::after { display: none !important; }
  .site-clean.tema-escuro .nav ul a:is(:hover, :focus-visible) { background: none; box-shadow: none; text-shadow: none; }
}
@media print {
  .site-clean.tema-escuro:not(.home-clean) main.ib-area-interna .v-grade > .v-card:nth-child(2),
  html body.site-conectado.site-clean.tema-escuro main .v-card.ib-conexao,
  html body.site-conectado.site-clean.tema-escuro.pagina-metodo main .metodo-referencias > .env,
  html body.site-conectado.site-clean.tema-escuro main .pratica-ficha { border-color: #999 !important; background: none !important; box-shadow: none !important; }
}
/* ==========================================================================================
   F12.13 · Correção 4 (W19q r4, 06/10/2026): achados da verificação r3. Só fundo, borda, cor e
   pseudo; nenhuma folga ou medida nova (alturas iguais a c8b0033).
   ========================================================================================== */
/* (1) Marcador "Esta página" do comparador dos dossiês (/produto/analise-ia/ e /consultor-humano/):
   era só um tracejado sem fundo. Vira quadro aceso (vidro curto com luz no canto, fio no topo,
   borda acesa e halo leve); o tracejado continua, para não parecer botão. Mesma borda de 1 px. */
.site-clean.tema-escuro:not(.home-clean) main .v-comparador > .v-card--atual:not(:has(> .v-cta))::after {
  border-color: rgba(56, 232, 255, .80) rgba(91, 140, 255, .62) rgba(91, 140, 255, .45) rgba(91, 140, 255, .62);
  background: var(--luz-fio), var(--luz-chip-aceso);
  box-shadow: var(--luz-halo-leve);
}
/* (2) Fios retos de 3 px no topo de quadros com raio 18 (formulário do /contato/, linhagem de
   /metodologia/, o filete do cartão das proteções da Home e o sinal dos cartões de /produto/): passavam por fora da curva dos dois cantos.
   Agora ficam na parte reta da borda de cima, recuados raio + 2 px da borda de fora (como o
   --vs-recuo do F12.12), sem raio próprio e com as pontas esmaecidas. */
.site-clean .m24--contato form.m24-form::before {
  right: 19px;
  left: 19px;
  border-radius: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.site-clean.pagina-metodo dl.metodo-linhagem::before,
.site-clean.home-clean main .v-card::before,
.site-clean .m24 .modalidade-card > .modalidade-card__sinal {
  right: 19px;
  left: 19px;
  border-radius: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
/* (3) Rótulos da linhagem de /metodologia/ (Rota de construção, Resultado da análise, Origem da
   regra, Autoridade normativa): o cinza do tema claro (#53637B) ficava a 2,3–3,1:1 sobre o vidro
   escuro. No escuro, o cinza claro dos rótulos passa de 4,5:1 no pior ponto da luz do canto. */
.site-clean.tema-escuro:not(.home-clean).pagina-metodo .metodo-linhagem dt { color: #B9C8DD; }
/* (4) Cantoneiras F11 também na ficha "O método em prática" de /metodologia/ (painel grande de largura
   inteira; os vizinhos "Referências" e "Que decisão…" já têm). Só a camada das cantoneiras por cima do
   fundo que ela já tinha (luz do canto e vidro do cartão). */
html body.site-conectado.site-clean.tema-escuro.pagina-metodo main .v-card.metodo-pratica__cartao { background: var(--luz-cantos), var(--luz-canto), var(--luz-cartao); }
/* (5) /fontes/ · faixa 01–04: a luz do canto da faixa ficava só atrás da célula 01, que parecia mais
   clara que as outras três. A faixa troca a luz do canto por uma luz larga de cima, igual sobre as
   quatro células (cada célula continua com o próprio fio e a própria luz no canto). */
body.site-conectado.site-clean.tema-escuro.pagina-fontes main .m24-index {
  background:
    var(--luz-fio),
    radial-gradient(120% 170% at 50% 0%, rgba(56, 232, 255, .08), rgba(56, 232, 255, 0) 70%) 0 0 / 100% 100% no-repeat,
    radial-gradient(120% 140% at 50% 100%, rgba(11, 92, 232, .10), rgba(11, 92, 232, 0) 70%) 0 0 / 100% 100% no-repeat,
    var(--luz-vidro);
}
/* (6) Rótulos pequenos em cinza (#93A7C2, --v-campo) que ficam em cima da luz do canto dos cartões e das
   tabelas-cartão: a luz nova os deixou abaixo de 4,5:1 no pior ponto (medido com o fundo fotografado
   sem texto: "Como você paga" e "Âncora" em /contratacao/, "Dossiê"/"Inclui" no cabeçalho das tabelas
   de /contratacao/ e /relatorio/, "Profundidade" em /produto/). No escuro passam ao cinza claro dos
   rótulos da linhagem (#B9C8DD). Só a cor; fora das raias W19o/W19p e do caso de /experiencias/. */
.site-clean.tema-escuro:not(.home-clean) main :is(.v-card__rotulo, .v-card__linhas dt, .modalidade-card__rotulo, .v-tabela thead th):not(:where(.caso-didatico *, .experiencias *)):not(:where(.pagina-contratacao :is(#personalizado, .pacote-cartao, .chamada-final) *)) { color: #B9C8DD; }
.site-clean.tema-escuro:not(.home-clean) main .v-tabela td[data-rotulo]:not(:where(.caso-didatico *, .experiencias *)):not(:where(.pagina-contratacao :is(#personalizado, .pacote-cartao, .chamada-final) *))::before { color: #B9C8DD; }
@media (prefers-reduced-transparency: reduce) {
  html body.site-conectado.site-clean.tema-escuro.pagina-metodo main .v-card.metodo-pratica__cartao { background: var(--luz-cantos), #0C192B; }
  body.site-conectado.site-clean.tema-escuro.pagina-fontes main .m24-index { background: #0C192B; }
}

@media (forced-colors: active) {
  html body.site-conectado.site-clean.tema-escuro.pagina-metodo main .v-card.metodo-pratica__cartao { border-color: CanvasText; background: Canvas; box-shadow: none; }
  .site-clean.tema-escuro:not(.home-clean) main .v-comparador > .v-card--atual:not(:has(> .v-cta))::after { border-color: CanvasText; background: Canvas; box-shadow: none; color: CanvasText; }
  .site-clean .m24--contato form.m24-form::before,
  .site-clean.pagina-metodo dl.metodo-linhagem::before,
  .site-clean.home-clean main .v-card::before,
  .site-clean .m24 .modalidade-card > .modalidade-card__sinal { display: none; }
  .site-clean.tema-escuro:not(.home-clean).pagina-metodo .metodo-linhagem dt { color: CanvasText; }
}
@media print {
  .site-clean.tema-escuro:not(.home-clean) main .v-comparador > .v-card--atual:not(:has(> .v-cta))::after,
  html body.site-conectado.site-clean.tema-escuro.pagina-metodo main .v-card.metodo-pratica__cartao { border-color: #999 !important; background: none !important; box-shadow: none !important; }
}
/* ==========================================================================================
   F12.14 · W19v (07/10/2026): achados baixos da verificação da W19t. Só fundo, borda, máscara e
   recuo compensado; nenhum texto muda de lugar e nenhuma rota muda de altura.
   ========================================================================================== */
/* (1) /contato/ · fio do topo do formulário: a máscara esmaecia só 14 px e as pontas, no azul claro da
   marca, terminavam secas. No escuro ele usa as cores do vs-filete--cartao (pontas em cobalto) e esmaece
   em 44 px, como os filetes dos cartões. Mesma posição, altura e recuo (19 px). */
.site-clean.tema-escuro .m24--contato form.m24-form::before {
  background: linear-gradient(90deg, #0B5CE8 0%, #38E8FF 25%, #5B8CFF 50%, #38E8FF 75%, #0B5CE8 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) 14px, rgba(0, 0, 0, .8) 30px, #000 44px, #000 calc(100% - 44px), rgba(0, 0, 0, .8) calc(100% - 30px), rgba(0, 0, 0, .35) calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .35) 14px, rgba(0, 0, 0, .8) 30px, #000 44px, #000 calc(100% - 44px), rgba(0, 0, 0, .8) calc(100% - 30px), rgba(0, 0, 0, .35) calc(100% - 14px), transparent 100%);
}
/* (2) Molduras alinhadas. As molduras das colunas das Aplicações (Home) e das quatro regras de
   /contratacao/ são pseudos por fora do texto (--mx-x além da coluna); a nota "Essas perguntas ilustram…"
   e o "Diferencial", logo abaixo, tinham a borda na coluna do texto (24 px e 14 px para dentro, a 1440).
   Alinhar a moldura das colunas à coluna exigiria mover o texto delas (e mudar alturas); por isso a nota e
   o Diferencial é que saem o mesmo --mx-x para os dois lados, com a folga de dentro somada do mesmo valor:
   a borda fica na mesma linha das molduras de cima e o texto fica exatamente onde estava. */
html body.site-conectado.site-clean.tema-escuro main .home-aplicacoes-bloco .v-faixa.home-aplicacoes__nota { --w19v-nx: .75rem; }
html body.site-conectado.site-clean.tema-escuro main #regras > .env > aside.v-faixa { --w19v-nx: clamp(.75rem, 1.2vw, .875rem); }
@media (min-width: 720px) and (max-width: 1023px) {
  html body.site-conectado.site-clean.tema-escuro main .home-aplicacoes-bloco .v-faixa.home-aplicacoes__nota { --w19v-nx: 1rem; }
}
@media (min-width: 1024px) {
  html body.site-conectado.site-clean.tema-escuro main .home-aplicacoes-bloco .v-faixa.home-aplicacoes__nota { --w19v-nx: calc(clamp(2.5rem, 4.5vw, 4.5rem) / 2 - .5rem); } /* = --home-apl-vao da grade (pag-home.css) */
}
@media (max-width: 480px) {
  html body.site-conectado.site-clean.tema-escuro main .home-aplicacoes-bloco .v-faixa.home-aplicacoes__nota,
  html body.site-conectado.site-clean.tema-escuro main #regras > .env > aside.v-faixa { --w19v-nx: 8px; }
}
html body.site-conectado.site-clean.tema-escuro main :is(.home-aplicacoes-bloco .v-faixa.home-aplicacoes__nota, #regras > .env > aside.v-faixa) {
  max-width: calc(76ch + 2 * var(--w19v-nx));
  margin-right: calc(-1 * var(--w19v-nx));
  margin-left: calc(-1 * var(--w19v-nx));
  padding-right: calc(clamp(1.1rem, 2.2vw, 1.75rem) + var(--w19v-nx));
  padding-left: calc(clamp(1.35rem, 2.4vw, 2rem) + var(--w19v-nx));
}
/* (3) Rodapé no celular (≤ 720 px): as cantoneiras F11 também, menores (barras de 12 px a 8 px da borda,
   dentro da curva de 18 px), sem o brilho de 6 px; o texto fica a ≥ 4 px delas. A altura não muda. */
@media (max-width: 720px) {
  html body.site-conectado.site-clean.tema-escuro .rodape__grade::before {
    background:
      linear-gradient(#38E8FF, #38E8FF) 8px 8px / 12px 2px no-repeat,
      linear-gradient(#38E8FF, #38E8FF) 8px 8px / 2px 12px no-repeat,
      linear-gradient(#38E8FF, #38E8FF) calc(100% - 8px) 8px / 12px 2px no-repeat,
      linear-gradient(#38E8FF, #38E8FF) calc(100% - 8px) 8px / 2px 12px no-repeat,
      linear-gradient(#38E8FF, #38E8FF) 8px calc(100% - 8px) / 12px 2px no-repeat,
      linear-gradient(#38E8FF, #38E8FF) 8px calc(100% - 8px) / 2px 12px no-repeat,
      linear-gradient(#38E8FF, #38E8FF) calc(100% - 8px) calc(100% - 8px) / 12px 2px no-repeat,
      linear-gradient(#38E8FF, #38E8FF) calc(100% - 8px) calc(100% - 8px) / 2px 12px no-repeat,
      var(--luz-fundo);
  }
}
/* W19v r3: footer.rodape div. iguala a especificidade (0,5,5) da regra da base com :is(…)::before na
   transparência reduzida (F11, modos); vindo depois no arquivo, esta vence. */
@media (max-width: 720px) and (prefers-reduced-transparency: reduce) {
  html body.site-conectado.site-clean.tema-escuro footer.rodape div.rodape__grade::before {
    background:
      linear-gradient(#38E8FF, #38E8FF) 8px 8px / 12px 2px no-repeat,
      linear-gradient(#38E8FF, #38E8FF) 8px 8px / 2px 12px no-repeat,
      linear-gradient(#38E8FF, #38E8FF) calc(100% - 8px) 8px / 12px 2px no-repeat,
      linear-gradient(#38E8FF, #38E8FF) calc(100% - 8px) 8px / 2px 12px no-repeat,
      linear-gradient(#38E8FF, #38E8FF) 8px calc(100% - 8px) / 12px 2px no-repeat,
      linear-gradient(#38E8FF, #38E8FF) 8px calc(100% - 8px) / 2px 12px no-repeat,
      linear-gradient(#38E8FF, #38E8FF) calc(100% - 8px) calc(100% - 8px) / 12px 2px no-repeat,
      linear-gradient(#38E8FF, #38E8FF) calc(100% - 8px) calc(100% - 8px) / 2px 12px no-repeat,
      var(--luz-fio), #0C192B;
  }
}
/* (4) Home · pergunta ativa do painel das conexões ("Por que importa?"): era o degradê opaco cobalto →
   violeta (home-p5-modificadores.css, dobra 2). Pela regra de Tiago ("nenhum quadro com cor sólida") passa
   ao vidro aceso da vista ativa de /explorar/ e da aba ativa de /experiencias/: luz no canto de cima, borda
   acesa nos 4 lados (mais viva no topo), anel de luz por dentro e halo. W19v r2: mais o marcador de 2 px embaixo (o da aba ativa de /experiencias/) e um vidro mais claro que o das inativas. Mesma borda de 1 px; estático. */
html body.site-conectado.site-clean.tema-escuro.home-clean .abertura--conexoes .is-inline-map .map-reader__questions button[aria-pressed="true"] {
  border: 1px solid;
  border-color: var(--luz-borda-acesa);
  background:
    radial-gradient(90% 150% at 0% 0%, rgba(56, 232, 255, .30), rgba(56, 232, 255, 0) 72%) 0 0 / 100% 100% no-repeat,
    radial-gradient(70% 130% at 100% 100%, rgba(11, 92, 232, .24), rgba(11, 92, 232, 0) 70%) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, rgba(38, 96, 176, .88) 0%, rgba(16, 48, 98, .90) 100%);
  color: #FFFFFF;
  box-shadow: inset 0 -2px 0 #38E8FF, inset 0 0 0 1px rgba(56, 232, 255, .30), var(--luz-halo-leve-aceso);
}
@media (prefers-contrast: more) {
  html body.site-conectado.site-clean.tema-escuro.home-clean .abertura--conexoes .is-inline-map .map-reader__questions button[aria-pressed="true"] { border-color: #38E8FF; box-shadow: inset 0 -2px 0 #38E8FF, inset 0 0 0 1px #38E8FF; }
}
@media (prefers-reduced-transparency: reduce) {
  html body.site-conectado.site-clean.tema-escuro.home-clean .abertura--conexoes .is-inline-map .map-reader__questions button[aria-pressed="true"] { background: #1D4A85; }
}
@media (forced-colors: active) {
  .site-clean.tema-escuro .m24--contato form.m24-form::before { display: none; }
  html body.site-conectado.site-clean.tema-escuro.home-clean .abertura--conexoes .is-inline-map .map-reader__questions button[aria-pressed="true"] { forced-color-adjust: none; border: 1px solid Highlight; background: Highlight; color: HighlightText; box-shadow: none; }
}
@media print {
  .site-clean.tema-escuro .m24--contato form.m24-form::before { display: none !important; }
}
/* W19v r3: em cores forçadas e na impressão as molduras de pseudo somem e as colunas voltam à linha do
   texto; a nota das Aplicações e o Diferencial voltam junto (sem a saída --w19v-nx). Na impressão, a pergunta
   ativa da Home fica sem a borda acesa, como na base (a vista ativa de /explorar/: p6-conversa.css). */
@media (forced-colors: active) {
  html body.site-conectado.site-clean.tema-escuro main .home-aplicacoes-bloco .v-faixa.home-aplicacoes__nota,
  html body.site-conectado.site-clean.tema-escuro main #regras > .env > aside.v-faixa { --w19v-nx: 0px; }
}
@media print {
  html body.site-conectado.site-clean.tema-escuro main .home-aplicacoes-bloco .v-faixa.home-aplicacoes__nota,
  html body.site-conectado.site-clean.tema-escuro main #regras > .env > aside.v-faixa { --w19v-nx: 0px; }
  html body.site-conectado.site-clean.tema-escuro.home-clean .abertura--conexoes .is-inline-map .map-reader__questions button[aria-pressed="true"] { border-color: transparent !important; }
}