/* ========================================================================== fezinha.css — a plataforma de bolões: paleta, chão e componentes. A mecânica (escala, reset, papéis de tipo, coluna, vidro, movimento) vem de base.css, que é cópia local e não conhece paleta nenhuma. Aqui moram os tokens, o e as telas. ========================================================================== */ :root { /* ---------- Fezinha · chão branco, tinta verde ---------- */ --fz-bg: #ffffff; --fz-fg: #14180f; --fz-fg-2: #4e5848; /* 6,9:1 sobre o painel */ --fz-fg-3: #636d62; /* 4,9:1 — o mínimo que passa AA em texto miúdo */ /* Superfícies em alfa do verde da marca. Calibradas uma contra a outra: quem está por cima é mais forte, nunca mais fraco. Sobre branco: --fz-card .045 → ~#f5f9f5 --fz-campo .055 → ~#f2f8f3 --fz-elevado .085 → ~#ecf4ed O degrau de .045 para .085 é o que faz o hover acender de verdade. */ --fz-card: rgba(38, 138, 50, 0.045); --fz-campo: rgba(38, 138, 50, 0.055); --fz-elevado: rgba(38, 138, 50, 0.085); --fz-faixa: rgba(38, 138, 50, 0.075); --fz-linha: rgba(20, 24, 15, 0.08); --fz-fio: rgba(20, 24, 15, 0.045); /* o fio de 1px por dentro do card */ --fz-primaria: #268a32; --fz-primaria-hover:#1d6f27; --fz-sobre-primaria:#ffffff; --fz-primaria-fraca:rgba(38, 138, 50, 0.12); /* Verde de DESTAQUE: superfície verde que carrega texto branco miúdo. Existe separado da --fz-primaria porque esta foi calibrada para botão, onde o texto é grande e 4,4:1 basta. Sob rótulo e cifra miúdos o mesmo verde reprova no AA; este dá 6,1:1 com branco, e 4,9:1 com o secundário abaixo. */ --fz-destaque: #1d6f27; /* O escurecido do destaque, para hover de superfície verde. Clarear seria o idioma do resto do projeto, mas aqui clarear anda para o --fz-primaria e derruba o branco de 6,26:1 para 4,41:1 — abaixo do AA. Então acende para dentro: 7,60:1. */ --fz-destaque-hover:#16611f; --fz-sobre-destaque-2: rgba(255, 255, 255, 0.85); --fz-magenta: #c91d8f; /* --game-lotofacil-primary do controle */ --fz-atencao: #8a6100; --fz-atencao-bg:rgba(245, 165, 36, 0.12); --fz-foco: #0b6fd1; /* A luz de fundo. Mesma geometria da aurora Paggins, cores trocadas: os tokens da marca com 62% de branco, a mesma proporção nos dois para a relação entre eles não mudar ao clarear. --fz-primaria #268a32 + 62% branco → #acd3b1 --fz-magenta #c91d8f + 62% branco → #de9ecd Sobre branco a luz TINGE em vez de acender, então os alfas são baixos: acima disto o papel deixa de ser papel e vira fundo colorido. */ --fz-luz: radial-gradient(1500px 720px at 34% -20%, rgba(172, 211, 177, 0.34), transparent 66%), radial-gradient(1100px 600px at 84% -28%, rgba(222, 158, 205, 0.10), transparent 68%), radial-gradient(1800px 900px at 96% 104%, rgba(172, 211, 177, 0.16), transparent 68%), linear-gradient(180deg, rgba(172, 211, 177, 0.10) 0px, rgba(172, 211, 177, 0.04) 340px, rgba(172, 211, 177, 0.012) 620px, transparent 1000px); /* ---------- os quatro papéis que base.css espera ---------- */ --foco: var(--fz-foco); --tinta-3: var(--fz-fg-3); --superficie: var(--fz-card); --fio: var(--fz-fio); } body { margin: 0; background-color: var(--fz-bg); background-image: var(--fz-luz); background-attachment: fixed; /* a luz fica ancorada na tela, não rola */ background-repeat: no-repeat; color: var(--fz-fg); font-family: var(--fonte); font-weight: 400; /* Trava de eixo óptico: a face atual não tem opsz, mas se um dia entrar uma que tenha, o Chrome interpola sozinho pelo font-size e pode furar glifo. */ font-optical-sizing: none; font-size: 0.875rem; line-height: 1.55; padding-bottom: var(--barra-h); -webkit-font-smoothing: antialiased; } /* ========================================================================== Fezinha — plataforma de bolões. Mecânica da Paggins, pele branca com tinta verde. Peso único: hierarquia por tamanho, cor e espaço. Sem traçado. ========================================================================== */ /* ---------- cabeçalho ---------- */ .fz-head { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, 0.72); /* Sem fio embaixo: com a abertura em branco, a linha era a única coisa desenhando uma borda onde não há degrau de superfície nenhum. Ao rolar, quem separa o cabeçalho do conteúdo é o borrão do backdrop-filter — que é diferença de superfície, o critério do projeto, e não traçado. */ backdrop-filter: blur(20px) saturate(140%); } /* min-height, não height: abaixo de 896px os destinos descem para uma segunda linha e o cabeçalho tem de poder crescer. Com height fixo eles sairiam por baixo do backdrop-filter. */ .fz-head .wrap { display: flex; align-items: center; gap: var(--e-5); min-height: 4rem; flex-wrap: wrap; } .fz-logo { display: flex; align-items: center; text-decoration: none; } /* Altura manda, largura acompanha: o lockup é 947×186, e travar a largura deformaria. O width/height no HTML existe só para o navegador reservar o espaço antes de o arquivo chegar e não sacudir o cabeçalho. */ .fz-marca { display: block; height: 1.5rem; width: auto; } /* Quem empurra para a direita agora é a conta, não a navegação: os destinos ficam encostados na marca, que é a ordem de leitura que eles têm. */ .fz-nav { display: flex; gap: var(--e-1); align-items: center; flex-wrap: wrap; } .fz-conta { display: flex; gap: var(--e-2); align-items: center; margin-inline-start: auto; } .fz-nav a, .fz-conta a { display: inline-flex; align-items: center; min-height: var(--toque); text-decoration: none; font-size: 0.8125rem; color: var(--fz-fg-2); padding: 0.4rem 0.75rem; border-radius: var(--raio-pill); transition: background var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease); } .fz-nav a:hover, .fz-conta a:hover { background: var(--fz-elevado); color: var(--fz-fg); } /* ENTRAR é a única AÇÃO do cabeçalho — o resto são destinos. Por isso é o único que vira cápsula cheia: cor sólida é o que diz "isto faz alguma coisa", e gastá-la em quatro links seguidos não diria nada. --fz-destaque (#1d6f27) e NÃO --fz-primaria (#268a32), que é o verde dos botões: o rótulo tem 0,8125rem, que no root de 125% é 16,25px — texto miúdo para o WCAG, não texto grande. Branco sobre #268a32 dá 4,41:1 e reprova o AA; sobre #1d6f27 dá 6,26:1. O --fz-destaque existe no projeto exatamente para superfície verde que carrega texto branco miúdo. */ .fz-conta .entrar { background: var(--fz-destaque); color: var(--fz-sobre-primaria); padding-inline: var(--e-4); } .fz-conta .entrar:hover { background: var(--fz-destaque-hover); color: var(--fz-sobre-primaria); } .fz-nav a[aria-current="page"] { background: var(--fz-campo); color: var(--fz-fg); } /* O MESMO ponto de virada do comparador, 896px, e não 768. Entre os dois havia uma faixa em que a linha do comparador já estava empilhada e o cabeçalho ainda estava inteiro: dois regimes de largura discordando na mesma tela. */ @media (max-width: 56rem) { .fz-head .wrap { gap: var(--e-3) var(--e-4); padding-block: var(--e-3); } /* Linha própria, largura inteira, espalhados pela faixa — é o que dá alvo grande sem hambúrguer nenhum. Largura NATURAL, não `flex: 1`: em partes iguais cada destino ficaria com ~86px em 390px, e "Resultados" não cabe nisso. Soltos, os quatro somam ~310px numa faixa de ~359px e entram na linha; abaixo disso quebram para a segunda, que ainda é melhor do que sumir. */ .fz-nav { order: 3; flex-basis: 100%; gap: var(--e-1); justify-content: space-between; } .fz-nav a { padding-inline: var(--e-2); } } .cart-btn { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--fz-campo); color: var(--fz-fg); border-radius: var(--raio-pill); padding: 0.4rem 0.8rem; min-height: var(--toque); font-size: 0.8125rem; text-decoration: none; transition: background var(--t-rapido) var(--ease); } .cart-btn:hover { background: var(--fz-elevado); } .cart-btn b { font-family: var(--fonte-num); } /* ---------- botões ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; font: inherit; font-size: 0.8125rem; line-height: 1; height: 2.5rem; padding-inline: 1.25rem; border: 0; border-radius: var(--raio-pill); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease), transform var(--t-rapido) var(--ease); } .btn:active { transform: scale(.985); } /* SUPERFÍCIE VERDE COM TINTA BRANCA usa o --fz-destaque, não o --fz-primaria. Medido em 22/09/2026: branco sobre #268a32 dá 4,41:1, e o rótulo do botão tem 0,8125rem — 16,25px no root de 125%, que é texto MIÚDO para o WCAG, não texto grande. O mínimo é 4,5 e ele não alcança. Sobre #1d6f27 dá 6,26:1. O comentário do --fz-destaque no :root já dizia isto desde sempre; o botão é que não tinha sido revisto. Visualmente é o mesmo verde da marca, um tom mais fundo. O --fz-primaria continua onde ele funciona: tinta sobre branco, fio, barra, e o realce da abertura, que é texto de display e passa com folga no critério de 3:1. */ .btn-primary { background: var(--fz-destaque); color: var(--fz-sobre-primaria); } .btn-primary:hover { background: var(--fz-destaque-hover); } .btn-ghost { background: var(--fz-campo); color: var(--fz-fg); } .btn-ghost:hover { background: var(--fz-elevado); } .btn-block { width: 100%; } .btn-sm { height: 2rem; padding-inline: 0.9rem; font-size: 0.75rem; } .btn[disabled] { opacity: .45; cursor: not-allowed; } /* ---------- superfícies ---------- */ .painel { background: var(--fz-card); border-radius: var(--raio-card); box-shadow: inset 0 1px 0 0 var(--fz-fio); backdrop-filter: blur(16px) saturate(130%); padding: 1.4rem; } .painel h3 { margin: 0 0 0.9rem; font-size: 1rem; letter-spacing: -.015em; } /* ---------- bilhete: a forma, escrita uma vez ---------- */ /* Retângulo com o entalhe redondo no meio das duas laterais. O entalhe é buraco de verdade, feito por máscara, e não um círculo pintado por cima — pintar não serviria, porque a superfície é alfa e o círculo somaria opacidade em vez de abrir o que está atrás. São duas máscaras que se cruzam: cada uma tira o seu lado, e o intersect guarda só o que sobrou nas duas. Quem usa a classe escolhe o raio do corte e a altura em que ele mora. */ .bilhete { --entalhe: 0.5rem; --entalhe-y: 50%; border-radius: var(--raio-card); box-shadow: inset 0 1px 0 0 var(--fz-fio); -webkit-mask-image: radial-gradient(circle var(--entalhe) at 0 var(--entalhe-y), #0000 calc(var(--entalhe) - .5px), #000 var(--entalhe)), radial-gradient(circle var(--entalhe) at 100% var(--entalhe-y), #0000 calc(var(--entalhe) - .5px), #000 var(--entalhe)); -webkit-mask-composite: source-in; mask-image: radial-gradient(circle var(--entalhe) at 0 var(--entalhe-y), #0000 calc(var(--entalhe) - .5px), #000 var(--entalhe)), radial-gradient(circle var(--entalhe) at 100% var(--entalhe-y), #0000 calc(var(--entalhe) - .5px), #000 var(--entalhe)); mask-composite: intersect; } .loteria { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; } .loteria .dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; flex: none; } /* ---------- abertura ---------- */ /* A abertura ocupa a tela inteira abaixo do cabeçalho. svh e não vh: no telefone o vh conta a barra do navegador que some ao rolar, e a dobra fica maior que a tela de verdade. */ .hero { min-height: calc(100svh - 4rem - var(--barra-h)); display: grid; /* stretch: quem centraliza agora é a linha 1fr do .hero-wrap */ padding-block: 2.5rem; /* Branco opaco, não o verde em alfa: a abertura é a tela, não um card nela. Sendo opaco, ele tapa a luz de fundo nesta faixa — é o preço de o branco ser branco de verdade, e é o que põe o bilhete sobre papel limpo. */ background: var(--fz-bg); box-shadow: inset 0 -1px 0 0 var(--fz-fio); } @media (max-width: 48rem) { .hero { min-height: 0; padding-block: 1.6rem; } } /* Uma coluna e tudo no eixo da tela: centralizar só o texto deixaria o título centrado dentro da coluna da esquerda, e não dentro da abertura. */ .hero-card { display: grid; gap: 1.8rem; justify-items: center; text-align: center; } .hero-jogo { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; flex-wrap: wrap; } .chip-loteria { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--fonte-num); font-size: 0.625rem; letter-spacing: .12em; text-transform: uppercase; background: var(--fz-campo); border-radius: var(--raio-pill); padding: 0.25rem 0.7rem; } .chip-loteria .dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; } /* A entrelinha abre aqui, e não no papel .t-display: o fundo de um inline cobre a caixa de conteúdo da fonte, que no corpo de display já é quase a altura da linha — sem esta folga o verde encostaria na linha de cima. */ .hero h1 { margin: 0 auto; max-width: 18ch; text-wrap: balance; line-height: 1.22; } /* ---------- a entrada da abertura ---------- Tudo aqui nasce no ESTADO FINAL. A intro é opt-in: o JS põe .intro antes do primeiro quadro e tira quando acaba. Sem JS, ou com prefers-reduced-motion, a tela simplesmente já está pronta — nunca fica presa num estado parcial. */ /* duas linhas porque cada uma tem tratamento próprio, não por quebra estética */ .ht-linha { display: block; } /* Realce da segunda linha, em duas camadas: embaixo a tinta escura, que já está lá desde o primeiro quadro; em cima o verde com texto branco, que entra por corte de clip-path — varredura da esquerda para a direita, não opacidade. Branco sobre o verde da marca é o mesmo par do botão primário: corpo grande, o AA pede 3:1 e este dá 4,4:1. */ .realce { position: relative; display: inline-block; } .realce-txt { display: block; padding: 0.06em 0.28em; } .realce-capa { position: absolute; inset: 0; padding: 0.06em 0.28em; background: var(--fz-primaria); color: var(--fz-sobre-primaria); border-radius: var(--raio-campo); clip-path: inset(0 0 0 0); /* Esta duração é o par de ESPERA_VARREDURA em app.js, que decide QUANDO a varredura é solta. Os dois andam juntos: aqui o quanto dura, lá o quando. E ela entra na conta de ESPERA_CIFRA, que existe para a cifra assentar só DEPOIS daqui — encurtar ou esticar este número sem refazer aquela conta inverte a ordem das duas etapas. */ transition: clip-path 440ms var(--ease); } /* fechado e sem transição enquanto a intro monta: senão ele varreria já na primeira troca de classe, antes de o título começar a ser digitado */ .hero-titulo.intro .realce-capa { clip-path: inset(0 100% 0 0); transition: none; } .premio { margin-top: 1.4rem; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; } /* a cifra do prêmio é a única coisa colorida da abertura: o verde da marca, pelo token — cor não se escreve no componente */ .premio .val { font-family: var(--fonte-num); font-size: clamp(1.8rem, 4vw, 3.1rem); letter-spacing: -.045em; line-height: 1; color: var(--fz-primaria); } /* Só na abertura: a cifra vai ao eixo. A classe é compartilhada com a página do bolão, que segue à esquerda — por isso o centramento mora aqui e não nela. Precisa de justify-content e não de text-align: o .premio é flex, e num flex quem posiciona o item é o container, não o alinhamento de texto herdado. */ .hero .premio { justify-content: center; } /* Duas linhas: a coluna no 1fr, que a centraliza na sobra, e o aviso no auto, que por isso encosta no pé da seção em vez de seguir o bloco centralizado. */ .hero-wrap { display: grid; grid-template-rows: 1fr auto; align-items: center; } /* O aviso ao pé da abertura. O tamanho vem do papel .t-meta, nunca escrito aqui; esta regra diz só a cor discreta, a medida curta e o respiro mínimo para ele não encostar na coluna quando a tela é baixa. */ .hero-nota { margin: 1.5rem auto 0; max-width: 46ch; color: var(--fz-fg-3); text-align: center; } /* O bilhete grande da abertura. O corte não fica no meio por acaso: ele mora na emenda entre o canhoto e o corpo, que é o que o faz ler como picote em vez de enfeite. Uma variável serve aos dois, então a altura e o corte não desalinham. Separa por diferença de superfície e não por traço: o canhoto é o alfa mais forte (.085), o corpo o intermediário (.055), sobre a abertura (.045). */ .hero-bilhete { --canhoto: 3.2rem; --entalhe: 1rem; --entalhe-y: var(--canhoto); width: 100%; max-width: 32rem; /* auto nas laterais: o bilhete é mais estreito que a coluna da abertura, e sem isso encostaria na esquerda dela em vez de ficar no eixo */ margin: 1.8rem auto 0; overflow: hidden; /* para o canhoto respeitar o raio do bilhete */ background: var(--fz-campo); text-align: center; } .hb-topo { height: var(--canhoto); /* baseline e não center: os dois textos têm fonte e corpo diferentes, então centrar as CAIXAS deixa as linhas de base 7px fora de esquadro — e é a base que o olho lê como "mesma altura". Funciona porque flex-wrap deixa o container multilinha, e aí quem centra a linha na altura é o align-content. */ display: flex; align-items: baseline; justify-content: center; /* align-content também resolve a quebra no telefone: sem ele o padrão (stretch) afasta as duas linhas para encher a altura do canhoto */ align-content: center; gap: 0.2rem 0.7rem; flex-wrap: wrap; padding-inline: 1.6rem; background: var(--fz-elevado); } /* Tinta comum, não cor de modalidade: na abertura há uma loteria só, então a cor não distingue nada — só disputa atenção com o prêmio e com os botões. A cor de código fica para a vitrine e a página do bolão, onde há mais de uma modalidade lado a lado e ela tem o que fazer. O cinza é o mesmo do .rotulo ao lado (--fz-fg-3), para os dois lerem como um par só e o destaque ficar todo com o prêmio. */ .hero-bilhete .loteria { font-size: 0.875rem; color: var(--fz-fg-3); } .hb-corpo { display: grid; gap: 1.1rem; padding: 1.4rem 1.5rem 1.5rem; } .hero-bilhete .premio { margin: 0; } /* No telefone o nome e o concurso não cabem lado a lado: o canhoto cresce, e o corte acompanha sozinho porque lê a mesma variável. */ @media (max-width: 48rem) { .hero-bilhete { --canhoto: 4.2rem; } } /* os metadados viram uma linha sob as ações; empilham sozinhos quando não cabem */ .hero-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.35rem 1.4rem; } .hero-meta .lin { font-size: 0.75rem; color: var(--fz-fg-2); } .hero-meta .lin b { font-family: var(--fonte-num); color: var(--fz-fg); } .hero-actions { margin-top: 1.8rem; display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; } @media (max-width: 48rem) { .hero-card { gap: 1.4rem; } } /* ---------- vitrine: os concursos em cartaz, desfilando ---------- */ /* Fita contínua, não slides. É a mesma lista impressa quatro vezes andando o tamanho de uma cópia: no fim do ciclo a cópia 2 está exatamente onde a 1 começou, então o corte não aparece e não há "slide atual" que peça bolinha. Só demonstração — não abre bolão nem leva a lugar nenhum. */ .vitrine { padding-block: clamp(0.9rem, 2.2vw, 1.5rem); background: var(--fz-faixa); box-shadow: inset 0 -1px 0 0 var(--fz-fio); overflow: hidden; /* a fita nasce e morre no vazio, em vez de ser decepada pela borda da tela */ mask-image: linear-gradient(90deg, transparent, #000 clamp(1.5rem, 8vw, 6rem), #000 calc(100% - clamp(1.5rem, 8vw, 6rem)), transparent); } .vitrine-fita { display: flex; width: max-content; gap: 0.6rem; animation: desfile 34s linear infinite; } /* passar o mouse segura a fita para dar tempo de ler */ .vitrine:hover .vitrine-fita { animation-play-state: paused; } /* -100%/cópias, menos meio gap: o gap entra uma vez a mais que os cartões */ @keyframes desfile { to { transform: translateX(calc(-25% - 0.15rem)); } } /* O cartão é um bilhete: retângulo de canto vivo com o entalhe redondo no meio das duas laterais. O entalhe é buraco de verdade, feito por máscara, e não um círculo pintado por cima — pintar não serviria aqui, porque a superfície é alfa e o círculo somaria opacidade em vez de abrir a faixa que está atrás. São duas máscaras que se cruzam: cada uma tira o seu lado, e o intersect guarda só o que sobrou nas duas. */ /* a forma vem de .bilhete; aqui é só o recheio */ .vit-card { display: grid; gap: 0.2rem; align-content: center; flex: none; padding: 0.75rem 1.5rem; /* maior que o entalhe, senão o texto entra no corte */ /* elevado e não card: o bilhete está POR CIMA da faixa (.075), e a regra dos alfas é que quem está em cima é mais forte — com .045 ele sumia no fundo */ background: var(--fz-elevado); white-space: nowrap; } .vit-premio { font-size: 1rem; color: var(--fz-fg); letter-spacing: -.02em; } .vit-conc { color: var(--fz-fg-3); } /* A regra global de reduced-motion encurta a animação para .001ms, e numa fita infinita isso vira tremor. Aqui ela para de vez e a faixa fica rolável. */ @media (prefers-reduced-motion: reduce) { .vitrine { mask-image: none; overflow-x: auto; } .vitrine-fita { animation: none !important; } } /* ---------- a explicação da cota, antes da lista ---------- */ .passos { background: var(--fz-faixa); padding-block: clamp(2rem, 5vw, 4rem); } .passos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 3rem); } .passo { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; } .passo .n { font-family: var(--fonte-num); font-size: 0.6875rem; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; flex: none; border-radius: 50%; color: var(--fz-fg-2); background: var(--fz-elevado); } .passo h3 { margin: 0 0 0.15rem; font-size: 0.875rem; letter-spacing: -.01em; } .passo p { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--fz-fg-2); } @media (max-width: 48rem) { .passos-grid { grid-template-columns: 1fr; gap: 1rem; } } /* ---------- seções ---------- */ .sec { padding-block: clamp(2.4rem, 5vw, 4.5rem); } .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .sec-head h2 { margin: 0; } .sec-sub { margin: 0.35rem 0 0; color: var(--fz-fg-2); font-size: 0.8125rem; max-width: 60ch; } .ordenar { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; } .ordenar .lbl { margin-inline-end: 0.25rem; } .ordenar button { display: inline-flex; align-items: center; min-height: var(--toque); font: inherit; font-size: 0.75rem; cursor: pointer; padding: 0.4rem 0.8rem; border: 0; border-radius: var(--raio-pill); background: var(--fz-campo); color: var(--fz-fg-2); transition: background var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease); } /* A faixa de ordenação é a primeira linha DO comparador, encostada no cabeçalho de coluna que ela governa. Ela não é um card à parte: o fio por dentro, embaixo, é o que a separa do cabeçalho sem virar outra superfície. */ .cmp-ordenar { gap: var(--e-2); padding: var(--e-3) var(--e-4); box-shadow: inset 0 -1px 0 0 var(--fz-fio); } .cmp-ordenar .lbl { margin-inline-end: var(--e-1); } .ordenar button:hover { background: var(--fz-elevado); color: var(--fz-fg); } /* 0,75rem = 15px: texto miúdo, mesmo caso do botão. 4,41 -> 6,26. */ .ordenar button[aria-pressed="true"] { background: var(--fz-destaque); color: var(--fz-sobre-primaria); } /* ---------- comparador de bolões ---------- */ .comparador { /* A tese do produto e um rodapé de seção tinham o mesmo afastamento de 1,1rem. Agora o comparador se descola do título em um passo (e-5) e a faixa de confiança, que é outro assunto, em dois (e-6). */ margin-top: var(--e-5); background: var(--fz-card); border-radius: var(--raio-card); box-shadow: inset 0 1px 0 0 var(--fz-fio); backdrop-filter: blur(16px) saturate(130%); overflow: hidden; } .cmp-head, .cmp-row { display: grid; grid-template-columns: minmax(9rem, 1.6fr) 5.5rem 4.5rem minmax(8rem, 1.2fr) 6.5rem; gap: 0.9rem; align-items: center; padding: 0.7rem 1.2rem; } .cmp-head { background: var(--fz-faixa); } /* O estado da ordenação morava só no botão. Aqui ele aparece TAMBÉM na coluna que foi escolhida, que é onde o olho vai conferir se a lista obedeceu. */ .cmp-head .col-on { color: var(--fz-destaque); } .cmp-row { text-decoration: none; color: inherit; box-shadow: inset 0 1px 0 0 var(--fz-fio); transition: background var(--t-rapido) var(--ease); } .cmp-row:hover { background: var(--fz-elevado); } /* A célula vira linha: o texto empilhado à esquerda e o selo empurrado para a direita por margem automática, centrado na altura. O wrap é o que garante que ele desça em vez de espremer o nome quando a coluna encurta. */ .cmp-row .id { display: flex; align-items: center; gap: 0.6rem 0.9rem; flex-wrap: wrap; } .cmp-row .id-txt { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .cmp-row .id .nome { font-size: 0.875rem; letter-spacing: -.01em; display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; } .cmp-row .id .nome .dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; flex: none; } .cmp-row .id .sub { font-family: var(--fonte-num); font-size: 0.625rem; color: var(--fz-fg-3); } .cmp-row .cota { font-family: var(--fonte-num); font-size: 0.9375rem; } .cmp-row .chances { font-family: var(--fonte-num); font-size: 0.8125rem; color: var(--fz-fg-2); } .efic { display: flex; align-items: center; gap: 0.6rem; } /* Era `flex: 1 1 auto`, e por isso a ÚNICA coisa da linha que crescia com a tela — crescendo sem ganhar informação, porque o valor já está impresso ao lado, em .v. Agora ela tem tamanho de medidor: cresce até 5rem e para. */ .efic .bar { flex: 0 1 5rem; height: 0.3rem; border-radius: var(--raio-pill); background: var(--fz-primaria-fraca); overflow: hidden; min-width: 2.5rem; } .efic .bar i { display: block; height: 100%; background: var(--fz-primaria); border-radius: var(--raio-pill); } .efic .v { font-family: var(--fonte-num); font-size: 0.8125rem; flex: none; } /* VERDE COMO TINTA tem o mesmo problema do verde como fundo, e mais um pouco: #268a32 sobre branco dá 4,41:1, e sobre a superfície do card (#f5faf6) cai para 4,17 — o card é verde em alfa, então ele APROXIMA o fundo da tinta. 0,75rem é texto miúdo; o mínimo é 4,5. Com --fz-destaque: 6,26 e 5,93. O --fz-primaria fica onde ele passa: a cifra do prêmio, que é display de 36 a 62px e joga no critério de 3:1, e o accent-color do rádio, que é componente e não texto. */ .cmp-row .go { text-align: right; font-size: 0.75rem; color: var(--fz-destaque); } .cmp-cell-lbl { display: none; } @media (max-width: 56rem) { .cmp-head { display: none; } .cmp-row { grid-template-columns: 1fr 1fr; gap: 0.5rem 0.9rem; padding: 1rem; align-items: start; } .cmp-row .id, .cmp-row .efic, .cmp-row .go { grid-column: 1 / -1; } .cmp-row .go { text-align: left; } .cmp-cell-lbl { display: block; font-family: var(--fonte-num); font-size: 0.5625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fz-fg-3); } } /* ---------- a linha de melhor eficiência ---------- */ /* Ela não leva um aviso dentro: ela É o aviso. O container inteiro vira verde e o rótulo ocupa a largura toda, acima dos números — que continuam ali, porque é a comparação que justifica o destaque. O verde é o --fz-destaque, mais fundo que o da marca: aqui há rótulo e cifra miúdos em branco por cima, e o verde de botão reprovaria no AA. */ .cmp-melhor { background: var(--fz-destaque); color: var(--fz-sobre-primaria); } /* O selo fica AO LADO do nome, dentro do .nome, que é flex com wrap: quando não cabe ele desce para a própria linha em vez de espremer ou cobrir o nome. Invertido em relação ao resto da linha — pílula branca com tinta verde — porque branco sobre branco em alfa daria 4,6:1, no limite; assim dá 6,3:1. O tamanho vem do papel .t-mini, no markup. */ .cmp-selo { display: inline-flex; align-items: center; flex: none; /* SEM margem automática. Ela repartia a sobra da célula dos dois lados, e com a coluna a 752px isso largava o selo a ~450px do nome que ele qualifica — proximidade é o que diz que os dois se referem um ao outro. Com a coluna com teto o vão já encolheu; tirar o auto é o que fecha a distância. */ background: var(--fz-sobre-primaria); color: var(--fz-destaque); border-radius: var(--raio-pill); padding: 0.1rem 0.55rem; white-space: nowrap; } /* O secundário sobre o verde: branco puro em tudo achataria a hierarquia que a linha comum tem entre nome, concurso e número. */ .cmp-melhor .id .sub, .cmp-melhor .chances, .cmp-melhor .cmp-cell-lbl { color: var(--fz-sobre-destaque-2); } .cmp-melhor .go { color: var(--fz-sobre-primaria); } .cmp-melhor .efic .bar { background: rgba(255, 255, 255, 0.22); } .cmp-melhor .efic .bar i { background: var(--fz-sobre-primaria); } /* Hover não pode clarear para o verde da marca: o texto miúdo perderia o AA. Sobe uma lâmina de branco em alfa, que é como o resto do projeto acende. */ .cmp-melhor:hover { background: var(--fz-destaque); box-shadow: inset 0 1px 0 0 var(--fz-fio), inset 0 0 0 999px rgba(255, 255, 255, 0.06); } /* ---------- faixa de confiança ---------- */ .confianca { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-3); margin-top: var(--e-6); } .confianca div { background: var(--fz-card); border-radius: var(--raio-card); box-shadow: inset 0 1px 0 0 var(--fz-fio); padding: 1rem 1.1rem; } .confianca h4 { margin: 0 0 0.2rem; font-size: 0.8125rem; } .confianca p { margin: 0; font-size: 0.75rem; color: var(--fz-fg-2); line-height: 1.45; } @media (max-width: 48rem) { .confianca { grid-template-columns: 1fr; } } /* ---------- página do bolão ---------- */ .bolao-top { display: grid; grid-template-columns: 1fr 19rem; gap: 1.6rem; align-items: start; padding-block: 2rem; } @media (max-width: 56rem) { .bolao-top { grid-template-columns: 1fr; gap: 1.2rem; } } .linha { display: flex; justify-content: space-between; gap: 0.9rem; padding: 0.5rem 0; font-size: 0.8125rem; box-shadow: 0 1px 0 0 var(--fz-fio); } .linha:last-of-type { box-shadow: none; } .linha dt { color: var(--fz-fg-2); margin: 0; } .linha dd { margin: 0; font-family: var(--fonte-num); } .linha.total { margin-top: 0.4rem; padding-top: 0.8rem; font-size: 0.9375rem; box-shadow: inset 0 1px 0 0 var(--fz-linha); } .linha.total dd { font-size: 1.125rem; } .progresso { height: 0.35rem; border-radius: var(--raio-pill); background: var(--fz-primaria-fraca); overflow: hidden; margin: 0.2rem 0 0.4rem; } .progresso i { display: block; height: 100%; background: var(--fz-primaria); } .jogos-registrados { display: grid; gap: 0.4rem; margin-top: 0.3rem; } .jogo-linha { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; padding: 0.55rem 0.7rem; border-radius: var(--raio-campo); background: var(--fz-campo); } .jogo-linha .rot { font-family: var(--fonte-num); font-size: 0.625rem; color: var(--fz-fg-3); width: 2rem; flex: none; } .dz { font-family: var(--fonte-num); font-size: 0.6875rem; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--fz-elevado); color: var(--fz-fg); } /* 0,6875rem = 13,75px, o menor dos casos: 4,41 -> 6,26. */ .dz.hit { background: var(--fz-destaque); color: var(--fz-sobre-primaria); } /* ---------- volante ---------- */ .volante-wrap { display: grid; grid-template-columns: 1fr 19rem; gap: 1.6rem; align-items: start; padding-block: 2rem; } @media (max-width: 56rem) { .volante-wrap { grid-template-columns: 1fr; } } .volante { background: var(--fz-card); border-radius: var(--raio-card); box-shadow: inset 0 1px 0 0 var(--fz-fio); backdrop-filter: blur(16px) saturate(130%); padding: 1.4rem; } .volante-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.9rem; flex-wrap: wrap; } .volante-head h2 { margin: 0; font-size: 1rem; letter-spacing: -.015em; } .volante-head .regra { font-size: 0.75rem; color: var(--fz-fg-2); } .grade { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.3rem; margin-top: 1rem; max-width: 22rem; } .grade.mega { grid-template-columns: repeat(10, 1fr); max-width: 34rem; } @media (max-width: 36rem) { .grade { max-width: none; } .grade.mega { grid-template-columns: repeat(6, 1fr); max-width: none; } } .cel { aspect-ratio: 1 / 1; border: 0; border-radius: var(--raio-campo); background: var(--fz-campo); color: var(--fz-fg); font-family: var(--fonte-num); font-size: 0.8125rem; cursor: pointer; display: grid; place-items: center; transition: background var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease), transform var(--t-rapido) var(--ease); } .cel:hover:not([aria-pressed="true"]):not([disabled]) { background: var(--fz-elevado); } .cel:active { transform: scale(.94); } /* A CÉLULA MARCADA usa a cor PROFUNDA da modalidade, não a cor de identidade. Branco sobre as cores de identidade, em 0,8125rem: Mega-Sena #268a32 dá 4,41 e Lotofácil da Independência #e61b89 dá 4,30 — as duas reprovam. As profundas, que já estavam no dados.js e não são invenção minha, dão 7,45 / 7,39 / 6,56 / 9,22. A loteria continua identificada pela cor; o que muda é a profundidade dela onde há tinta branca miúda por cima. O fallback acompanha: --fz-destaque, não --fz-primaria. */ .cel[aria-pressed="true"] { background: var(--marca-deep, var(--fz-destaque)); color: var(--fz-sobre-primaria); } .cel[disabled] { color: var(--fz-fg-3); cursor: not-allowed; opacity: .5; } .surpresinha { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin-top: 1rem; } .surpresinha select { font: inherit; font-size: 0.75rem; padding: 0.4rem 0.6rem; border: 0; border-radius: var(--raio-campo); background: var(--fz-campo); color: var(--fz-fg); cursor: pointer; } .contador { display: flex; align-items: baseline; gap: 0.45rem; } .contador .q { font-family: var(--fonte-num); font-size: 1.625rem; letter-spacing: -.03em; } .contador .falta { font-size: 0.75rem; color: var(--fz-fg-2); } /* ---------- trilha do funil ---------- */ .trilha { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding-block: 1.2rem; } .trilha .et { display: flex; align-items: center; gap: 0.45rem; font-size: 0.75rem; color: var(--fz-fg-3); } .trilha .et .n { font-family: var(--fonte-num); font-size: 0.625rem; width: 1.25rem; height: 1.25rem; display: grid; place-items: center; border-radius: 50%; background: var(--fz-campo); } .trilha .et[aria-current="step"] { color: var(--fz-fg); } /* 0,625rem = 12,5px: 4,41 -> 6,26. */ .trilha .et[aria-current="step"] .n { background: var(--fz-destaque); color: var(--fz-sobre-primaria); } /* 0,75rem: 4,17 sobre o card -> 5,93. */ .trilha .et.feito { color: var(--fz-destaque); } /* No passo concluído o ícone JÁ É a bolinha — disco com o tique vazado. Sem fundo: ele apareceria como um anel em volta do disco. Sem padding: ele existe para centrar dígito, e aqui não há dígito. O tique é buraco, então quem passa por ele é o fundo da seção. */ .trilha .et.feito .n { /* O tique é gráfico, não texto, então o mínimo dele seria 3:1 e o verde da marca passaria. Acompanha o rótulo mesmo assim: os dois são o mesmo estado, e vê-los em tons diferentes de verde leria como dois estados. */ background: none; color: var(--fz-destaque); padding: 0; } .trilha .et.feito .n svg { display: block; width: 100%; height: 100%; } .trilha .tr { width: 1rem; height: 1px; background: var(--fz-linha); } @media (max-width: 36rem) { .trilha .tr { width: 0.5rem; } } /* ---------- carrinho / checkout ---------- */ .duas { display: grid; grid-template-columns: 1fr 20rem; gap: 1.6rem; align-items: start; padding-block: 1.6rem; } @media (max-width: 56rem) { .duas { grid-template-columns: 1fr; } } .item { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; align-items: start; padding: 0.9rem 0; box-shadow: 0 1px 0 0 var(--fz-fio); } .item:last-child { box-shadow: none; } .item .tit { font-size: 0.875rem; display: flex; align-items: center; gap: 0.45rem; } .item .tit .dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; flex: none; } .item .det { grid-column: 1; font-family: var(--fonte-num); font-size: 0.625rem; color: var(--fz-fg-3); } .item .val { font-family: var(--fonte-num); font-size: 0.9375rem; text-align: right; } /* Era texto sublinhado de 0,6875rem SEM padding nenhum: ~13px de alvo, num produto cujo piso declarado é o público idoso. O sublinhado fica — é o que diz que é acionável — e a caixa cresce em volta dele, com margem negativa para o texto não se deslocar na tela. */ .item .rm { grid-column: 1; justify-self: start; background: none; border: 0; display: inline-flex; align-items: center; min-height: var(--toque); padding-inline: var(--e-2); margin-inline-start: calc(var(--e-2) * -1); border-radius: var(--raio-campo); font: inherit; font-size: 0.6875rem; color: var(--fz-fg-3); cursor: pointer; text-decoration: underline; } .item .rm:hover { background: var(--fz-campo); } .item .rm:hover { color: var(--fz-fg); } .item .dezenas { grid-column: 1 / -1; display: flex; gap: 0.25rem; flex-wrap: wrap; } .item .dezenas .dz { width: 1.4rem; height: 1.4rem; font-size: 0.625rem; } .pagamento { display: grid; gap: 0.5rem; margin-top: 0.3rem; } .opcao { display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: center; border-radius: var(--raio-campo); padding: 0.9rem 1rem; cursor: pointer; background: var(--fz-campo); transition: background var(--t-rapido) var(--ease), box-shadow var(--t-rapido) var(--ease); } .opcao:hover { background: var(--fz-elevado); } .opcao:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--fz-primaria); } .opcao input { accent-color: var(--fz-primaria); width: 1rem; height: 1rem; } .opcao .nome { font-size: 0.875rem; } .opcao .obs { font-size: 0.6875rem; color: var(--fz-fg-2); } .opcao .sld { font-family: var(--fonte-num); font-size: 0.8125rem; } .opcao.indisp { opacity: .5; } .aviso { display: flex; gap: 0.6rem; align-items: flex-start; background: var(--fz-atencao-bg); color: var(--fz-atencao); border-radius: var(--raio-campo); padding: 0.75rem 0.9rem; font-size: 0.75rem; line-height: 1.45; margin-top: 0.9rem; } .aviso svg { flex: none; margin-top: .1rem; } /* ---------- autenticação ---------- */ .auth { display: grid; grid-template-columns: 1fr 23rem; gap: 2.5rem; align-items: center; padding-block: 3rem; } @media (max-width: 56rem) { .auth { grid-template-columns: 1fr; gap: 1.6rem; padding-block: 1.8rem; } } .auth-pitch h1 { margin: 0 0 0.6rem; text-wrap: balance; } .auth-pitch p { margin: 0 0 1.2rem; color: var(--fz-fg-2); font-size: 0.9375rem; max-width: 44ch; } .auth-pitch ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .auth-pitch li { display: flex; align-items: center; gap: 0.55rem; font-size: 0.8125rem; color: var(--fz-fg-2); } .auth-card { background: var(--fz-card); border-radius: var(--raio-card); box-shadow: inset 0 1px 0 0 var(--fz-fio); backdrop-filter: blur(16px) saturate(130%); padding: 1.5rem; } .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.2rem; background: var(--fz-campo); border-radius: var(--raio-pill); padding: 0.2rem; margin-bottom: 1.2rem; } .tabs button { font: inherit; font-size: 0.8125rem; padding: 0.5rem; border: 0; border-radius: var(--raio-pill); background: transparent; color: var(--fz-fg-2); cursor: pointer; transition: background var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease); } .tabs button[aria-selected="true"] { background: var(--fz-bg); color: var(--fz-fg); } .campo { display: grid; gap: 0.3rem; margin-bottom: 0.8rem; } .campo label { font-size: 0.6875rem; color: var(--fz-fg-2); } .campo input { font: inherit; font-size: 0.875rem; padding: 0.7rem 0.8rem; border: 0; border-radius: var(--raio-campo); background: var(--fz-campo); color: var(--fz-fg); transition: box-shadow var(--t-rapido) var(--ease); } .campo input::placeholder { color: var(--fz-fg-3); } .campo input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--fz-primaria); } .mini { font-size: 0.6875rem; color: var(--fz-fg-3); } /* ---------- rodapé ---------- */ .fz-foot { background: var(--fz-faixa); margin-top: 2.5rem; padding-block: 2rem 1.6rem; } .foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 1.6rem; } @media (max-width: 48rem) { .foot-grid { grid-template-columns: 1fr 1fr; gap: 1.2rem; } } .fz-foot h4 { margin: 0 0 0.5rem; font-family: var(--fonte-num); font-size: 0.5625rem; letter-spacing: .13em; text-transform: uppercase; color: var(--fz-fg-3); } .fz-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; } .fz-foot a { font-size: 0.75rem; color: var(--fz-fg-2); text-decoration: none; } .fz-foot a:hover { color: var(--fz-fg); } .legal { margin-top: 1.5rem; padding-top: 1.1rem; box-shadow: inset 0 1px 0 0 var(--fz-linha); font-size: 0.6875rem; color: var(--fz-fg-3); line-height: 1.55; max-width: 90ch; } .idade { display: inline-flex; align-items: center; font-family: var(--fonte-num); font-size: 0.625rem; background: var(--fz-elevado); border-radius: var(--raio-pill); padding: 0.1rem 0.5rem; margin-inline-end: 0.5rem; } /* ---------- resultado ---------- */ /* GRADE, não flex com margem automática. O terceiro bloco levava um margin-inline-start:auto inline que empurrava o prêmio até a borda de 1718px e abria ~700px de nada no meio. Aqui quem fica com a sobra é a coluna do meio — as dezenas — e ela GANHA com a largura, porque quebra menos. O prêmio encosta na direita por estrutura, não por margem. */ .resultado { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--e-4) var(--e-5); margin-top: var(--e-4); padding: var(--e-4) var(--e-5); border-radius: var(--raio-card); background: var(--fz-card); box-shadow: inset 0 1px 0 0 var(--fz-fio); } .resultado .dzs { display: flex; gap: var(--e-1); flex-wrap: wrap; } .res-quando { font-size: 0.75rem; color: var(--fz-fg-2); margin-top: 0.1rem; } .res-pago { text-align: right; } .res-pago .num { font-size: 1rem; } .res-ganhadores { font-size: 0.625rem; color: var(--fz-fg-3); } /* No estreito as três viram uma só, e o prêmio volta a ler da esquerda: texto alinhado à direita numa coluna estreita é o que mais custa a quem tem vista ruim, que é o piso declarado deste produto. */ @media (max-width: 48rem) { .resultado { grid-template-columns: 1fr; gap: var(--e-3); } .res-pago { text-align: left; } } /* ---------- clique é aperto, em tudo que responde ao clique ---------- */ /* O idioma é o de base.css. Aqui ele é aplicado por SELETOR, e não por uma classe posta no markup, por dois motivos: não passa a existir clicável que alguém esqueceu de marcar, e a lista de tudo que responde ao clique fica auditável num lugar só. Não é um seletor genérico (`a:active`) de propósito: transform não se aplica a link inline dentro de parágrafo, então a regra genérica prometeria um aperto que boa parte dos casos não entregaria. */ .fz-nav a, .cart-btn, .fz-logo, .cmp-row, .ordenar button, .ordenar a, .tabs button, .item .rm, .opcao, .fz-foot a, .sec-mais { transition-property: background, color, transform; transition-duration: var(--t-rapido); transition-timing-function: var(--ease); } .fz-nav a:active, .cart-btn:active, .fz-logo:active, .ordenar button:active, .ordenar a:active, .tabs button:active, .item .rm:active, .fz-foot a:active, .sec-mais:active { transform: scale(.985); } /* Superfície larga aperta menos. A linha do comparador tem 1300px e a opção de pagamento ocupa a coluna inteira: em .985 o deslocamento da borda vira sobressalto, e o que se quer é o toque. */ .cmp-row:active, .opcao:active { transform: scale(.995); } /* Link de rodapé é inline, e transform não se aplica a inline não-substituído. Vira inline-block só para poder apertar — não muda o fluxo, cada um já está sozinho no seu

. */ .fz-foot a { display: inline-block; } /* ========================================================================== RESULTADOS ========================================================================== */ /* O .ordenar já veste os botões do comparador. Aqui o filtro é NAVEGAÇÃO — cada modalidade é uma rota própria, compartilhável, e o rodapé aponta direto para ela —, então são e o estado ativo é aria-current, não aria-pressed. As duas formas dividem o mesmo visual de propósito: é o mesmo gesto. */ .ordenar a { font-size: 0.75rem; text-decoration: none; padding: 0.4rem 0.8rem; border-radius: var(--raio-pill); background: var(--fz-campo); color: var(--fz-fg-2); } .ordenar a:hover { background: var(--fz-elevado); color: var(--fz-fg); } .ordenar a[aria-current] { background: var(--fz-destaque); color: var(--fz-sobre-primaria); } .res-lista { display: grid; gap: 0.8rem; margin-top: 1.4rem; } .res { padding: clamp(1rem, 2.2vw, 1.4rem); border-radius: var(--raio-card); background: var(--fz-card); box-shadow: inset 0 1px 0 0 var(--fz-fio); backdrop-filter: blur(16px) saturate(130%); } .res-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; } .res-conc { margin-top: 0.15rem; } .res-data { font-size: 0.75rem; color: var(--fz-fg-2); } .res .dzs { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-top: 0.9rem; } /* Rateio é DADO TABULAR de verdade: acertos, ganhadores e prêmio se cruzam. Então é com

, não pilha de div fingindo linha — quem lê por leitor de tela ouve a coluna junto com o valor. */ /* Teto próprio, além do da coluna: são três colunas de número. Sem ele, "Acertos" ficava numa borda e "Prêmio" na outra, e o olho tinha de atravessar a linha inteira para casar os dois. */ /* SEM teto próprio. Ele já esteve aqui e foi erro: a tabela parava em 38rem enquanto o card seguia com a largura da coluna inteira, então só a data "Sorteado em" chegava na borda direita e o resto morria no meio — duas larguras discordando dentro do mesmo card. Quem tem teto agora é a COLUNA da tela (.col-estreita), e a tabela ocupa o card inteiro. */ .rateio { width: 100%; border-collapse: collapse; margin-top: var(--e-4); font-size: 0.8125rem; } .rateio th, .rateio td { text-align: end; padding: 0.45rem 0; box-shadow: 0 1px 0 0 var(--fz-fio); } .rateio th:first-child, .rateio td:first-child { text-align: start; } .rateio thead th { font-weight: 400; font-size: 0.6875rem; letter-spacing: .04em; text-transform: uppercase; color: var(--fz-fg-3); } .rateio tbody tr:last-child td { box-shadow: none; } /* Acumulou é a única faixa que muda de cor: é informação, não decoração. */ /* 0,8125rem: 4,17 sobre o card -> 5,93. */ .rateio .acum td { color: var(--fz-destaque); } .res-nota { margin-top: 1.4rem; font-size: 0.6875rem; color: var(--fz-fg-3); line-height: 1.55; max-width: 80ch; } /* No telefone as três colunas com cifra de seis dígitos ficam no limite: cede no tipo antes de deixar a tabela furar a goteira. */ @media (max-width: 26rem) { .rateio { font-size: 0.75rem; } .rateio thead th { font-size: 0.625rem; } } /* Saída da seção da home para a tela cheia. */ .sec-mais { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8125rem; color: var(--fz-destaque); text-decoration: none; } .sec-mais:hover { color: var(--fz-destaque-hover); } /* Filho de grade: sem min-width:0 o bloco não encolhe abaixo do conteúdo e empurra as outras colunas quando o nome da loteria é longo. */ .res-quem { min-width: 0; }