/* JR 2026.203 — camada "cinematográfica" (inspirada em palominoprod.com): grão de filme sutil pra seções escuras, rótulo com ponto-marcador (extensão do .eyebrow que index.html/proposta.html/cliente.html já usam) e numeral fantasma pra blocos numerados. Carregada DEPOIS de jr-remake-2026-149.css nas telas que a usam, mesmo canal de CSS compartilhado que index.html/proposta.html/cliente.html já dividem. Júnior pediu esse visual depois de ver https://palominoprod.com/en (site: "mudancas. olhe esse site primeiramente. absorva tudo."), confirmando que queria em index.html, proposta.html, no portal (cliente.html) e no JR Rewards/ALU MAKE. Esta unidade (2026.203) cobre só index.html — proposta.html/cliente.html/Rewards/ALU MAKE ficam pra unidades seguintes, reaproveitando as mesmas classes daqui. */ /* .jr-cine-grain — textura de ruído/grão, não uma foto: por isso NUNCA ganha compensação de tema claro (nem [style*="background-image"], nem .jr-nao-inverter). O mecanismo de tema claro (jr-tema-2026-123.css) inverte o inteiro e reaplica o MESMO filtro só em elementos com background-image inline pra cancelar a inversão — isso existe pra foto ter "lado certo" nas duas cores. Ruído fractal simétrico não tem lado certo: inverter claro/escuro dele continua parecendo ruído. Deixar essa regra fora do seletor de compensação é intencional — não "corrigir" isso adicionando .jr-nao-inverter numa sessão futura. */ .jr-cine-grain{ position:absolute;inset:0;pointer-events:none;z-index:1; opacity:.16;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:160px 160px; } @media(prefers-reduced-motion:reduce){.jr-cine-grain{opacity:.09}} /* .eyebrow ganha o ponto-marcador em versalete do site de referência ("● OUR CLIENTS") — extensão da classe já usada em 13+ lugares de index.html, não uma classe nova paralela. Cor herda do próprio .eyebrow (currentColor), então acompanha qualquer override inline de cor por seção sem precisar duplicar regra. */ .eyebrow::before{content:"●";display:inline-block;margin-right:9px;font-size:12px;vertical-align:middle;color:currentColor;opacity:1;text-shadow:0 0 10px currentColor} /* .jr-cine-numbered — numeral fantasma (contorno, sem preenchimento) no canto do bloco, lido a partir de data-num="01" no próprio elemento (evita duplicar o número em português/inglês ou depender de contador CSS que quebraria com blocos condicionais). Aditivo: não substitui .step-n nem qualquer badge existente, só soma a camada editorial atrás do conteúdo (z-index 0, conteúdo real fica em z-index 1). */ .jr-cine-numbered{position:relative} .jr-cine-numbered::before{ content:attr(data-num);position:absolute;top:-16px;right:2px;z-index:0; font-family:'Cormorant Garamond',serif;font-weight:600;font-size:104px;line-height:1; color:transparent;-webkit-text-stroke:1.6px rgba(233,30,140,.55);opacity:.8; pointer-events:none; } .jr-cine-numbered>*{position:relative;z-index:1} @media(max-width:700px){.jr-cine-numbered::before{font-size:64px}}