` e não ``: com `` dentro, o par de
rádios ganha nome de grupo nativo ("Ciclo de cobrança") sem `aria-label`,
e é o navegador que garante o anúncio. O preço disso são três resets — o
fieldset traz borda, margem e `min-inline-size: min-content` de fábrica, e
o `min-inline-size` é o que faz um fieldset ignorar largura de container e
estourar a calha. */
.ciclo2 {
display: inline-flex;
gap: 2px;
/* `position: relative` NÃO É DECORAÇÃO. Os rádios são `position: absolute`
para sair da tela sem sair do foco; sem um ancestral posicionado aqui
eles se ancoram na `.calha` e vão parar no topo da seção, onde ficam
debaixo de outro elemento. Achado no teste: o clique no rádio não mudava
o estado, porque o rádio não estava onde o alternador está. */
position: relative;
margin: 2rem 0 0;
padding: 2px;
min-inline-size: 0;
border: 1px solid var(--p-border);
border-radius: var(--radius-control);
background: var(--p-sunken);
}
/* O rádio some da tela mas continua no foco e na árvore de acessibilidade —
é ele que dá o anúncio "selecionado" e a navegação por seta de graça. Usa
a `.sr` da casa; aqui só a posição precisa ser absoluta em relação ao
próprio alternador. */
.ciclo2 input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.ciclo2 label {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 2.75rem;
min-width: 5.5rem;
padding: 0.5rem 1rem;
border-radius: 2px;
color: var(--p-muted);
font-size: var(--text-cell);
font-weight: 600;
cursor: pointer;
transition: background-color var(--dur-base) var(--ease-out),
color var(--dur-base) var(--ease-out);
}
.ciclo2 input:checked + label {
background: var(--p-surface);
color: var(--p-ink);
box-shadow: var(--shadow-raise);
}
/* O foco fica no RÓTULO porque o rádio é invisível: sem isto, quem navega por
teclado perde o cursor dentro do alternador. */
.ciclo2 input:focus-visible + label {
/* AS DUAS CAMADAS TAMBEM AQUI, e o motivo e que redefinir `outline` sem
redefinir a sombra DESFAZ metade do anel global sem avisar. A regra global
usa duas camadas concentricas em cores opostas porque esta pagina nao tem
um fundo unico — o mesmo botao cai sobre papel, sobre faixa escura, sobre
a foto do estadio e sobre o canvas da parede. Anel de uma cor so e aposta
que perde em algum desses quatro, e perde justamente para quem depende
dele. Achado por `infra/checar-mobile.mjs`. */
/* 3px/7px, igual a regra global: ver o comentario dela no `site.css` — com
2px de fio a 2px de distancia o anel nao sobrevive ao antisserrilhado nas
quinas de um alvo grande. */
outline: 2px solid var(--p-ink);
outline-offset: 2px;
box-shadow: 0 0 0 6px var(--p-bg);
}
/* ---- O ÂMBAR DA SEÇÃO, E ELE É UM SÓ ------------------------------------
Regra da casa: um foco de âmbar por tela, e o âmbar é do Professor. Na
mesma rolagem havia TRÊS candidatos meus — a pastilha "2 meses grátis" no
alternador, a pastilha "Os dois mundos" no cartão da união e o botão
"Assinar o Analista" — mais um botão âmbar cheio da seção vizinha.
Quatro focos disputando não é ênfase, é ruído.
DECIDIDO: o âmbar CHEIO desta seção é o botão "Assinar o Analista", porque
é o único ponto onde alguém converte. Os dois selos abaixo desistem do
âmbar; o fio âmbar de 3px e as hastes do cartão da união continuam, porque
fio não é preenchimento e o trabalho deles é estrutural (marcar qual plano
é o recomendado e de onde ele vem), não chamar atenção para si.
O selo de desconto vai para VERDE-GARRAFA, que é o token do positivo neste
sistema: "você economiza" é exatamente o que ele diz. */
.selo-desc {
display: inline-flex;
align-items: center;
padding: 0.125rem 0.375rem;
border-radius: var(--radius-control);
background: var(--p-signal-dim);
color: var(--p-signal);
font-size: var(--text-tick);
font-weight: 700;
letter-spacing: var(--track-caps);
text-transform: uppercase;
line-height: var(--leading-dense);
}
/* O selo da união é identidade, não oferta: fio e tinta, sem preenchimento
de cor. Ele diz QUEM é o plano; o botão âmbar diz o que fazer. */
.selo-uniao {
display: inline-flex;
align-items: center;
padding: 0.1875rem 0.5rem;
border: 1px solid var(--p-border-strong);
border-radius: var(--radius-control);
color: var(--p-ink);
font-size: var(--text-tick);
font-weight: 700;
letter-spacing: var(--track-caps);
text-transform: uppercase;
line-height: var(--leading-dense);
}
/* --- A GRADE 2+1 --------------------------------------------------------
Em 360px é uma coluna e ZERO rolagem lateral — o número que motivou a
reescrita. Em ≥48rem os dois territórios ficam lado a lado e o Analista
atravessa a largura inteira dos dois.
------------------------------------------------------------------------- */
.terrs {
display: grid;
gap: 0.75rem;
margin-top: 1.25rem;
}
@media (min-width: 48rem) {
.terrs { grid-template-columns: 1fr 1fr; }
.uniao { grid-column: 1 / -1; }
}
/* --- CARTÃO DE TERRITÓRIO ----------------------------------------------- */
.terr,
.uniao {
display: grid;
/* `1fr` na penúltima faixa empurra o botão para o rodapé: lista mais longa
em um território não desalinha o botão do outro. É a mesma trava que a
versão em tabela precisou, e aqui ela é de graça porque cada cartão é um
grid de verdade — não uma célula de tabela, que `display:grid` retiraria
do algoritmo de tabela (foi assim que as colunas empilharam com os topos
em 449/681/916 na tentativa anterior). */
grid-template-rows: auto auto auto 1fr auto;
/* 1rem e não 1.25rem: a página inteira tem 13,8 telas em 390px e o
coordenador aceitou o custo de altura desta seção com a condição de eu
aplicar a minha própria lista de corte. 4px de padding por lado, em três
cartões, é o corte mais barato que não tira informação de ninguém. */
padding: 1rem;
border: 1px solid var(--p-border);
border-radius: var(--radius-card);
background: var(--p-surface);
}
/* O fio de território, à esquerda: 3px NOS TRÊS cartões. A versão antiga dava
o fio de 3px só ao destacado e empurrava o conteúdo dele 3px em relação aos
vizinhos — destaque que desalinha é pior que destaque nenhum. Aqui os três
reservam o mesmo espaço e só a COR diferencia. */
.terr { border-left: 3px solid var(--p-border-strong); }
.terr[data-plano="cartoleiro"] { border-left-color: var(--p-cartola); }
.terr[data-plano="analista"] { border-left-color: var(--p-info); }
.terr__terr {
display: block;
font-size: var(--text-label);
font-weight: 600;
letter-spacing: var(--track-caps);
text-transform: uppercase;
line-height: var(--leading-dense);
color: var(--p-faint);
}
.terr__nome,
.uniao__nome {
/* RITMO EM PASSO DE 4px. A versão antiga media 8 / 12 / 7 / 16px entre os
elementos da coluna — quatro vãos sem unidade comum, e o mais APERTADO
(7px) separava a cifra da própria nota, enquanto um mais FOLGADO (8px)
separava rótulo de nome, que são a mesma informação. É isto que se lê
como "espaçamento estranho" mesmo com as colunas perfeitamente
alinhadas. Aqui a escala é 8 / 12 / 8 / 16, tudo múltiplo de 4. */
margin-top: 0.5rem;
font-family: var(--font-body);
font-size: var(--text-lead);
font-weight: 700;
letter-spacing: -0.015em;
line-height: var(--leading-dense);
color: var(--p-ink);
}
/* --- O PREÇO ------------------------------------------------------------
As DUAS variantes de ciclo vivem no HTML e o CSS escolhe qual aparece
(ver o bloco `:has()` mais abaixo). `display: none` na inativa é
deliberado: ela sai também da árvore de acessibilidade, então o leitor de
tela nunca lê os dois preços em sequência.
------------------------------------------------------------------------- */
.val { margin-top: 0.75rem; }
.val__linha {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.375rem;
}
/* 56px, E ELE PRECISAVA DE UM DEGRAU PRÓPRIO. Medido: o preço usava
`--text-figure` (36px) e o `` da seção usa 38px — o preço PERDIA do
título da própria seção de preço. O dono: "não dá nem pra enxergar na parte
de preço".
O `R$` acompanha em 40% do tamanho, e a unidade em 20%: proporcional, para
os três subirem juntos se o degrau mudar. */
.val .cifra {
font-size: var(--text-preco);
line-height: 0.95;
color: var(--p-ink);
}
.val .cifra__rs {
font-size: 0.4em;
/* Alinhado ao TOPO da caixa alta do número, não à linha de base: um `R$` de
22px na base de um número de 56px flutua no vão de baixo e lê como se
tivesse caído. */
vertical-align: 0.9em;
margin-right: 0.06em;
letter-spacing: 0;
}
.val__un {
font-size: var(--text-cell);
font-weight: 600;
color: var(--p-muted);
}
/* O NÚMERO RISCADO É O NOSSO PREÇO MENSAL DE VERDADE — R$ 29, R$ 39, R$ 49 —
e não um "preço cheio" inventado para fabricar desconto. A distinção
importa porque preço riscado inventado é anti-padrão explícito desta
frente; riscar o preço que a gente REALMENTE cobra no mensal é a única
forma honesta de mostrar o desconto do anual sem obrigar a pessoa a fazer
conta de cabeça, e "de/por" é o formato que o público brasileiro deste
nicho já está acostumado a ler. */
.val__antes {
font-size: var(--text-cell);
font-weight: 600;
color: var(--p-faint);
text-decoration: line-through;
}
.val__nota {
display: block;
margin-top: 0.5rem;
font-size: var(--text-meta);
line-height: var(--leading-dense);
color: var(--p-faint);
/* UMA LINHA NOS DOIS CICLOS, e é por isso que não tem `min-height` aqui.
A versão antiga tinha nota de 1 linha no mensal e 2 no anual, e precisou
reservar 2,6em para o botão não pular na troca — reserva que aparece
como buraco no ciclo mensal. Escrever as duas variantes com o mesmo
número de linhas resolve o mesmo problema sem deixar o buraco. */
}
.val__nota b { color: var(--p-muted); font-weight: 600; }
/* --- QUEM É A PESSOA -----------------------------------------------------
PROSA, E NÃO MARCADOR DE LISTA, e a diferença aqui não é de estilo: é a
correção do defeito mais grave que esta seção teve.
Os cartões tinham quatro itens com marca de conferência cada um, e isso
AFIRMA entrega exclusiva por plano — coisa que o produto não faz. O código
é explícito nos três lugares: `nav.ts:223` diz que a audiência por tela
"NÃO é usada para esconder nada hoje"; `modo.ts:15` diz que o modo "não
esconde tela nenhuma, ordena e destaca", e `modo.ts:42` guarda esse modo em
`localStorage`, ou seja qualquer visitante troca à vontade; e em
`professor/quota.ts` o `pago` é UMA faixa só, igual para os três planos.
Era o defeito da tabela antiga em forma nova, e o mais fácil de o cliente
descobrir sozinho: assina o Cartoleiro, abre `/cruzamento`, a tela abre.
Marcador ao lado de um preço lê como entrega, qualquer que seja o rótulo em
cima dele — por isso não bastava trocar o rótulo para "o que você usa". Uma
FRASE em segunda pessoa descreve quem a pessoa é, e não dá para confundir
com uma lista do que ela recebe.
--------------------------------------------------------------------------- */
.terr__quem {
margin: 1rem 0 0;
font-size: var(--text-cell);
line-height: var(--leading-read);
color: var(--p-muted);
}
.terr .botao,
.uniao .botao { width: 100%; margin-top: 1rem; }
/* --- O CARTÃO DA UNIÃO -------------------------------------------------
O Analista ganha por ACUMULAÇÃO VISÍVEL: ele atravessa a largura dos dois
territórios e repete as duas listas por dentro, cada uma com o nome do
território de cima. Não ganha ALTURA e não ganha escala — a ênfase é fio
âmbar e superfície, que é a regra da casa.
------------------------------------------------------------------------- */
.uniao {
position: relative;
/* O FIO DE TOPO SAIU DO AMBAR, e a regra e da frente de marca (decidida em
09/set): nesta pagina ambar significa ACAO — o que a pessoa clica para
assinar — e nada mais. Fio de topo de cartao nao e acao; ele diz
"recomendado", e recomendado e POSICAO E PESO, nao acento.
O verificador (`logs/marca/contar-ambar.mjs`) media este fio e o botao
"Escolher o Analista" na MESMA dobra, e dois ambares simultaneos pedem
que a pessoa escolha qual e o botao — o contrario do trabalho de um CTA.
A enfase nao se perde: sobram a superficie elevada, a sombra, o fio de
3px e, principalmente, as duas hastes que ligam este cartao aos dois de
cima. */
border-top: 3px solid var(--p-ink);
border-left: 1px solid var(--p-border);
background: var(--p-elevated);
box-shadow: var(--shadow-raise);
}
/* DUAS COLUNAS INTERNAS NO DESKTOP: argumento à esquerda, dinheiro à direita.
Conserto de um vazio medido no print — a faixa era larga e baixa, com uma
área morta de quase um terço dela, o preço no canto superior direito e o
botão atravessando o rodapé. Preço e ação nos extremos opostos obrigam o
olho a viajar, e a faixa do plano RECOMENDADO perdia a briga visual para os
dois pares acima. Agora o dinheiro inteiro (preço, a conta dos R$ 68, botão)
é uma pilha só, à direita.
`minmax(15rem, 19rem)` na coluna da direita e não `auto`: com `auto` o botão
sozinho definia a largura da coluna e ela oscilava com o texto do ciclo. */
@media (min-width: 48rem) {
.uniao {
display: grid;
grid-template-columns: 1fr minmax(15rem, 19rem);
/* `grid-template-rows: auto` E `row-gap: 0` NÃO SÃO REDUNDANTES: sem os
dois, a faixa herda `grid-template-rows: auto auto auto 1fr auto` da
regra base de cartão, e as CINCO faixas explícitas multiplicam o
`column-gap` em quatro vãos de linha vazios — 160px de buraco no pé da
faixa, que é exatamente o vazio que apareceu no print. Grade de duas
colunas não quer as cinco faixas do cartão de uma coluna. */
grid-template-rows: auto;
column-gap: 2.5rem;
row-gap: 0;
align-items: start;
}
.uniao__dir { text-align: right; }
.uniao__dir .val__linha { justify-content: flex-end; }
.uniao__dir .uniao__soma { text-align: right; }
}
.uniao__frase {
margin: 0.5rem 0 0;
max-width: var(--measure-read);
font-size: var(--text-body);
line-height: var(--leading-read);
color: var(--p-muted);
}
/* AS DUAS HASTES ÂMBAR que ligam a união aos dois territórios de cima.
É a melhor ideia da composição — é ela que faz o "2+1" ler como ACUMULAÇÃO
em vez de "três blocos soltos". A primeira versão eram 1px a 55% de
opacidade e o coordenador reportou que **em 1440px elas eram quase
invisíveis**: argumento estrutural que não se vê não chega.
Agora cada haste é um "T": 2px verticais atravessando o vão, com um ombro
horizontal de 12px no topo, encostado na base do cartão que ela conecta —
e opacidade cheia. Dois retângulos de background em vez de dois elementos,
porque `.uniao` só tem `::before` e `::after` para gastar. Continua sendo
vocabulário de fio: sem seta, sem ícone, sem sombra.
Só existem quando há duas colunas de fato em cima; em uma coluna não há o
que unir e elas viram enfeite. */
@media (min-width: 48rem) {
.uniao::before,
.uniao::after {
content: "";
position: absolute;
top: -1rem;
width: 12px;
height: 1rem;
margin-left: -6px;
/* EM TINTA, NAO AMBAR: as hastes sao GEOMETRIA — elas dizem "este cartao
vem daqueles dois" — e nao acao. Em tinta elas continuam fazendo o mesmo
trabalho e ficam MAIS visiveis, porque tinta tem mais contraste contra o
papel do que ambar (ambar mede 1,54:1 sobre o papel claro; e a razao
pela qual ele nunca e cor de fio neste sistema). */
background-image:
linear-gradient(var(--p-ink), var(--p-ink)),
linear-gradient(var(--p-ink), var(--p-ink));
background-size: 2px 100%, 12px 2px;
background-position: 50% 0, 50% 0;
background-repeat: no-repeat;
}
.uniao::before { left: 25%; }
.uniao::after { left: 75%; }
}
/* AS DUAS FAMÍLIAS: rótulo, não lista repetida.
A primeira versão repetia aqui as dez linhas dos dois territórios e a
medição reprovou por dois motivos ao mesmo tempo — em 360px a seção ia a
3010px, e o leitor de tela ouvia os mesmos dez itens duas vezes seguidas,
porque numa coluna só o cartão da união fica logo abaixo dos dois que ele
soma. Repetição que só faz sentido com as duas colunas LADO A LADO não é
acumulação, é duplicata.
Cada rótulo cai sob o cartão que nomeia — 25% e 75%, as mesmas posições
das hastes âmbar — e o ponto na cor do território amarra os dois. */
/* OS DOIS CHIPS JUNTOS. Antes eram uma grade de `1fr 1fr`, o que fixava um
à esquerda e outro no centro-direita com um vão ocioso entre eles — liam
como dois rótulos soltos, e não como o PAR que prova a acumulação.
`flex` com `wrap` mantém os dois encostados e, em tela estreita, deixa o
segundo descer sozinho em vez de esmagar os dois. */
.uniao__duplo {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--p-border);
}
/* CADA RÓTULO É UM CHIP COM O FIO DO PRÓPRIO TERRITÓRIO — o mesmo fio de 3px
à esquerda que os dois cartões de cima usam, na mesma cor. Como fileira de
texto solto os dois liam como sobra entre a frase e o botão; como chip com
o fio herdado eles liam como os dois cartões de cima, condensados. É o
mesmo vocabulário repetido em escala menor, que é o que faz a acumulação
ser reconhecida em vez de explicada. */
.uniao__fam h4 {
/* `inline-flex` e não `flex`: esticado até a borda da coluna o chip lia
como campo de formulário vazio. Ele tem de ter a largura do próprio
texto. */
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0;
padding: 0.5rem 0.75rem;
border: 1px solid var(--p-border);
border-left: 3px solid var(--p-border-strong);
border-radius: 0 var(--radius-control) var(--radius-control) 0;
background: var(--p-surface);
font-size: var(--text-cell);
font-weight: 700;
letter-spacing: -0.01em;
color: var(--p-ink);
}
.uniao__fam[data-fam="cartola"] h4 { border-left-color: var(--p-cartola); }
.uniao__fam[data-fam="aposta"] h4 { border-left-color: var(--p-info); }
/* A CONTA QUE VENDE O PLANO: R$ 29 + R$ 39 = R$ 68 contra R$ 41. São os
nossos dois preços somados, não um "preço cheio" fabricado — e é o
argumento mais forte deste cartão, porque a pessoa confere de cabeça em um
segundo. */
.uniao__soma {
margin: 0.75rem 0 0;
font-size: var(--text-cell);
line-height: var(--leading-dense);
color: var(--p-muted);
}
.uniao__soma b { color: var(--p-ink); font-weight: 700; }
/* --- O ACESSO: o bloco principal da seção -------------------------------
Antes isto se chamava "está nos três planos", tinha quatro itens e era o
RODAPÉ da seção, embaixo de três cartões que listavam recurso cada um.
Inverteu: como o produto não recorta nada por plano, esta é a verdade
INTEIRA sobre o que se recebe, e ela precisa do peso visual que estava
distribuído (e implicando exclusividade) nos cartões.
Ganhou o que faltava para ser principal: superfície de cartão em vez de
afundada, o fio verde à esquerda que amarra ao `R$ 0` do topo (é a mesma
promessa — "abre tudo"), e duas colunas em desktop para nove linhas não
virarem uma coluna de nove.
--------------------------------------------------------------------------- */
.acesso {
margin-top: 1rem;
padding: 1rem 1.25rem;
border: 1px solid var(--p-border);
border-left: 3px solid var(--p-signal);
border-radius: var(--radius-card);
background: var(--p-surface);
}
.acesso > .rotulo { margin-bottom: 0.875rem; }
.acesso__lista {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.5rem;
}
@media (min-width: 48rem) {
.acesso__lista { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}
.acesso__lista li {
position: relative;
padding-left: 1.25rem;
font-size: var(--text-cell);
line-height: var(--leading-dense);
color: var(--p-muted);
}
.acesso__lista li b { color: var(--p-ink); font-weight: 600; }
/* A marca é desenhada em CSS e não é caractere de texto: um "✓" tipográfico
muda de forma por fonte, e alguns leitores de tela o anunciam como "marca
de seleção" no meio da frase. Pseudo-elemento de decoração não entra na
árvore de acessibilidade. */
.acesso__lista li::before {
content: "";
position: absolute;
left: 0;
top: 0.3125rem;
width: 9px;
height: 5px;
border-left: 2px solid var(--p-signal);
border-bottom: 2px solid var(--p-signal);
transform: rotate(-45deg);
}
/* --- O AVISO DE JOGO RESPONSÁVEL --------------------------------------
NÃO É LETRA MIÚDA E NÃO PODE VIRAR. É requisito legal — a Lei 14.790/2023
e as portarias SPA/MF 1.231/2024 e 1.964/2026 regulam o que material de
publicidade de aposta tem de exibir, e uma página que vende análise para
apostador sem isto é um problema de verdade, não um detalhe de rodapé.
`--text-cell` (13px) é o piso: menor que isso não é aviso, é disfarce.
O fio âmbar-terra à esquerda é o mesmo gesto do resto da página, para o
bloco ler como aviso e não como rodapé decorativo.
------------------------------------------------------------------------- */
.responsavel {
margin-top: 2rem;
padding: 1.125rem 1.25rem;
border: 1px solid var(--p-border);
border-left: 3px solid var(--p-risk);
border-radius: var(--radius-card);
background: var(--p-surface);
}
.responsavel .rotulo { color: var(--p-risk); margin-bottom: 0.625rem; }
.responsavel p {
margin: 0;
font-size: var(--text-cell);
line-height: var(--leading-read);
color: var(--p-muted);
}
.responsavel p + p { margin-top: 0.5rem; }
.responsavel b { color: var(--p-ink); font-weight: 600; }
/* OS LINKS DE AJUDA SAEM DO PARÁGRAFO e viram uma fileira de alvos de 44px.
Medido na primeira volta: dentro do parágrafo eles davam 32px de altura em
1440px (e 14px na versão antiga da seção, com o `Jogadores Anônimos` a
123x14). Link de socorro difícil de acertar com o dedo é link que não
cumpre a função — e este é o único da página em que errar o toque tem
custo real. Fora do parágrafo o alvo é o mesmo dos botões de assinar.
`overflow-wrap` porque o rótulo do link é longo e em 360px ele estourava
12px do próprio bloco. */
/* GRADE E NÃO FLEX, e a diferença aqui não é de gosto: com `display: flex` os
dois links encolhem abaixo do conteúdo e em 360px eles viraram duas tiras
de 13px de largura por 318px e 519px de ALTURA — uma letra por linha, e
~840px de altura fantasma na seção. Medido. `grid` com faixa de 1fr dá a
cada link a largura inteira em uma coluna e metade em duas, e nenhum
encolhe abaixo do texto. */
.responsavel__ajuda {
display: grid;
gap: 0.25rem;
margin-top: 0.75rem;
}
/* 24rem (384px) e não 34rem: em 390px os dois rótulos cabem na mesma linha
com folga (~281px de 307px disponíveis), e uma linha em vez de duas devolve
~48px de altura no aparelho onde altura é caro. O rótulo do segundo link
virou "Autoexclusão (gov.br)" justamente para caber — nome mais curto e
mais reconhecível que "plataforma do governo". */
@media (min-width: 24rem) {
.responsavel__ajuda { grid-template-columns: auto auto; justify-content: start; gap: 0.25rem 1.75rem; }
}
.responsavel__ajuda a {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
padding: 0.5rem 0;
color: var(--p-ink);
font-size: var(--text-cell);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.responsavel__ajuda a:focus-visible {
/* AS DUAS CAMADAS TAMBEM AQUI, e o motivo e que redefinir `outline` sem
redefinir a sombra DESFAZ metade do anel global sem avisar. A regra global
usa duas camadas concentricas em cores opostas porque esta pagina nao tem
um fundo unico — o mesmo botao cai sobre papel, sobre faixa escura, sobre
a foto do estadio e sobre o canvas da parede. Anel de uma cor so e aposta
que perde em algum desses quatro, e perde justamente para quem depende
dele. Achado por `infra/checar-mobile.mjs`. */
/* 3px/7px, igual a regra global: ver o comentario dela no `site.css` — com
2px de fio a 2px de distancia o anel nao sobrevive ao antisserrilhado nas
quinas de um alvo grande. */
outline: 2px solid var(--p-ink);
outline-offset: 2px;
box-shadow: 0 0 0 6px var(--p-bg);
}
/* =============================================================================
A TROCA DE CICLO, EM CSS PURO.
`:has()` na seção lê qual rádio está marcado e escolhe qual variante de
preço aparece. Zero JS: com o script desligado a página continua mostrando
um ciclo completo e coerente, E o alternador continua funcionando — que é
mais do que "degradar bem", é não depender.
Suporte: `:has()` é baseline desde 2023 (Chrome 105, Safari 15.4,
Firefox 121). O fallback natural para um navegador sem `:has()` é mostrar
as duas variantes empilhadas, o que é feio mas legível e honesto; por isso
a variante anual não nasce escondida.
============================================================================= */
.val--mensal { display: none; }
#preco:has(#ciclo-mensal:checked) .val--anual { display: none; }
#preco:has(#ciclo-mensal:checked) .val--mensal { display: block; }
/* No ciclo mensal a etiqueta de desconto não se aplica, e esconder é melhor
que deixar cinza: informação que não vale não deve ocupar espaço. */
#preco:has(#ciclo-mensal:checked) .ciclo2 .lampada { opacity: 0.35; }
/* =============================================================================
MOVIMENTO.
Só `transform` e `opacity`. Nada de `transition: all`. Duas coisas se
movem e mais nada:
(a) a entrada da seção, que reaproveita `.revelar` da casa (o JS escreve
`--passo` por irmão e escalona) — é por isso que cada bloco de
primeiro nível leva `.revelar` no HTML;
(b) a cifra que ENTRA na troca de ciclo, com um sobe-e-assenta de 4px.
Como a variante inativa é `display: none`, voltar a `block` reinicia a
animação sem uma linha de JS. 4px e não 6: a 6 o cartão dava um pulo
que lia como recarregamento de página.
============================================================================= */
@keyframes preco-assenta {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: none; }
}
.val__linha { animation: preco-assenta var(--dur-enter) var(--ease-out) both; }
/* QUEM PEDE MENOS MOVIMENTO PERDE O MOVIMENTO, NÃO A INFORMAÇÃO. Todas as
regras abaixo zeram animação e deixam o conteúdo no estado final visível —
nenhuma esconde nada. */
@media (prefers-reduced-motion: reduce) {
.val__linha { animation: none; }
.ciclo2 label { transition: none; }
.terr, .uniao, .porta, .acesso, .responsavel { transition: none; }
}
/* PROSA A 16px, o mesmo conserto do `site.css`: estes tres eram corpo de
leitura escrito em `--text-cell` (13px), que e o token de celula de tabela.
O `.responsavel p` e o aviso de jogo responsavel — o texto que um regulador
le, e o que menos podia estar miudo. */
.terr__quem,
.responsavel p,
.acesso__lista li { font-size: var(--text-body); }