/* ═══════════════════════════════════════════════════════════════════ Base de toda tela do sistema. DUAS CAMADAS, e a distinção é o que faz o tema claro existir: 1. CORES DA MARCA (--ambar, --escuro, ...) — os pigmentos. Elas NÃO mudam com o tema, porque a marca não muda com o tema. 2. PAPÉIS (--texto, --superficie, --acento-fundo, ...) — o que a tela pede. É só isto que uma tela pode usar. ☠️ Nunca escreva `color: var(--ambar)` numa tela. Âmbar sobre fundo claro dá 1,70:1 — MEDIDO, não estimado — e o texto some. Quem pede pigmento direto passa por cima do tema e só descobre no dia em que alguém liga o tema claro. Peça o papel: `var(--acento-texto)`. ═══════════════════════════════════════════════════════════════════ */ :root { /* ── 1. Pigmentos (MARCA.md) ───────────────────────────────────── */ --escuro: #0C181F; --ambar: #FFBB10; --neutro: #8993A4; --claro: #F0F0F0; --raio-bloco: 20px; --raio-campo: 12px; /* ── Alvo de toque ──────────────────────────────────────────── Decisao do Luciano em 20/08/2026, na segunda passada: 52px onde se usa o DEDO, 44px onde se usa ponteiro fino. Ninguem perde — o piso da WCAG 2.5.8 e' 44, e os dois passam. ☠️ O valor padrao e' o MAIOR, e isso e' de proposito: navegador que nao entenda `pointer` cai no 52 e sobra alvo, em vez de cair no 44 e faltar. Falhar para o lado que ainda funciona. A primeira versao dizia "52px; nao encolhe nunca" e o cabecalho estava em 38 — promessa que o codigo nao cumpria. Agora nenhum controle escreve numero: todos pedem `var(--toque)`. */ --toque: 52px; --fonte: "Schibsted Grotesk", "Inter", "Segoe UI", Calibri, Arial, sans-serif; /* ── Escala tipográfica ──────────────────────────────────────── ☠️ Cor e alvo de toque estavam rigorosamente tokenizados, e ao lado deles conviviam 18 tamanhos de fonte distintos e 30 espaçamentos, TODOS escritos à mão. Não é excesso de zelo: 12px, 12,5px e 13px na mesma tela não são três decisões, são a mesma decisão tomada três vezes por engano — e quem chega depois copia o vizinho e inventa o décimo nono. Seis degraus, e cada um nasceu do que a tela já usava, não de uma progressão bonita: o número entre parênteses é quantas declarações o degrau absorve. */ --txt-micro: 11px; /* (10) versalete de etiqueta, selo de estado */ --txt-apoio: 13px; /* (28) rótulo, legenda, texto de ajuda */ --txt-corpo: 14.5px; /* (27) o texto normal e a célula da grade */ --txt-realce: 16px; /* (12) título de cartão, texto de botão */ --txt-secao: 20px; /* (2) título de bloco dentro da tela */ --txt-tela: 24px; /* (4) o título da tela */ /* ☠️ Este NÃO é um degrau da escala, e por isso não se chama `--txt-algo` que caiba nela: 16px é o piso abaixo do qual o Safari do iPhone DÁ ZOOM ao focar um campo, jogando a tela para o lado. É restrição do aparelho, não escolha de desenho — quem reafinar a escala não pode arrastar isto junto. */ --campo-sem-zoom-no-ios: 16px; /* ── Escala de espaçamento ──────────────────────────────────── ⚠️ Sete degraus, e o mapeamento arredonda para BAIXO no empate. Não é detalhe: a primeira versão desta escala começava em 4px e mandava 10px para 12px, e só isso devolveu 23 dos 48px de altura que a densidade da lista tinha acabado de ganhar — 147px por cartão viraram 170. Escala que engorda o que se acabou de emagrecer não é escala, é imposto. ☠️ E quando o layout pede 10px e a escala oferece 8 e 12, vale 8. A escala manda; ajustar a escala para caber num layout é o caminho de volta para os 30 valores distintos. */ --esp-0: 2px; /* grudado: duas faixas de um mesmo cartão */ --esp-1: 4px; /* colado: rótulo e valor */ --esp-2: 8px; /* dentro de um controle */ --esp-3: 12px; /* entre irmãos de um bloco */ --esp-4: 16px; /* entre blocos */ --esp-5: 24px; /* entre seções */ --esp-6: 32px; /* respiro de topo e de rodapé */ /* ☠️ NÃO É DEGRAU DE ESCALA — é a largura do fio dos campos, e existe para o rótulo poder alinhar pela TINTA em vez de pela caixa (achado 51). O texto digitado começa em `padding` + `border` do campo; o rótulo, na borda da caixa. Alinhar só pelo `padding` deixa 1px de resíduo — invisível de perto, e é exatamente o que faz uma tela parecer "quase certa" sem ninguém conseguir dizer por quê. ⚠️ Tem nome porque `calc(var(--esp-4) + 1px)` espalhado por três folhas é o mesmo número escrito à mão três vezes, que é a doença que a escala existe para curar. */ --fio-largura: 1px; /* ── 2. Papéis — tema ESCURO, que é o padrão ─────────────────── ☠️ CARA NOVA de 23/08/2026 — "Vitrine Noturna", decisão do Luciano em prancha. A régua é docs/revisoes/2026-08-23-uxui-cara-nova-especificacao.md (§1): noite #081018 de fundo, vitrine #10202B de cartão, texto #E8ECF0 (16,11:1 sobre a noite), apoio #93A1B0 (7,26:1 noite, 6,30:1 vitrine), linha #1E3240. ⚠️ Os tokens que a especificação NÃO fixa estão marcados como DERIVADOS — o UX/UI mede cada um no DOM composto e ajusta a especificação, não o contrário. */ color-scheme: dark; --fundo: #081018; /* noite — texto 16,11:1 (medido na especificação) */ --superficie: #10202B; /* vitrine — texto 14,00:1 */ --superficie-alta: #1B2E3C; /* DERIVADO: bloco sobre bloco, entre a vitrine e a linha */ --texto: #E8ECF0; --texto-fraco: #93A1B0; --fio: #1E3240; /* a "linha" da especificação — sólida, mede-se sem compor */ /* ☠️ CONTORNO DE CONTROLE, não divisória — WCAG 1.4.11 pede 3:1 e a divisória não (especificação §1.1, nascida do achado do UX/UI na fatia 1: meu derivado #33495B dava 1,92:1 e botão de contorno virava palavra solta). #8993A4 é o neutro OFICIAL da marca: 4,51:1 no pior fundo do escuro. */ --fio-forte: #8993A4; --campo-fundo: #0B1922; /* DERIVADO: um passo abaixo da vitrine */ /* ☠️ O VEU E A GRADE — achado 28, segunda metade. Eram literais crus espalhados pelo `tela-acesso.css`, e por isso a minha guarda de pigmento nao os pegou: ela olha `color` e `outline`, e estes sao `background`. No tema claro um veu BRANCO sobre fundo claro compoe para o proprio fundo e some — o Design mediu 1,00:1 e 1,01:1. */ --veu: rgba(232, 236, 240, .035); --veu-grade: rgba(232, 236, 240, .045); /* ⚠️ No escuro o âmbar é LUZ (especificação §2): ação primária de fundo âmbar com tinta escura (10,61:1), acento de texto e anel de foco âmbar (11,27:1 sobre a noite). Pontual do mesmo jeito — o que acende tudo não destaca nada. */ --acento-fundo: #FFBB10; /* preenchimento: botão, etiqueta */ --acento-sobre-fundo: #0C181F; /* 10,61:1 sobre o âmbar */ --acento-texto: #FFBB10; --acento-fio: #FFBB10; /* anel de foco do escuro (§1) */ /* ── A CASCA: topo e menu ────────────────────────────────────── ☠️ CARA NOVA (23/08/2026): a decisão de 22/08 da casca âmbar foi REVOGADA pelo Luciano em prancha — a especificação §0 lista o que morre, e a casca âmbar abre a lista. A ESTRUTURA atual (menu lateral + gaveta) também morre, mas na fatia seguinte: estes tokens são o traje interino para a casca velha não vestir as cores velhas em cima do tema novo. Valores da família da noite, DERIVADOS — o UX/UI mede. */ --casca-topo: rgba(8, 16, 24, .85); --casca-menu: rgba(16, 32, 43, .55); --casca-tinta: #E8ECF0; --casca-tinta-fraca: #93A1B0; --casca-fio: #1E3240; /* ☠️ O FIO FORTE DA CASCA — contorno de controle (avatar, "Sair", hamburguer), e não separador. São dois papéis diferentes e sempre foram: o separador desenha uma divisão, o contorno desenha um ALVO que se clica. ⚠️ Nasceu em 23/08/2026 para não enfraquecer o escuro. Ao migrar esses controles de `--fio-forte` (papel de PÁGINA) para a casca, o único fio que existia era o do separador — e no escuro isso levaria o contorno de `.28` para `.14`, mudando um tema que foi prometido intacto. Papel que falta se cria; não se empresta o vizinho. */ --casca-fio-forte: #8993A4; /* contorno de controle na casca — mesma régua da §1.1 */ /* ⚠️ Iguais a `--superficie-alta` de propósito — hover e ativo da casca velha acompanham o realce do tema novo até a barra inferior chegar. */ --casca-hover: #1B2E3C; --casca-ativo: #1B2E3C; --casca-ativo-tinta: #E8ECF0; /* O fio que marca a pagina em que se esta'. Ambar nos DOIS temas, e por isso parece redundante — nao e': ele precisa contrastar com o fundo do item ATIVO, que no claro e' azul e no escuro e' um realce translucido. Papel proprio, nao pigmento cravado. */ --casca-marca: #FFBB10; /* ☠️ O traço do item ativo da BARRA INFERIOR acompanha a COR DO TEXTO ATIVO — especificação §4 corrigida pelo próprio UX/UI (e6d33b5) depois de medir a primeira versão: o traço âmbar dava 1,60:1 contra a barra CLARA (11,27:1 contra a escura — o traço tinha sido pedido exatamente no tema em que não funciona), e o escuro ficava sem traço nenhum. Agora são dois sinais fortes e independentes nos dois temas: a cor do texto e o traço de 3px. */ --barra-traco: #FFBB10; /* 11,27:1 contra a barra da noite */ /* ☠️ A TINTA QUE VAI SOBRE O AMBAR DA MARCA, SEMPRE — e nao e' o mesmo que `--acento-sobre-fundo`. A diferenca custou um defeito de 1,00:1: `--acento-sobre-fundo` significa "a tinta que vai sobre `--acento-fundo`", e os dois invertem JUNTOS. Quem pinta um fundo ambar FIXO (`var(--ambar)`) e pede aquela tinta quebra no instante em que o papel inverte — foi o que aconteceu com o botao do proprietario no tema claro: ambar sobre ambar. Este aqui nao inverte nunca, porque o fundo dele nao inverte nunca. */ --sobre-ambar: #0C181F; /* ── Estados semânticos — especificação §6, tema ESCURO ──────────── ☠️ GRAVADOS JÁ COMPOSTOS EM SÓLIDO, como a especificação manda: os fundos nasceram translúcidos na prancha, e fundo translúcido se compõe, não se pula — sólido é o que torna a medição futura trivial e imune à armadilha do parser. Pares medidos pelo UX/UI (aguardando 10,61 · aceita 8,19 · expirada 5,00 · recusada 7,39; "expira hoje" fica para a fatia do cartão, junto do rótulo). */ --estado-aguardando-fundo: #FFBB10; --estado-aguardando-tinta: #0C181F; --estado-aceita-fundo: #133732; --estado-aceita-tinta: #86E0AB; --estado-expirada-fundo: #22323E; --estado-expirada-tinta: #93A1B0; --estado-recusada-fundo: #2D2730; --estado-recusada-tinta: #E8A9A9; /* "Expira hoje" (§6): no escuro é transparente com borda e texto âmbar — 9,79:1. */ --estado-expira-fundo: transparent; --estado-expira-tinta: #FFBB10; --estado-expira-fio: #FFBB10; /* Compatibilidade com as telas de acesso, que são escuras sempre. */ --fio-invertido: rgba(240, 240, 240, .18); } /* ─────────────────────────────────────────────────────────────────── Tema CLARO. Este é o único bloco que muda se a decisão sobre o âmbar nos links mudar: hoje âmbar é só PREENCHIMENTO, e texto/link são escuros com sublinhado. Trocar `--acento-texto` para um âmbar escuro (#7A5400 dá 6,15:1) é uma linha, e todas as telas mudam juntas. O servidor decide: `data-tema` vem do perfil do Usuário, no HTML, já pintado. Não existe script de anti-piscada aqui — a CSP é `script-src 'self'` e recusa script inline. Sai melhor assim. ─────────────────────────────────────────────────────────────────── */ :root[data-tema="claro"] { color-scheme: light; /* ☠️ CARA NOVA de 23/08/2026 — "Papel e Tinta" (especificação §1): papel #F7F8FA, cartão #FFFFFF, tinta #0C181F (16,95:1 no papel, 18,01:1 no cartão), apoio #55606E (6,02:1 papel, 6,39:1 cartão), linha #E3E7EC. Tokens sem valor na especificação estão DERIVADOS, para a medição do UX/UI. */ /* ☠️ ACHADO 33: `--veu`/`--veu-grade` definidos SÓ no `sistema` herdavam o escuro aqui — veu branco sobre fundo claro some. Os dois blocos claros listam os MESMOS tokens, e há guarda que cobra. */ --veu: rgba(12, 24, 31, .03); --veu-grade: rgba(12, 24, 31, .04); --fundo: #F7F8FA; --superficie: #FFFFFF; --superficie-alta: #EDF0F4; /* DERIVADO: bloco sobre bloco */ --texto: #0C181F; --texto-fraco: #55606E; --fio: #E3E7EC; /* a "linha" — sólida, mede-se sem compor */ /* ☠️ CONTORNO DE CONTROLE (especificação §1.1): #7C8590 dá 3,27:1 no pior fundo do claro (a superfície-alta). O neutro da marca aqui REPROVA (2,71:1) — coerente com o MARCA.md, que já o proíbe sobre fundo claro. Meu derivado #C7CFD8 dava 1,40:1. */ --fio-forte: #7C8590; --campo-fundo: #FFFFFF; --acento-texto: #0C181F; /* âmbar como texto sobre claro daria 1,70:1 — proibido */ /* ☠️ O ANEL DE FOCO DO CLARO É A TINTA (#0C181F) — especificação §1, 16,95:1 sobre o papel. Mata o `#8A6008` de 22/08, que existia por causa da casca âmbar e do botão azul: os dois morreram na cara nova, e a decisão (c) da retomada morre junto. */ --acento-fio: #0C181F; /* ☠️ A CASCA ÂMBAR MORREU — cara nova de 23/08/2026 (especificação §0). Traje interino da casca velha até a barra inferior/trilho da fatia seguinte: papel com fios finos, item ativo em tinta com marca âmbar (especificação §3, trilho claro). DERIVADOS. */ --casca-topo: #F7F8FA; --casca-menu: #F7F8FA; --casca-tinta: #0C181F; --casca-tinta-fraca: #55606E; --casca-fio: #E3E7EC; --casca-fio-forte: #7C8590; /* contorno de controle na casca — mesma régua da §1.1 */ --casca-hover: #EDF0F4; --casca-ativo: #0C181F; --casca-ativo-tinta: #FFBB10; /* 10,61:1 sobre a tinta */ --casca-marca: #FFBB10; --barra-traco: #0C181F; /* §4 corrigida: o traço é a TINTA no claro — 16,95:1; o âmbar aqui dava 1,60:1 e fica reservado ao gesto */ --sobre-ambar: #0C181F; /* 10,61:1 sobre o âmbar — não inverte, nunca */ /* ⚠️ Ação primária do claro (especificação §1): fundo TINTA com texto ÂMBAR — 10,61:1, a combinação que o próprio MARCA.md manda para botão principal. Não há mais botão azul. */ --acento-fundo: #0C181F; --acento-sobre-fundo: #FFBB10; /* ── Estados semânticos — especificação §6, tema CLARO ───────────── Pares medidos: aguardando 10,61 · aceita 7,66 · expirada 5,54 · recusada 6,85 · expira hoje 16,71 (tinta sobre #FFF6DE, com borda âmbar). */ --estado-aguardando-fundo: #FFBB10; --estado-aguardando-tinta: #0C181F; --estado-aceita-fundo: #DDF0E4; --estado-aceita-tinta: #14532D; --estado-expirada-fundo: #ECEFF3; --estado-expirada-tinta: #55606E; --estado-recusada-fundo: #F8E3E3; --estado-recusada-tinta: #8C2B2B; /* ☠️ O fio NÃO é #FFBB10 no claro: âmbar puro dá 1,67:1 contra o cartão e a urgência máxima fica com a marca mais fraca da lista (achado do UX/UI em fd38f32 — a terceira vez da mesma física; §6 corrigida em becc3a6). #AC8415 é o âmbar 34% rumo à tinta: 3,46:1 no cartão, 3,21 no próprio fundo. */ --estado-expira-fundo: #FFF6DE; --estado-expira-tinta: #0C181F; --estado-expira-fio: #AC8415; } /* "Seguir o sistema" — só quando o Usuário escolheu isso de verdade. As telas de acesso não emitem `data-tema` e por isso ficam escuras sempre: antes de entrar, o sistema não sabe de quem é a preferência. */ @media (prefers-color-scheme: light) { :root[data-tema="sistema"] { color-scheme: light; --fundo: #F7F8FA; --superficie: #FFFFFF; --superficie-alta: #EDF0F4; --texto: #0C181F; --texto-fraco: #55606E; --fio: #E3E7EC; --fio-forte: #7C8590; --campo-fundo: #FFFFFF; --veu: rgba(12, 24, 31, .03); --veu-grade: rgba(12, 24, 31, .04); --acento-texto: #0C181F; /* ☠️ Os dois blocos de tema claro listam os MESMOS tokens, e há guarda que cobra (`OsDoisCaminhosParaOTemaClaro_DefinemOsMesmosTokens`) — a divergência já entrou duas vezes por esquecimento (achados 38 e 33), e nas duas o lado que faltava herdava o ESCURO. A razão de cada valor está escrita uma vez só, no bloco explícito da cara nova, acima. */ --casca-topo: #F7F8FA; --casca-menu: #F7F8FA; --casca-tinta: #0C181F; --casca-tinta-fraca: #55606E; --casca-fio: #E3E7EC; --casca-fio-forte: #7C8590; --casca-hover: #EDF0F4; --casca-ativo: #0C181F; --casca-ativo-tinta: #FFBB10; --casca-marca: #FFBB10; --barra-traco: #0C181F; --sobre-ambar: #0C181F; --acento-fio: #0C181F; --acento-fundo: #0C181F; --acento-sobre-fundo: #FFBB10; --estado-aguardando-fundo: #FFBB10; --estado-aguardando-tinta: #0C181F; --estado-aceita-fundo: #DDF0E4; --estado-aceita-tinta: #14532D; --estado-expirada-fundo: #ECEFF3; --estado-expirada-tinta: #55606E; --estado-recusada-fundo: #F8E3E3; --estado-recusada-tinta: #8C2B2B; --estado-expira-fundo: #FFF6DE; --estado-expira-tinta: #0C181F; --estado-expira-fio: #AC8415; } } /* `pointer: fine` = mouse, trackpad, caneta. `coarse` = dedo. Quem tem os dois (notebook com tela sensivel) reporta `fine` como primario, e ai' o ponteiro fino e' mesmo o que a pessoa esta' usando para mirar. */ @media (pointer: fine) { :root { --toque: 44px; } } * { box-sizing: border-box; } /* ☠️ ANCORA NAO POUSA ATRAS DO CABECALHO. O `.topo` e' `position: sticky; top: 0` com altura fixa. Sem isto, `#grade` e `#serie` rolam o alvo ate' `y = 0` e a barra fica POR CIMA -- o Luciano fotografou (02/09/2026): clicou num controle do Dashboard, a pagina voltou para o grafico e os BOTOES ficaram escondidos atras do topo. O conserto do dia anterior tinha resolvido metade do problema e criado a outra metade. 💡 O token ja' existia: o `casca.css` publica `--topo-altura` com um comentario dizendo, em 25/08, que ele existe para quem precisa se posicionar abaixo do topo. A UX/UI deixou a peca pronta e eu nao a usei. ⚠️ `scroll-margin-top` e' do ALVO, nao do container que rola -- e por isso a regra e' universal: qualquer `id` que vire destino de ancora ja' nasce certo. Um seletor por tela faria a proxima nascer errada, em silencio. ☠️ `[id]` E NAO `:target`, e a diferenca nao e' estilo: `:target` so' casa DEPOIS de o fragmento virar ativo, e depender de o navegador aplicar o estilo antes de calcular a rolagem e' apostar em ordem de execucao. Com `[id]` a margem ja' esta' la' quando a rolagem acontece -- sem "se". A propriedade nao custa nada em elemento que ninguem ancora: ela so' e' consultada quando algo rola ate' ele. */ [id] { scroll-margin-top: calc(var(--topo-altura) + var(--esp-3)); } /* ☠️ O `[hidden]` do navegador é 0-0-1 e perde para qualquer `.classe { display: … }`. Elemento marcado como escondido continuava na tela, inerte. Isto mordeu este projeto QUATRO vezes: o hambúrguer que aparecia sem script e não abria nada, o campo de busca do menu, a faixa de abas, e — depois de duas correções pontuais e dois comentários explicando a armadilha — os próprios itens do menu, onde o filtro punha `hidden` e nada sumia. As três primeiras foram consertadas uma a uma, com uma regra por seletor. Não adiantou: a quarta entrou por um seletor novo, que ninguém tinha pensado em cobrir. ⚠️ `!important` aqui não é força bruta — é o significado do atributo. `hidden` quer dizer "não renderize", e nenhuma classe deveria poder discordar disso. Com esta linha, todo elemento que nasce escondido para ser revelado por script fica coberto, inclusive os que ainda não existem. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; min-height: 100dvh; /* nunca 100vh: no celular nao desconta a barra do navegador */ background: var(--fundo); color: var(--texto); font-family: var(--fonte); font-size: 16px; -webkit-font-smoothing: antialiased; } a { color: var(--acento-texto); } /* No tema claro o âmbar não pode carregar o link sozinho, então o sublinhado é que informa. No escuro ele já se distingue pela cor. */ :root[data-tema="claro"] a { text-decoration-thickness: from-font; } /* ⚠️ Achado 39 — este seletor estava FORA do media query, então o reforço do tema claro aplicava também no escuro, onde a própria regra acima diz que ele é desnecessário. */ @media (prefers-color-scheme: light) { :root[data-tema="sistema"] a { text-decoration-thickness: from-font; } } /* Quem navega por teclado precisa ver onde está, nos dois temas. */ /* ☠️ ACHADO 35 — `--acento-fio`, NUNCA `--ambar`, e a minha regra anterior estava errada. Eu tinha escrito que ambar pode ficar cravado porque "vale o mesmo nos dois temas". Vale para `--acento-fundo` e `--acento-sobre-fundo`. NAO VALE PARA O FIO: `--acento-fio` e' #FFBB10 no escuro e TINTA (#0C181F) no claro, e ganhou valor proprio justamente porque ambar como contorno nao serve sobre fundo claro — 1,54:1. A REGRA DE HOJE (B9 da UX/UI, fechado em 08/09/2026): `--acento-fio` e' `#FFBB10` no escuro (`:134`) e `#0C181F` no claro (`:256` e `:343`) — o anel de foco no claro e' a TINTA, com 18,01:1 sobre o fundo. As declaracoes sao a verdade; este comentario so' explica POR QUE o fio tem valor proprio. ☠️ Nao escrever hex aqui: comentario que descreve valor e' uma instrucao esperando ser obedecida quando o valor mudar. ⚠️ Seis regras sobrescreviam esta com `var(--ambar)` cravado, e CINCO viviam no `casca.css` — a casca do sistema logado, onde o tema claro E' alcancavel pelo perfil. Ali nao era latente: quem escolhesse claro via o indicador de foco de cinco controles a 1,54:1. ☠️ O `casca.css` avisa no cabecalho que ninguem escreva `#FFBB10` nesta folha. `--ambar` e' o mesmo erro por outra porta: nao e' hex, e e' pigmento. */ :focus-visible { outline: 2px solid var(--acento-fio); outline-offset: 2px; } /* Respeita quem pediu menos movimento no sistema operacional. */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* O botao que so' existe para quem esta' SEM script (ex.: "Salvar" ao lado de um formulario com auto-enviar). No Autoriza a regra morava no minha-conta.css e a copia nao a trouxe — o botao ficava visivel com script ligado (rodada 1 do Code Review). Vive AQUI porque e' comportamento global, nao de uma tela. */ html:not(.sem-script) .so-sem-script { display: none; }