/* ========================================================================== Estilos completos. Carregados de forma assíncrona. O CSS crítico (acima da dobra) está embutido no pelo layout. Todas as combinações de cor foram verificadas para WCAG AA (4,5:1). ========================================================================== */ /* ---------- Bolas: variações ---------- */ .bola-mini{width:40px;height:40px;font-size:.94rem} .bola-fria{background:radial-gradient(circle at 33% 27%,#8a94a6,#4a5464); box-shadow:0 3px 7px rgba(74,84,100,.3),inset 0 -2px 5px rgba(0,0,0,.13)} .bolas-quina .bola{background:radial-gradient(circle at 33% 27%,#5b4fe0,#2a2093)} .bolas-loto .bola{background:radial-gradient(circle at 33% 27%,#b7359f,#6d1a66)} .jogo-linha{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;width:100%} .jogo-linha+.jogo-linha{margin-top:14px;padding-top:14px;border-top:1px dashed var(--azul-borda)} .jogo-rotulo{font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em; color:var(--texto-3);min-width:62px;text-align:left} .jogo-bolas{display:flex;gap:9px;flex-wrap:wrap;justify-content:center} /* ---------- Grades ---------- */ .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:18px;margin:22px 0} .grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:22px 0} .mini-card{background:var(--card-2);border:1px solid var(--borda);border-radius:var(--r);padding:22px} .mini-card h3{margin-top:0;font-size:1.04rem;color:var(--azul)} .mini-card p:last-child,.mini-card ul:last-child,.mini-card ol:last-child{margin-bottom:0} .mini-card ul,.mini-card ol{padding-left:20px;margin-bottom:0} .mini-card li{margin-bottom:7px;font-size:.96rem;color:var(--texto-2)} .mini-card-destaque{background:var(--azul-suave);border-color:var(--azul-borda)} /* ---------- Painéis de dados ---------- */ .painel-resultado,.simulador-painel{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin:24px 0} .painel-item{background:var(--card-2);border:1px solid var(--borda);border-radius:var(--r); padding:20px 18px;text-align:center} .painel-rotulo{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em; color:var(--texto-3);font-weight:800;margin-bottom:8px} .painel-valor{display:block;font-size:1.55rem;font-weight:800;line-height:1.15; color:var(--texto);letter-spacing:-.025em;font-variant-numeric:tabular-nums} .painel-sub{display:block;font-size:.84rem;color:var(--texto-3);margin-top:6px} .painel-destaque{background:var(--azul-suave);border-color:var(--azul-borda)} .painel-destaque .painel-valor{color:var(--azul)} .painel-alerta{background:var(--laranja-suave);border-color:#f6dcae} .painel-alerta .painel-valor{color:var(--laranja-texto)} .painel-ok{background:var(--verde-suave);border-color:#b6e6d0} .painel-ok .painel-valor{color:var(--verde-escuro)} /* ---------- Resultado ---------- */ .card-resultado{text-align:center} .card-resultado h2{text-align:left} .resultado-meta{font-size:.98rem;color:var(--texto-2);margin-bottom:8px} .resultado-proximo{font-size:1rem;margin-top:18px;color:var(--texto-2)} .valor-premio{color:var(--verde-escuro);font-size:1.12em;font-weight:800} .tag{display:inline-block;padding:4px 11px;border-radius:var(--r-full);font-size:.72rem; font-weight:800;text-transform:uppercase;letter-spacing:.06em; background:#eef1f6;color:var(--texto-2);vertical-align:middle} .tag-acumulou{background:var(--laranja-suave);color:var(--laranja-texto)} .tag-saiu{background:var(--verde-suave);color:var(--verde-escuro)} .link-mais{display:inline-block;font-weight:700;text-decoration:none;padding:6px 0;min-height:24px} .link-mais:hover{text-decoration:underline} /* ---------- Resposta direta (mira o featured snippet) ---------- */ .resposta-grande{font-size:clamp(1.6rem,1.2rem + 1.7vw,2.35rem);font-weight:800; line-height:1.18;margin:0 0 12px;letter-spacing:-.03em} .resposta-sim{color:var(--verde-escuro)} .resposta-nao{color:var(--laranja-texto)} .resposta-apoio{font-size:1.08rem;color:var(--texto-2)} /* ---------- Prêmio ---------- */ .card-premio{text-align:center;background:linear-gradient(168deg,#fff,#eff5fc); border-color:var(--azul-borda)} .premio-rotulo{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.09em; color:var(--texto-3);font-weight:800} .premio-valor{font-size:clamp(2.3rem,1.4rem + 4vw,4rem);font-weight:800;color:var(--verde-escuro); margin:10px 0;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums} .premio-sub{font-size:1.05rem;color:var(--texto-2);margin:0} /* ---------- Contador ---------- */ .contador{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:26px 0} .contador-item{background:linear-gradient(160deg,var(--azul),var(--azul-escuro));color:#fff; border-radius:var(--r);padding:15px 19px;min-width:82px;text-align:center; box-shadow:0 4px 12px rgba(1,93,170,.24)} .contador-item strong{display:block;font-size:1.85rem;font-weight:800;line-height:1; font-variant-numeric:tabular-nums;letter-spacing:-.03em} .contador-item span{font-size:.7rem;text-transform:uppercase;letter-spacing:.09em; opacity:.9;font-weight:600;margin-top:5px;display:block} /* ---------- Tabelas ---------- */ .tabela-scroll{overflow-x:auto;margin:22px 0;border:1px solid var(--borda); border-radius:var(--r);-webkit-overflow-scrolling:touch;background:var(--card)} .tabela-alta{max-height:600px;overflow-y:auto} table{width:100%;border-collapse:collapse;font-size:.96rem} caption{text-align:left;padding:12px 18px;font-size:.86rem;color:var(--texto-3)} th,td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--borda)} thead th{background:var(--card-2);font-weight:800;font-size:.75rem;text-transform:uppercase; letter-spacing:.07em;color:var(--texto-3);position:sticky;top:0;z-index:1; border-bottom:1px solid var(--borda-forte)} tbody tr:last-child th,tbody tr:last-child td{border-bottom:0} tbody tr{transition:background .12s} tbody tr:hover td,tbody tr:hover th{background:var(--card-2)} tbody th{font-weight:700;color:var(--texto)} td{color:var(--texto-2);font-variant-numeric:tabular-nums} .linha-destaque td,.linha-destaque th{background:var(--azul-suave)!important} .linha-total td,.linha-total th{background:var(--card-2);font-weight:800; border-top:2px solid var(--borda-forte);color:var(--texto)} .tabela-compacta th,.tabela-compacta td{padding:9px 16px;font-size:.92rem} .col-pos{color:var(--texto-3);font-variant-numeric:tabular-nums;width:1%;white-space:nowrap;font-size:.88rem} .col-barra{min-width:160px} .positivo{color:var(--verde-escuro);font-weight:700} .negativo{color:var(--vermelho);font-weight:700} /* ---------- Barra de frequência ---------- */ .barra{display:inline-block;width:100px;height:9px;background:#eef1f6;border-radius:var(--r-full); overflow:hidden;vertical-align:middle;margin-right:10px} .barra-fill{display:block;height:100%;border-radius:var(--r-full); background:linear-gradient(90deg,var(--azul),var(--azul-vivo))} /* ---------- Volante ---------- */ .volante{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;margin:22px 0} .dezena{ aspect-ratio:1;border:1.5px solid var(--borda-forte);background:var(--card); border-radius:var(--r-sm);font-size:.92rem;font-weight:700;font-family:inherit; color:var(--texto-2);cursor:pointer;padding:0;font-variant-numeric:tabular-nums; transition:background .12s,border-color .12s,color .12s,transform .1s; } .dezena:hover{border-color:var(--azul);color:var(--azul);background:var(--azul-suave)} .dezena:active{transform:scale(.94)} .dezena[aria-pressed=true]{background:var(--azul);border-color:var(--azul);color:#fff; box-shadow:0 2px 6px rgba(1,93,170,.3)} .dezena.acerto{background:var(--verde);border-color:var(--verde);color:#fff; box-shadow:0 2px 8px rgba(18,136,90,.4)} /* ---------- Resultado da simulação ---------- */ .resultado-simulacao{margin-top:22px;padding:24px;border-radius:var(--r); background:var(--azul-suave);border:1px solid var(--azul-borda)} .resultado-simulacao h3{margin-top:0} .pontos-grande{font-size:2.2rem;font-weight:800;color:var(--azul);line-height:1.1; margin:0 0 8px;letter-spacing:-.03em} /* ---------- Busca ---------- */ .busca-form label{display:block;font-size:.86rem;font-weight:700;color:var(--texto-2);margin-bottom:8px} .busca-linha{display:flex;gap:12px;flex-wrap:wrap} .busca-linha input{flex:1 1 190px} .busca-linha .btn{flex:0 0 auto} /* ---------- Passos numerados ---------- */ .passos{counter-reset:passo;list-style:none;padding:0;margin:22px 0 0} .passos>li{counter-increment:passo;position:relative;padding-left:60px;margin-bottom:26px} .passos>li:last-child{margin-bottom:0} .passos>li::before{ content:counter(passo);position:absolute;left:0;top:0;width:42px;height:42px; background:linear-gradient(150deg,var(--azul),var(--azul-escuro));color:#fff;border-radius:50%; display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem; box-shadow:0 3px 9px rgba(1,93,170,.26); } .passos h3{margin:6px 0 6px;font-size:1.08rem} .passos p{margin:0;color:var(--texto-2)} /* ---------- Listas ---------- */ .lista-comparacao,.lista-alerta,.lista-check{list-style:none;padding:0;margin:20px 0 0} .lista-comparacao li,.lista-alerta li,.lista-check li{ padding:15px 0 15px 36px;position:relative;border-bottom:1px solid var(--borda);color:var(--texto-2)} .lista-comparacao li:last-child,.lista-alerta li:last-child,.lista-check li:last-child{border-bottom:0} .lista-comparacao li::before{content:"→";position:absolute;left:0;top:15px;color:var(--azul);font-weight:800} .lista-alerta li::before{content:"✕";position:absolute;left:0;top:15px;color:var(--vermelho);font-weight:800} .lista-check li::before{content:"✓";position:absolute;left:0;top:15px;color:var(--verde-escuro);font-weight:800} .card ul:not([class]),.card ol:not([class]){padding-left:24px} .card ul:not([class]) li,.card ol:not([class]) li{margin-bottom:10px;color:var(--texto-2)} /* ---------- Destaque de conceito ---------- */ .destaque-info{background:var(--azul-suave);border:1px solid var(--azul-borda); border-left:4px solid var(--azul);padding:20px 24px;border-radius:var(--r);margin:22px 0} .destaque-info p:last-child{margin-bottom:0} .destaque-info strong{color:var(--azul-escuro)} /* ---------- Alertas ---------- */ .alerta{background:var(--laranja-suave);border:1px solid #f6dcae;border-left:4px solid var(--laranja); padding:17px 20px;border-radius:var(--r);color:#7c3f08;font-size:.97rem} .alerta a{color:#7c3f08;font-weight:700} .card-alerta{border-color:#f5cdca;background:#fffbfb} .card-alerta h2{color:var(--vermelho)} /* ---------- FAQ ---------- */ .faq-lista{margin-top:8px} details{border:1px solid var(--borda);border-radius:var(--r);margin-bottom:12px; background:var(--card);overflow:hidden;transition:border-color .15s} details:hover{border-color:var(--borda-forte)} details[open]{border-color:var(--azul-borda)} summary{padding:18px 54px 18px 22px;cursor:pointer;font-weight:700;position:relative; list-style:none;font-size:1.02rem;line-height:1.5;color:var(--texto)} summary::-webkit-details-marker{display:none} summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%); font-size:1.5rem;color:var(--laranja-texto);font-weight:400;line-height:1} details[open] summary::after{content:"−"} details[open] summary{border-bottom:1px solid var(--borda);background:var(--card-2)} .faq-resposta{padding:20px 22px} .faq-resposta p{margin:0;color:var(--texto-2)} /* ---------- Relacionadas ---------- */ .grid-relacionadas{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:16px} .card-link{display:block;padding:20px;border:1px solid var(--borda);border-radius:var(--r); text-decoration:none;background:var(--card-2); transition:border-color .16s,transform .16s,background .16s,box-shadow .16s} .card-link:hover{border-color:var(--azul-borda);background:var(--card); transform:translateY(-3px);box-shadow:var(--sombra-3)} .card-link-cluster{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.09em; color:var(--azul);font-weight:800;margin-bottom:7px} .card-link-titulo{display:block;color:var(--texto);font-size:1.03rem;line-height:1.32; margin-bottom:6px;font-weight:700} .card-link-desc{display:block;font-size:.87rem;color:var(--texto-3);line-height:1.5} /* ========================================================================== BOTÃO DE AÇÃO ANIMADO (.btn-acao) -------------------------------------------------------------------------- Sistema reutilizável: aplique .btn-acao em qualquer .btn-primario que seja a ação principal da página (gerar, simular, conferir). São três camadas independentes, todas em propriedades aceleradas por GPU (transform e opacity), sem repintura de layout: ::before halo cônico girando ao redor da borda ::after varredura de brilho atravessando a superfície :active afundamento tátil no clique O giro usa @property para animar um ângulo de verdade. Navegador sem suporte (Firefox < 128, Safari < 16.4) simplesmente não anima o halo e mostra o botão sólido — nada quebra. ========================================================================== */ @property --angulo-halo { syntax: ''; initial-value: 0deg; inherits: false; } /* O fundo do próprio botão é o gradiente cônico girando: ele aparece como um anel de luz de 2px porque o ::after cobre todo o miolo. Fazer o halo ser o background (e não um ::before em inset negativo) é o que permite manter overflow:hidden para a varredura sem cortar o anel. */ .btn-acao, .btn-acao:hover{ position:relative; isolation:isolate; overflow:hidden; z-index:0; background:conic-gradient( from var(--angulo-halo), #a8560a 0deg, #e08a2e 70deg, #ffc76b 130deg, #e08a2e 190deg, #a8560a 260deg, #a8560a 360deg ); animation:halo-girar 4.5s linear infinite; } /* Miolo sólido: cobre o cônico e deixa só a borda luminosa à mostra. */ .btn-acao::after{ content:''; position:absolute; inset:2px; border-radius:inherit; z-index:-1; background:linear-gradient(135deg,#a8560a,#8d4708); transition:background .18s ease; } .btn-acao:hover::after{background:linear-gradient(135deg,#b85f0c,#964c07)} /* Varredura de brilho: um clarão diagonal cruzando o botão. */ .btn-acao .btn-brilho{ position:absolute; top:0; bottom:0; left:-60%; width:45%; z-index:1; pointer-events:none; background:linear-gradient( 100deg, transparent 0%, rgba(255,255,255,.10) 35%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.10) 65%, transparent 100% ); transform:skewX(-18deg); animation:brilho-varrer 4.5s ease-in-out infinite; } /* O conteúdo precisa ficar acima das duas camadas de fundo. */ .btn-acao > *:not(.btn-brilho){position:relative;z-index:2} .btn-acao:active{transform:translateY(1px) scale(.985)} /* Estado de trabalho: o halo acelera por uma volta logo após gerar, dando resposta visual imediata ao clique. Removido pelo JS quando termina. */ .btn-acao.gerando{animation-duration:.9s} .btn-acao.gerando .btn-brilho{animation-duration:.9s} .btn-acao.gerando .btn-icone{animation:icone-girar .55s cubic-bezier(.4,0,.2,1)} .btn-icone{transition:transform .2s ease} .btn-acao:hover .btn-icone{transform:rotate(-25deg)} @keyframes icone-girar{ from{transform:rotate(0)} to{transform:rotate(360deg)} } @keyframes halo-girar{ to{--angulo-halo:360deg} } @keyframes brilho-varrer{ 0%, 100% {left:-60%} 55%, 100% {left:130%} } /* Fallback: sem @property o ângulo não anima e o anel ficaria congelado numa posição arbitrária. Aí o botão volta ao gradiente sólido de sempre. */ @supports not (background:conic-gradient(from var(--angulo-halo),#000,#fff)){ .btn-acao,.btn-acao:hover{background:linear-gradient(135deg,#a8560a,#8d4708);animation:none} .btn-acao::after{display:none} } /* ---------- Barra de distribuição nas tabelas de análise ---------- */ .barra-dist{ display:block;min-width:90px;height:9px;border-radius:var(--r-full); background:var(--azul-suave);overflow:hidden; } .barra-dist-preenchida{ display:block;height:100%;border-radius:inherit; background:linear-gradient(90deg,var(--azul),var(--azul-vivo)); } :root[data-tema="escuro"] .barra-dist{background:#1d2b40} /* ========================================================================== REVELAÇÃO DAS DEZENAS — estilo cassino -------------------------------------------------------------------------- A bola aparece embaralhando números e "trava" da esquerda para a direita. O embaralhamento é feito em JS (trocando o texto); aqui ficam só os dois estados visuais: .embaralhando enquanto os números giram .travada estalo no instante em que o número final fixa ========================================================================== */ .bola.embaralhando{ animation:bola-surge .18s ease-out both; /* Números girando mudam de largura e fariam a bola tremer sem isto. */ font-variant-numeric:tabular-nums; } .bola.embaralhando::after{ content:''; position:absolute; inset:0; border-radius:50%; background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 55%); pointer-events:none; } .bola.travada{ animation:bola-trava .34s cubic-bezier(.2,1.5,.4,1) both; } @keyframes bola-surge{ from{opacity:0;transform:scale(.86)} to{opacity:1;transform:scale(1)} } @keyframes bola-trava{ 0%{ transform:scale(1.26); box-shadow:0 0 0 6px rgba(22,168,109,.34),0 3px 7px rgba(10,102,66,.32); } 60%{transform:scale(.95)} 100%{ transform:scale(1); box-shadow:0 3px 7px rgba(10,102,66,.32),inset 0 -2px 5px rgba(0,0,0,.13); } } /* Bolas de outras loterias mantêm a cor do halo coerente com a sua paleta. */ .bolas-quina .bola.travada,.bolas-loto .bola.travada{animation-name:bola-trava-neutra} @keyframes bola-trava-neutra{ 0%{transform:scale(1.26);box-shadow:0 0 0 6px rgba(90,79,224,.3),0 3px 7px rgba(0,0,0,.28)} 60%{transform:scale(.95)} 100%{transform:scale(1);box-shadow:0 3px 7px rgba(0,0,0,.28),inset 0 -2px 5px rgba(0,0,0,.13)} } @media (prefers-reduced-motion:reduce){ /* O JS já pula o embaralhamento; isto cobre o caso de a classe ficar aplicada por qualquer motivo. */ .bola.embaralhando,.bola.travada{animation:none!important} .bola.embaralhando::after{display:none} } /* ---------- Gerador multi-loteria ---------- */ .gerador-multi .campo[hidden]{display:none} /* ---------- Índice completo do cluster (página-hub) ---------- */ .indice-cluster-desc{color:var(--texto-3);font-size:.93rem;margin:0 0 18px} .indice-cluster-lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:10px;list-style:none;padding:0;margin:0} .indice-cluster-lista a{display:block;padding:13px 16px;border:1px solid var(--borda); border-radius:var(--r);text-decoration:none;background:var(--card-2); transition:border-color .16s,background .16s} .indice-cluster-lista a:hover{border-color:var(--azul-borda);background:var(--card)} .indice-cluster-lista strong{display:block;color:var(--texto);font-size:.95rem; font-weight:700;line-height:1.32} .indice-cluster-lista span{display:block;margin-top:4px;font-size:.82rem; color:var(--texto-3);line-height:1.45} /* ---------- Botão compacto em tabela (gerador por signo) ---------- */ .btn-mini{background:var(--azul);color:#fff;border:none;border-radius:var(--r-full); padding:7px 16px;font-size:.82rem;font-weight:700;font-family:inherit;cursor:pointer; min-height:32px;transition:background .15s} .btn-mini:hover{background:var(--azul-escuro)} .signo-saida{display:inline-block;margin-left:10px;font-weight:700;font-size:.9rem; color:var(--azul);font-variant-numeric:tabular-nums;letter-spacing:.02em} /* ---------- Glossário ---------- */ .glossario{display:grid;gap:0;margin:22px 0 0} .glossario div{padding:18px 0;border-bottom:1px solid var(--borda)} .glossario div:last-child{border-bottom:0} .glossario dt{font-weight:800;color:var(--texto);margin-bottom:5px;font-size:1.02rem} .glossario dd{margin:0;color:var(--texto-2);font-size:.97rem} /* ---------- Texto legal ---------- */ .texto-legal h2{font-size:1.24rem;margin-top:34px;padding-top:26px;border-top:1px solid var(--borda)} .texto-legal h2:first-of-type{margin-top:0;padding-top:0;border-top:0} .texto-legal p,.texto-legal li{color:var(--texto-2)} /* ---------- Rodapé ---------- */ .rodape{background:#0b1420;color:#a3b0c2;padding:62px 0 30px;margin-top:76px} .rodape-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:34px;margin-bottom:46px} .rodape-col h3{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.1em; margin:0 0 14px;font-weight:800} .rodape-col ul{list-style:none;padding:0;margin:0} .rodape-col li{margin-bottom:2px} /* padding vertical garante alvo de toque de 24px+ no celular */ .rodape-col a{display:inline-block;color:#cbd5e1;text-decoration:none;font-size:.91rem; line-height:1.5;padding:6px 0;min-height:24px;transition:color .15s} .rodape-col a:hover{color:#ffb43d;text-decoration:underline} .rodape-aviso{border-top:1px solid #1e2c40;padding-top:30px;font-size:.88rem;line-height:1.68} .rodape-aviso strong{color:#e7edf5} .rodape-aviso a{color:#8fbdf0} .aviso-idade{color:#ffc266;font-weight:700;margin-top:14px} .copyright{margin:18px 0 0;color:#7e8ca1;font-size:.84rem} .dados-ocultos{display:none} /* ========================================================================== Responsivo ========================================================================== */ @media (max-width:900px){ .menu-toggle{display:block} /* order 3 mantém o menu aberto SEMPRE abaixo da linha da logo e dos botões, mesmo estando antes deles no HTML (ordem do DOM pensada para o teclado) */ .nav{flex-basis:100%;margin-left:0;display:none;padding-bottom:14px;order:3} .nav.aberto{display:block} .nav ul{flex-direction:column;gap:2px} .nav a{padding:13px 14px} /* com o menu recolhido, os botões precisam ir para a direita sozinhos */ .cabecalho-acoes{margin-left:auto} .cabecalho{position:static} } @media (max-width:680px){ body{font-size:16px} .wrap{padding-inline:18px} .card{padding:24px 20px;border-radius:var(--r);margin-top:20px} .hero{padding:32px 0 4px} .hero-lead{font-size:1.04rem} .volante{grid-template-columns:repeat(6,1fr);gap:7px} .dezena{font-size:.86rem} .bola{width:46px;height:46px;font-size:1rem} .bolas-grandes .bola{width:50px;height:50px;font-size:1.06rem} .bola-mini{width:38px;height:38px;font-size:.88rem} .bolas{gap:8px} .btn{width:100%;flex:1 1 100%} .contador{gap:10px} .contador-item{min-width:70px;padding:12px 14px} .contador-item strong{font-size:1.5rem} .passos>li{padding-left:50px} .passos>li::before{width:36px;height:36px;font-size:.95rem} .barra{width:64px} .jogo-linha{justify-content:flex-start} .rodape{padding:46px 0 26px;margin-top:56px} .rodape-grid{gap:26px;margin-bottom:34px} th,td{padding:11px 14px} } /* ========================================================================== Modo escuro ========================================================================== */ /* ========================================================================== MODO ESCURO O site e claro por padrao. O escuro so entra quando o visitante escolhe, via botao no cabecalho, que grava data-tema="escuro" no . Nao usamos prefers-color-scheme de proposito: o padrao e sempre claro. ========================================================================== */ :root[data-tema="escuro"]{ --texto:#e9eef6; /* 14,8:1 sobre o card escuro */ --texto-2:#b4c0d2; /* 8,4:1 */ --texto-3:#93a1b6; /* 5,6:1 */ --fundo:#0a111c; --card:#131c2b; --card-2:#1a2434; --borda:#25324a; --borda-forte:#33425e; --azul:#5aa3ee; /* clareado para 6,5:1 sobre fundo escuro */ --azul-vivo:#7db9f4; --azul-escuro:#0b3a68; --azul-suave:#152941; --azul-borda:#2b4568; --laranja-texto:#ffb552; /* 8,9:1 sobre o card escuro */ --laranja-suave:#2b1f0d; --verde-escuro:#4bd39a; /* clareado para leitura em fundo escuro */ --verde-suave:#0f2a20; --vermelho:#f98b83; --vermelho-suave:#2a1614; --sombra-1:0 1px 2px rgba(0,0,0,.4); --sombra-2:0 1px 3px rgba(0,0,0,.45); --sombra-3:0 4px 14px rgba(0,0,0,.5); --sombra-4:0 12px 30px rgba(0,0,0,.55); } [data-tema="escuro"] .cabecalho{background:rgba(19,28,43,.9)} [data-tema="escuro"] .faixa-topo{background:linear-gradient(96deg,#04223f,#0b4a86 55%,#0f5da6)} [data-tema="escuro"] .visor{background:linear-gradient(170deg,#1a2434,#131c2b);border-color:var(--azul-borda)} [data-tema="escuro"] .card-premio{background:linear-gradient(168deg,#131c2b,#152941)} [data-tema="escuro"] .mini-card,[data-tema="escuro"] .painel-item,[data-tema="escuro"] .card-link,[data-tema="escuro"] .tabela-scroll,[data-tema="escuro"] details{background:var(--card-2)} [data-tema="escuro"] table{background:transparent} [data-tema="escuro"] thead th{background:#1e2939;color:var(--texto-3);border-bottom-color:var(--borda-forte)} [data-tema="escuro"] tbody tr:hover td,[data-tema="escuro"] tbody tr:hover th{background:#1e2939} [data-tema="escuro"] details[open] summary{background:#1e2939} [data-tema="escuro"] select,[data-tema="escuro"] input[type=number],[data-tema="escuro"] input[type=text]{background:var(--card-2);border-color:var(--borda-forte);color:var(--texto)} [data-tema="escuro"] select:focus,[data-tema="escuro"] input:focus{box-shadow:0 0 0 3px rgba(90,163,238,.2)} [data-tema="escuro"] .dezena{background:var(--card-2);border-color:var(--borda-forte);color:var(--texto-2)} [data-tema="escuro"] .dezena[aria-pressed=true]{background:#1c6dc0;border-color:#2a86e0;color:#fff} [data-tema="escuro"] .alerta{background:#2b1f0d;border-color:#5c451c;border-left-color:#c9860f;color:#ffcf8a} [data-tema="escuro"] .alerta a{color:#ffcf8a} [data-tema="escuro"] .card-alerta{background:#231416;border-color:#5c2c2c} [data-tema="escuro"] .card-alerta h2{color:#f98b83} [data-tema="escuro"] .nota code,[data-tema="escuro"] code{background:#212d40;color:var(--texto-2)} [data-tema="escuro"] .barra{background:#25324a} [data-tema="escuro"] .linha-total td,[data-tema="escuro"] .linha-total th{background:#1e2939} [data-tema="escuro"] .tag{background:#25324a;color:var(--texto-2)} [data-tema="escuro"] .btn-primario{background:linear-gradient(135deg,#d4780a,#b0600c);box-shadow:0 4px 14px rgba(0,0,0,.4)} [data-tema="escuro"] .btn-primario:hover{background:linear-gradient(135deg,#e08b1c,#c26a05)} /* No escuro o botão de ação mantém o anel girando: as duas regras acima têm especificidade maior que .btn-acao e apagariam o cônico. O miolo usa tons mais quentes para não afundar no fundo escuro. */ [data-tema="escuro"] .btn-acao, [data-tema="escuro"] .btn-acao:hover{ background:conic-gradient( from var(--angulo-halo), #b0600c 0deg, #e8952b 70deg, #ffd27f 130deg, #e8952b 190deg, #b0600c 260deg, #b0600c 360deg ); } [data-tema="escuro"] .btn-acao::after{background:linear-gradient(135deg,#d4780a,#b0600c)} [data-tema="escuro"] .btn-acao:hover::after{background:linear-gradient(135deg,#e08b1c,#c26a05)} [data-tema="escuro"] .btn-secundario{background:#1c6dc0} [data-tema="escuro"] .btn-secundario:hover{background:#2a86e0} [data-tema="escuro"] .rodape{background:#060c15} [data-tema="escuro"] .hero::before{background:radial-gradient(circle,rgba(90,163,238,.09),transparent 68%)} [data-tema="escuro"] .destaque-info{background:var(--azul-suave);border-color:var(--azul-borda);border-left-color:var(--azul)} [data-tema="escuro"] .destaque-info strong{color:var(--azul-vivo)} [data-tema="escuro"] .card-link:hover{background:#1e2939} /* ========================================================================== Preferências do usuário ========================================================================== */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} .btn:hover,.card-link:hover,.dezena:active{transform:none} /* O botão de ação precisa de tratamento próprio: a regra acima só encurta a duração, e num loop infinito isso vira estroboscópio em vez de "sem animação". Aqui o halo e o brilho são removidos de fato, e o botão fica sólido — que é o que quem pediu menos movimento espera. */ .btn-acao,.btn-acao:hover{animation:none!important;background:linear-gradient(135deg,#a8560a,#8d4708)} .btn-acao .btn-brilho{display:none} .btn-acao::after{display:none} .btn-acao:active{transform:none} .btn-icone,.btn-acao:hover .btn-icone{transform:none} } @media print{ .faixa-topo,.cabecalho,.rodape,.botoes,.breadcrumb,#relacionadas,.volante{display:none} .card{border:1px solid #ccc;box-shadow:none;break-inside:avoid;margin-top:16px} body{background:#fff;font-size:11pt;color:#000} a::after{content:" (" attr(href) ")";font-size:9pt;color:#555} }