/* ═══════════════════════════════════════════════════════════════════════════ beta.css — `/leitores-beta`, a leitura beta do volume 2 (2026-09-02) ═══════════════════════════════════════════════════════════════════════════ ★ NADA DE PALETA NOVA. Toda cor sai de `tokens.css`, e as que estão escritas à mão aqui são as três que a pele clara já usa na home: o papel (`--bg0`), a tinta quente (`--t1`) e o rubro. Se faltar um tom, copia-se de lá — regra da casa, e ela já foi quebrada uma vez (o vermelho que foi para o `:root` e amanheceu na página do livro). ⚠⚠ ESTA PÁGINA VIVE SOBRE PAPEL (`body.pele-clara`), e isso muda uma coisa que não é óbvia: **os azuis do site não servem aqui**. `--gelo` (#95E4FF) e `--ciano` (#3FC9F9) foram escolhidos para brilhar sobre preto; sobre o papel a pele os escurece, mas o `.btn-gelo` do `wix.css` traz o #95E4FF ESCRITO NA REGRA, não o token — e aí ele volta a ser texto invisível. Por isso o botão desta página é próprio, e é tinta escura com letra de papel. ★ O DESENHO: é uma página para LER. São quatro telas de texto legal antes do formulário, e texto legal que ninguém lê não protege ninguém. Então: · medida de linha curta (`wrap-estreito`, 760px) — a mesma do blog; · corpo em `--serif` a 17px, entrelinha 1,72 — leitura de livro, não de app; · nada pisca, nada desliza, nada tem sombra colorida. O único acento é o rubro, e ele aparece três vezes: no filete do quadro, nos títulos de seção (que já são `--w-titulo-rubro`) e no "não pode fazer". ═══════════════════════════════════════════════════════════════════════════ */ /* ── A ENTRADA ───────────────────────────────────────────────────────────── Sem imagem de fundo, sem vídeo, sem gradiente colorido. O que segura o alto da página é a tipografia e um vão generoso — é o feitio de folha de rosto de livro, que é exatamente o que esta página é. */ .pg-beta .bt-topo { padding: clamp(2.6rem, 8vw, 5.5rem) 0 clamp(1.8rem, 5vw, 3rem); text-align: center; } .pg-beta .bt-selo { margin: 0 0 .9rem; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--t3); } .pg-beta .bt-titulo { margin: 0 0 1.1rem; font-family: var(--display); font-weight: 600; /* ⚠ `clamp` e não tamanho fixo: o autor lê no notebook e o leitor, no celular. 34px é o piso em que "Leitores beta" ainda ocupa uma linha só numa tela de 320 — quebrar o título em duas linhas o faz parecer frase. */ font-size: clamp(34px, 7vw, 58px); line-height: 1.06; letter-spacing: -.01em; color: var(--t1); } .pg-beta .bt-sub { margin: 0 auto; max-width: 34em; font-family: var(--serif); font-size: clamp(17px, 2.3vw, 20px); line-height: 1.6; color: var(--t2); } /* ── O CONTADOR DE VAGAS ─────────────────────────────────────────────────── ⚠ ELE NASCE COM "—" NO HTML e o número chega do servidor. O CSS não pode, então, reservar espaço "para o número que vier": se a caixa mudar de altura quando a resposta chegar, a página inteira dá um salto embaixo do polegar de quem já começou a ler. `min-height` fixa a linha desde o primeiro quadro. */ .pg-beta .bt-vagas { margin: 2.2rem auto 0; min-height: 4.2rem; display: flex; flex-direction: column; align-items: center; gap: .1rem; } .pg-beta .bt-vagas-n { font-family: var(--display); font-weight: 600; font-size: clamp(38px, 8vw, 56px); line-height: 1; color: var(--rubro); /* ⚠ Sem sombra e sem brilho: sobre papel, halo vermelho vira mancha rosa. A mesma nota que fez o risco da entrada perder o halo na pele clara. */ } .pg-beta .bt-vagas-t { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); } /* Quando não sobrou vaga, o número deixa de ser um chamado e vira um aviso: a cor sai do rubro (que é ação) para a tinta apagada (que é estado). */ .pg-beta .bt-vagas.e-esgotado .bt-vagas-n { color: var(--t3); } /* ⚠ AQUI MORAVAM DOIS ESTADOS que sairam em 03/09, no mesmo dia em que entraram: `e-esperando` (o travessao apagado enquanto a pagina perguntava) e `e-sem-numero` (o travessao saindo da tela quando a resposta nao vinha). Os dois existiam porque a pagina nascia SEM numero. Agora ela nasce COM o numero (copiado do servidor), entao nao ha mais espera para desenhar: o rubro e do numero desde o primeiro quadro. Ver `pag-beta.mjs`. */ .pg-beta .bt-desce { margin: 1.8rem 0 0; } .pg-beta .bt-desce a { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--rubro); text-decoration: none; border-bottom: 1px solid rgba(255, 0, 0, .35); padding-bottom: 2px; } .pg-beta .bt-desce a:hover { border-bottom-color: var(--rubro); } /* ── CORPO DE TEXTO: a régua de leitura ──────────────────────────────────── ⚠ 17px/1.72 em serifa NÃO é gosto: é a medida do blog deste site, e a página é do mesmo tipo (texto longo para ler do começo ao fim). Duas réguas diferentes para a mesma tarefa fazem duas páginas da mesma casa parecerem de casas diferentes. */ .pg-beta .bt-como p, .pg-beta .bt-legal p, .pg-beta .bt-legal li { font-family: var(--serif); font-size: 17px; line-height: 1.72; color: var(--t2); } .pg-beta .bt-legal strong { color: var(--t1); font-weight: 600; } .pg-beta .bt-legal a { color: var(--rubro); } /* ── OS TÍTULOS DE SEÇÃO ─────────────────────────────────────────────────── ★★ A FONTE FOI TROCADA A PEDIDO DO AUTOR (03/09): *"'o arquivo é seu e leva seu nome' a fonte aqui ta terrivel, tem que trocar"*. Ele está certo, e o motivo tem nome: `.w-titulo-rubro` usa `--letreiro` (a **Valdemar**, a fonte do letreiro do site antigo) a 50px, em vermelho puro e com um halo de 34px. Ela é fonte de CARTAZ — serve para gravar duas palavras numa vitrine. Aqui ela abre um bloco de texto legal de cinco parágrafos, e uma frase de sete palavras em letreiro no meio de uma página para LER briga com tudo em volta. (No papel é pior ainda: o halo vermelho vira mancha rosa em volta da letra — a mesma nota que fez o risco da entrada perder o brilho na pele clara.) ⚠⚠ E A TROCA MORA DENTRO DE `.pg-beta`, NUNCA no `.w-titulo-rubro` solto: a mesma classe escreve "Os trabalhos" na home e "Sobre o autor" na landing, e as duas foram medidas contra o Wix dele. Mudança de identidade nasce PRESA à página pedida — é a lição de 29/08, quando o vermelho foi para o `:root` e amanheceu na página do livro. O que entra: a `--display` (Spectral), que é a MESMA família dos títulos dos passos e do corpo desta página. Tamanho de título de capítulo, não de cartaz, e sem sombra nenhuma. */ .pg-beta .w-titulo-rubro { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 4.2vw, 34px); line-height: 1.18; letter-spacing: -.005em; text-shadow: none; margin-bottom: 1.8rem; } /* ⚠ O `movimento.css` abre a entreletra dos títulos em .28em e fecha ao acender (`letter-spacing: normal`). Numa serifa de texto isso lê como erro, não como composição — o efeito foi desenhado para o letreiro. Aqui ele sai. */ html.js main > section > .pg-beta-wrap > .w-titulo-rubro, .pg-beta .w-titulo-rubro, .pg-beta .w-titulo-rubro.on { letter-spacing: -.005em; } .pg-beta .bt-h3 { margin: 2.4rem 0 .8rem; font-family: var(--display); font-weight: 600; font-size: 22px; color: var(--t1); } /* ── OS QUATRO PASSOS ────────────────────────────────────────────────────── Lista NUMERADA de verdade (`
    `), não `
    `s com um número desenhado: a ordem é a informação, e leitor de tela precisa anunciá-la. O contador do CSS fica desligado porque o número é escrito no HTML — assim ele existe mesmo com o CSS fora do ar, que é o estado da página no primeiro quadro. */ .pg-beta .bt-passos { list-style: none; margin: 0; padding: 0; } .pg-beta .bt-passos > li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 0 1.1rem; padding: 1.5rem 0; border-top: 1px solid var(--border); } .pg-beta .bt-passos > li:first-child { border-top: 0; padding-top: 0; } /* ⚠⚠⚠ A GRADE TEM SEMPRE DOIS FILHOS — o número e um CONTÊINER com todo o texto. Isto foi visto no celular (03/09), não deduzido, e as duas tentativas erradas ficam registradas porque as duas parecem certas no papel: 1. `grid-row: span 2` no número. Funcionava enquanto cada passo tinha um

    e UM parágrafo. Quando o autor reescreveu os passos e o passo 2 ganhou um segundo e um terceiro parágrafo, eles não couberam na coluna 2 e **caíram na coluna do número**, que tem 2,6rem: o texto saiu uma palavra por linha, uma tira de trinta linhas no meio da página. Nada quebrou, nada avisou no console — só ficou ilegível. 2. `grid-row: 1 / -1`. Parece a correção óbvia ("da primeira à última linha"), e é ARMADILHA: o `-1` conta as linhas da grade EXPLÍCITA, e aqui só as COLUNAS são declaradas. Sem linhas explícitas, `1 / -1` vira `1 / 1` e o número passou a ocupar UMA linha — pior que antes. A correção que não depende de contar linha nenhuma é estrutural: o texto vai dentro de `.bt-passo-txt`, e a grade volta a ter exatamente duas células. O passo pode crescer para cinco parágrafos que nada se desloca. */ .pg-beta .bt-passo-n { font-family: var(--display); font-weight: 600; font-size: 30px; line-height: 1; color: var(--rubro); opacity: .55; } .pg-beta .bt-passo-txt { min-width: 0; } .pg-beta .bt-passos h3 { margin: 0 0 .35rem; font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.25; color: var(--t1); } .pg-beta .bt-passos p { margin: 0; } /* ── O QUADRO DO CPF ─────────────────────────────────────────────────────── ★ É o bloco mais importante da página: é ele que explica por que um site pede CPF. Por isso é o único com moldura — e a moldura é um FILETE à esquerda, do feitio de citação de livro, não uma caixa de aviso de sistema. Caixa amarela com ícone de exclamação é a linguagem do erro; aqui não há erro nenhum, há uma explicação que a pessoa precisa ler antes de digitar. */ .pg-beta .bt-quadro { margin: 0 0 1rem; padding: 1.4rem 0 1.4rem 1.5rem; border-left: 3px solid var(--rubro); background: linear-gradient(90deg, rgba(255, 0, 0, .035), transparent 70%); } .pg-beta .bt-quadro h3 { margin: 0 0 .7rem; font-family: var(--display); font-weight: 600; font-size: 21px; color: var(--t1); } .pg-beta .bt-quadro p:last-child { margin-bottom: 0; } /* ── PODE / NÃO PODE ─────────────────────────────────────────────────────── ⚠ O MARCADOR É `::before` COM `aria-hidden` implícito (conteúdo de CSS não entra na árvore de acessibilidade em leitor nenhum que importe), e a diferença entre as duas listas está TAMBÉM na palavra do título — não só na cor e no símbolo. Quem não distingue verde de vermelho (8% dos homens) leria duas listas idênticas de regras contraditórias. */ .pg-beta .bt-lista { list-style: none; margin: 0; padding: 0; } .pg-beta .bt-lista li { position: relative; padding: .45rem 0 .45rem 1.9rem; } .pg-beta .bt-lista li::before { position: absolute; left: 0; top: .45rem; font-family: var(--sans); font-size: 15px; font-weight: 700; line-height: 1.72; } .pg-beta .bt-lista.e-pode li::before { content: '\2713'; color: #1F7A46; } .pg-beta .bt-lista.e-nao li::before { content: '\2715'; color: var(--rubro); } /* ── A BASE LEGAL ────────────────────────────────────────────────────────── Letra um ponto menor e tinta um grau mais clara: é o material de conferência, não o que a pessoa precisa ler para decidir. O que ela precisa ler está acima, em português de gente e no corpo cheio. */ .pg-beta .bt-base { margin: 2.6rem 0 0; padding: 1.6rem 0 0; border-top: 1px solid var(--border); } .pg-beta .bt-base h3 { margin: 0 0 .9rem; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); } .pg-beta .bt-base p, .pg-beta .bt-dados li { font-size: 15.5px; line-height: 1.68; color: var(--t3); } .pg-beta .bt-base strong { color: var(--t2); } .pg-beta .bt-dados { margin: .6rem 0 1rem; padding: 0 0 0 1.2rem; } .pg-beta .bt-dados li { padding: .18rem 0; } /* ── O FORMULÁRIO ────────────────────────────────────────────────────────── ⚠ CAIXA CLARA SOBRE PAPEL, com um fio de tinta: o `checkout.css` desenha os campos com `background: rgba(0,0,0,.55)` e borda de gelo — a receita do fundo PRETO. Copiar aquilo para cá deixaria quatro buracos escuros no meio de uma folha branca. Os campos aqui são papel mais claro que o papel, com o fio escurecendo no foco. */ .pg-beta .bt-form-sec { padding-bottom: clamp(3rem, 8vw, 6rem); } .pg-beta .bt-form-caixa { display: grid; grid-template-columns: 150px 1fr; gap: 0 2.2rem; align-items: start; padding: clamp(1.4rem, 4vw, 2.4rem); background: var(--bg0-deep); border: 1px solid var(--border2); border-radius: 4px; box-shadow: var(--shadow2); } .pg-beta .bt-capa { margin: 0; } .pg-beta .bt-capa img { width: 100%; height: auto; display: block; border-radius: 2px; box-shadow: var(--shadow2); } .pg-beta .bt-campo { margin: 0 0 1.15rem; } .pg-beta .bt-campo label { display: block; margin: 0 0 .38rem; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .015em; color: var(--t2); } .pg-beta .bt-campo input { width: 100%; box-sizing: border-box; /* ⚠ 16px É O PISO DO iPHONE — abaixo disso ele amplia a página sozinho ao tocar no campo, e a pessoa fica com metade do formulário fora da tela. A mesma nota está no `checkout.css`, e ela é medida, não folclore. */ font-family: var(--sans); font-size: 16px; line-height: 1.4; padding: .74rem .85rem; color: var(--t1); background: var(--input-bg); border: 1px solid var(--border2); border-radius: 3px; transition: border-color .16s ease, box-shadow .16s ease; -webkit-appearance: none; appearance: none; } .pg-beta .bt-campo input::placeholder { color: var(--t4); } .pg-beta .bt-campo input:focus { outline: none; border-color: var(--t2); background: var(--input-bg-focus); box-shadow: 0 0 0 3px rgba(23, 19, 12, .08); } .pg-beta .bt-ajuda { margin: .32rem 0 0; font-family: var(--sans); font-size: 12.5px; line-height: 1.45; color: var(--t3); } /* O erro EMPURRA, não flutua: mensagem por cima do campo seguinte esconde justamente o que a pessoa vai corrigir. Mesma regra do checkout. */ .pg-beta .bt-erro { margin: .35rem 0 0; font-family: var(--sans); font-size: 13px; line-height: 1.45; color: #B3261E; /* vermelho de erro sobre papel: 6,4:1. O --rubro puro (#FF0000) dá 3,9:1 e não passa o piso de texto. */ } .pg-beta .bt-erro:empty { display: none; } .pg-beta .bt-campo.e-erro input { border-color: #B3261E; } .pg-beta .bt-campo.e-ok input { border-color: rgba(31, 122, 70, .55); } /* ── O COMPROMISSO ───────────────────────────────────────────────────────── `
    ` de verdade, com ``: é um grupo de informação que precede uma escolha, e é assim que leitor de tela o anuncia antes da caixinha. */ .pg-beta .bt-compromisso { margin: 1.6rem 0 1.4rem; padding: 1.1rem 1.2rem; border: 1px solid var(--border2); border-radius: 3px; background: var(--bg2); } /* ⚠ A LEGENDA NÃO ENTALHA A BORDA, e isso foi medido no celular (02/09): com 375px de tela ela quebra em DUAS linhas, e o nativo se posiciona POR CIMA da borda de cima do fieldset — com duas linhas, a segunda fica pendurada para dentro e o quadro parece montado errado. O conserto é o de sempre para de mais de uma linha: + largura cheia, que o tira da posição de entalhe e o devolve ao fluxo, sem perder o que ele é (o leitor de tela continua anunciando a legenda antes dos campos do grupo — é isso que faz o
    valer a pena aqui). */ .pg-beta .bt-compromisso legend { float: left; width: 100%; padding: 0 0 .5rem; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); } /* com o legend flutuando, o conteúdo do fieldset precisa limpar o float */ .pg-beta .bt-compromisso > ul { clear: both; } .pg-beta .bt-compromisso ul { margin: .3rem 0 1rem; padding: 0 0 0 1.1rem; } .pg-beta .bt-compromisso li { font-family: var(--serif); font-size: 15.5px; line-height: 1.6; color: var(--t2); padding: .2rem 0; } .pg-beta .bt-check { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; cursor: pointer; padding-top: .8rem; border-top: 1px solid var(--border); } .pg-beta .bt-check input { /* ⚠ 20px E NÃO O TAMANHO PADRÃO. A caixinha do sistema tem ~13px, e este é o único controle da página que registra um compromisso jurídico — errar o alvo dela no celular é aceitar (ou deixar de aceitar) sem querer. */ width: 20px; height: 20px; margin: .12rem 0 0; accent-color: var(--rubro); cursor: pointer; } .pg-beta .bt-check span { font-family: var(--sans); font-size: 14.5px; line-height: 1.5; color: var(--t2); } .pg-beta .bt-compromisso.e-erro { border-color: #B3261E; } /* ── O BOTÃO ─────────────────────────────────────────────────────────────── ⚠ PRÓPRIO, e o motivo está no alto deste arquivo: o `.btn-gelo` do site traz `#95E4FF` escrito na regra (não o token), e sobre papel isso é 1,4:1 — texto invisível, não cor fraca. Aqui é tinta cheia com letra de papel: 15,9:1. ★ O feitio (pílula de 50px) é o mesmo do resto do site — o que muda é a tinta, não a forma. */ .pg-beta .bt-enviar { display: block; width: 100%; margin: 0; font-family: var(--display); font-size: 18px; font-weight: 500; padding: .85rem 1.9rem; cursor: pointer; text-align: center; color: var(--btn-ink); background: var(--t1); border: 2px solid var(--t1); border-radius: 50px; transition: background-color .18s ease, border-color .18s ease, opacity .18s ease; } .pg-beta .bt-enviar:hover { background: #2C2418; border-color: #2C2418; } .pg-beta .bt-enviar:focus-visible { outline: 3px solid var(--rubro); outline-offset: 3px; } /* ⚠ `disabled` NÃO some com o botão nem tira o cursor: ele fica CINZA e diz o que está acontecendo no texto (o JS troca o rótulo para "ENVIANDO…"). Botão que desaparece ao ser clicado faz a pessoa clicar de novo em outro lugar. */ .pg-beta .bt-enviar[disabled] { opacity: .5; cursor: default; } /* O recado do envio (erro do servidor, "pronto!", "vagas esgotadas"). Ele é `role="status"`, então nasce vazio e o leitor de tela o anuncia ao mudar. */ .pg-beta .bt-recado { margin: 1rem 0 0; font-family: var(--sans); font-size: 14.5px; line-height: 1.5; color: var(--t2); } .pg-beta .bt-recado:empty { display: none; } .pg-beta .bt-recado.e-ruim { color: #B3261E; } .pg-beta .bt-recado.e-bom { color: #1F7A46; } /* ── O AGRADECIMENTO ─────────────────────────────────────────────────────── Quando dá certo, o formulário SOME e no lugar dele fica a confirmação. Deixar o formulário preenchido na tela depois do envio é o convite para a pessoa clicar de novo achando que não foi. */ .pg-beta .bt-pronto { text-align: center; padding: 1.5rem .5rem; } .pg-beta .bt-pronto h3 { margin: 0 0 .8rem; font-family: var(--display); font-weight: 600; font-size: 26px; color: var(--t1); } .pg-beta .bt-pronto p { margin: 0 auto; max-width: 30em; font-family: var(--serif); font-size: 16.5px; line-height: 1.65; color: var(--t2); } /* ── CELULAR ─────────────────────────────────────────────────────────────── ⚠ A CAPA SAI, não encolhe. Uma coluna de 150px vira uma tira de 40px numa tela de 360, e uma capa de livro em 40px é uma mancha. O que a página perde é enfeite; o que ela ganha é o formulário inteiro na largura da tela. */ @media (max-width: 700px) { .pg-beta .bt-form-caixa { grid-template-columns: 1fr; } .pg-beta .bt-capa { width: 128px; margin: 0 auto 1.4rem; } .pg-beta .bt-passos > li { grid-template-columns: 2rem 1fr; gap: 0 .8rem; } .pg-beta .bt-passo-n { font-size: 24px; } .pg-beta .bt-quadro { padding-left: 1.1rem; } } /* ── O ENDEREÇO (2026-09-03) ─────────────────────────────────────────────── ★★ Pedido do autor: *"precisamos pegar endereço do usuario caso vaze, fazer apresentação legal contra"*. O bloco tem cara de bloco à parte de propósito: ele não é continuação natural de "nome, CPF, WhatsApp, e-mail" — é um pedido com um motivo diferente, e a nota logo abaixo da legenda é o motivo. Um campo de CEP solto no meio dos outros faria a pessoa concluir que vai receber um pacote pelo correio, e depois se sentir enganada quando não receber. */ .pg-beta .bt-endereco { margin: 1.4rem 0 0; padding: 1.1rem 1.2rem 0.3rem; border: 1px solid var(--border2); border-radius: 3px; background: var(--bg2); } /* ⚠ Mesma correção do compromisso: de mais de uma linha entalhado na borda fica pendurado para dentro. `float:left` + largura cheia o devolve ao fluxo sem tirar dele o que ele é (o leitor de tela anuncia a legenda antes dos campos do grupo). */ .pg-beta .bt-endereco legend { float: left; width: 100%; padding: 0 0 .5rem; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); } .pg-beta .bt-endereco-nota { clear: both; margin: .3rem 0 1.1rem; font-family: var(--serif); font-size: 14.5px; line-height: 1.6; color: var(--t3); } .pg-beta .bt-opcional { color: var(--t4); font-weight: 400; } /* Duas colunas para os pares curtos (CEP · nada, número · complemento, cidade · estado). No celular vira uma coluna — ver o bloco de 700px. */ .pg-beta .bt-dupla { display: grid; gap: 0 .9rem; grid-template-columns: 1fr 1fr; } .pg-beta .bt-dupla > .bt-campo { grid-column: span 2; } .pg-beta .bt-dupla > .e-meio { grid-column: span 1; } /* O