` sem classe que agrupavam "roda + grade" e "posições + elementos" saem
do LAYOUT (continuam no documento), e as cinco fichas passam a ser itens da grade, cada
uma no seu lugar. Reordenar no HTML mudaria também a ordem no CELULAR — onde ela está
certa e aprovada — e mexeria numa árvore que o zoom da roda e o PDF leem.
O `min-width:0` PRECISA SER REESCRITO PARA ELAS: a regra logo acima alcança os
invólucros, e item de grade nasce com `min-width:auto` — a grade de catorze colunas de
34 px voltaria a esticar a coluna, que é o defeito de 02/09 descrito ali. */
/* A RODA CENTRADA E DO TAMANHO DE UMA DOBRA — vale já no tablet estreito, onde a tela
ainda é de uma coluna só. Sem este teto ela mede a faixa inteira: 770 px de desenho num
tablet de 834, uma tela cheia só de roda, que é o mesmo defeito da capa. */
@media (min-width:760px){
/* O `:not(.em-tela-cheia)` NÃO É ZELO — 03/09/2026, medido no navegador. Este seletor tem
três classes e ganha do `.roda-zoom.em-tela-cheia{width:100%}`, que tem duas: sem a
ressalva, a caixa aberta em tela cheia continuava com 520 px de largura (ou 62vh numa
janela baixa) e a "tela cheia" era uma tira no canto esquerdo. */
.resultado-section .wheel-wrap .roda-zoom:not(.em-tela-cheia){width:min(520px, 62vh);}
/* "AS INFOS PODEM FICAR PEQUENAS" — e o que encolhe é a ALTURA DA LINHA, não a letra.
A tabela já está em `--c-apoio` (13 px), o mesmo degrau do celular, e descê-la aqui
faria o texto ficar menor justamente na tela onde há mais espaço. O que produzia o
branco eram os 10 px de respiro em cada célula MAIS a entrelinha do corpo do site
(1,68, boa para parágrafo e larga para tabela): vinte e duas linhas a 38 px de altura
dão 848 px de tabela. Com 6 px de respiro e entrelinha de 1,4 a linha mede 31 px, a
tabela dá 682 e a coluna passa a acabar junto com a do lado.
E O GLIFO DESCE COM ELA: a célula do símbolo é a mais alta da linha, porque ela é a
única em `--c-corpo` (14,5 px) enquanto o resto da tabela é `--c-apoio` (13). Deixá-la
um degrau acima faria a altura da linha ser decidida por uma coluna de 22 px. */
.resultado-section table.pos-table td{padding:6px 4px; line-height:1.4;}
.resultado-section table.pos-table td.glyph{font-size:var(--c-apoio);}
.resultado-section table.pos-table tr.divider td{padding-top:12px;}
.resultado-section .ge-tabela th, .resultado-section .ge-tabela td{padding:6px 8px;}
}
/* ==========================================================================
AS FICHAS DO MAPA NA ROLAGEM SEGUINTE, DISTRIBUÍDAS — 03/09/2026
==========================================================================
A partir de 900 px a tela tem duas colunas, e é a partir daqui que a ORDEM muda.
O limite é o mesmo que a `@media (max-width:900px)` lá embaixo já usa para desmanchar a
grade — dois números diferentes para a mesma fronteira é como uma faixa de larguras
fica sem desenho nenhum.
O QUE ELA VIU: a grade de duas colunas de 02/09 punha a roda na coluna da ESQUERDA e a
tabela de posições na da direita. Medido: numa faixa de 1016 px a roda ficava num
quadrado de 528 e o meio da tela caía ENTRE as duas colunas — o gráfico centrado na
metade dele, e não na página. Num telefone isso não existe (uma coluna só, e a roda
ocupa a largura toda): era outra vez o desenho de celular servido a uma tela larga.
A FORMA NOVA é a ordem em que se lê um mapa, e é a que o PDF já usa: a roda primeiro,
sozinha e centrada; as fichas depois, em duas colunas que acabam juntas. As posições
(vinte e duas linhas) ficam sozinhas de um lado; a grade de aspectos e o quadro de
elementos, empilhados do outro. Medido a 1024 px: 672 de tabela contra 557 + 34 + 237 =
828 do outro lado — contra os 434 px de branco que sobravam antes.
AS COLUNAS SÃO 42 E 58, E O NÚMERO SAI DA GRADE: catorze colunas de 30 px mais as
bordas são 422 px, e é a única ficha desta tela com largura MÍNIMA — tabela de posições
e quadro de elementos encolhem, ela não (ela rola dentro da caixa, que é o que faz no
celular). Com as duas colunas iguais a 900 px sobravam 398 de cada lado e a grade saía
cortada; com 58% ela cabe inteira a partir de 900 e sobra folga em toda tela maior.
MEXER NA LARGURA DA CÉLULA É REFAZER ESTA CONTA.
O `display:contents` NOS DOIS INVÓLUCROS é o que permite a reordenação sem tocar no
HTML da grade: os `
` sem classe que agrupavam "roda + grade" e "posições +
elementos" saem do LAYOUT (continuam no documento), e as cinco fichas passam a ser itens
da grade, cada uma no seu lugar. Reordenar no HTML mudaria também a ordem no CELULAR —
onde ela está certa e aprovada — e mexeria numa árvore que o zoom da roda e o PDF leem.
O `min-width:0` PRECISA SER REESCRITO PARA ELAS: a regra `.resultado-grid > *` alcança
os invólucros, e item de grade nasce com `min-width:auto` — a grade voltaria a esticar
a coluna, que é o defeito de 02/09 descrito ali. */
@media (min-width:900px){
.resultado-section .resultado-grid{
grid-template-columns:minmax(0,42%) minmax(0,58%);
column-gap:40px; row-gap:34px; margin-top:30px;
}
/* O `:not(.section-head)` ENTROU EM 03/09/2026, de noite, com o cabeçalho descendo para
dentro da grade. Sem ele, o cabeçalho — que é um `div` sem `bloco-do-mapa` — virava
transparente como os invólucros, e o sobretítulo, o nome, a data e a frase viravam
QUATRO células da grade, cada uma numa linha. */
.resultado-section .resultado-grid > div:not(.bloco-do-mapa):not(.section-head){display:contents;}
.resultado-section .resultado-grid > div > *{min-width:0;}
.resultado-section .wheel-wrap{grid-column:1 / -1; grid-row:1;}
.resultado-section .section-head{grid-column:1 / -1; grid-row:2;}
.resultado-section .bloco-das-posicoes{grid-column:1; grid-row:3 / span 2;}
.resultado-section .bloco-da-grade{grid-column:2; grid-row:3;}
.resultado-section .bloco-dos-elementos{grid-column:2; grid-row:4;}
.resultado-section .aspectos-largo{grid-column:1 / -1; grid-row:5;}
/* O SALVAR EM PDF VAI PARA O CANTO — 03/09/2026, a pedido da dona, com o canto circulado
num print: "muda botão salvar PDF para aquele canto vazio, menor e mais discreto".
O canto que ela circulou é o pé da última coluna da lista de aspectos, que sobra vazio
porque o navegador reparte os grupos entre as três colunas e o último quase nunca chega
ao fim. ESSE VAZIO NÃO É ENDEREÇÁVEL — ele é a sobra do balanceamento de `columns`, não
uma célula —, e pôr algo lá dentro seria escrever uma posição que muda com o mapa de
cada pessoa. O que dá para fazer, e é o que se vê igual, é a linha DE BAIXO alinhada à
direita: o botão cai debaixo daquele canto, na mesma vertical.
E MENOR: ele deixa de ser um bloco de 220 px no meio da tela e vira um botão de texto
miúdo, com a nota ao lado em vez de embaixo. Salvar não é o que a pessoa veio fazer
nesta tela — ela veio ver o mapa —, e um botão do tamanho de uma ação principal disputa
com o que está acima dele.
NO CELULAR NADA MUDA: lá ele continua centrado e do tamanho de sempre, porque numa
coluna só não existe canto, e o dedo precisa do alvo grande. */
.resultado-section .salvar-o-mapa{
grid-column:1 / -1; grid-row:6; justify-self:end; margin-top:0;
display:flex; align-items:center; gap:14px; text-align:right;
}
.resultado-section .salvar-o-mapa .btn-outline{min-width:0; padding:8px 16px; font-size:var(--c-nota);}
/* O respiro entre fichas passa a ser o `row-gap` da grade. Mantê-lo também na margem
somaria 38 px a cada linha, e era ele que abria o branco entre a grade e os
elementos. */
.resultado-section .bloco-do-mapa{margin-bottom:0;}
/* A CÉLULA DA GRADE CAI DE 34 PARA 30 PX aqui, e é a conta das colunas acima: 34 px
dariam 478 e a grade sairia cortada numa tela de 900. Os 30 px são os mesmos que o
celular já usa desde 02/09 (lá são 29), e o glifo desce um degrau com eles. */
.resultado-section .ga-tabela th, .resultado-section .ga-tabela td{width:30px; min-width:30px; height:30px;}
.resultado-section .ga-glifo{font-size:var(--c-apoio);}
.resultado-section .ga-simbolo{font-size:var(--c-nota);}
}
/* QUANTAS COLUNAS CABEM É PERGUNTA PARA A CAIXA, E NÃO PARA A JANELA — 06/09/2026.
Esta regra era `columns:3` mais duas consultas de largura de TELA (2 colunas abaixo de
1000 px, 1 abaixo de 680). Funcionava enquanto a lista só existia numa caixa: o bloco de
largura inteira do mapa grátis, que acompanha a janela. No dia em que ela chegou à tela
da leitura comprada — uma coluna de 640 px que não muda de tamanho com o monitor — a
janela larga mandava três colunas para dentro de uma ficha de 584 px, e cada uma ficaria
com 170 px para escrever "Parte da Fortuna".
O que era invariante nas duas leituras: UMA COLUNA NUNCA FICA MAIS ESTREITA QUE O PAR DE
NOMES MAIS COMPRIDO. Escrito assim, o navegador conta as colunas pela largura DISPONÍVEL,
e as duas caixas ficam certas com uma regra só.
OS 280 px SÃO MEDIDOS, e não escolhidos: nos cortes de 02/09 a coluna mais estreita que
esta lista chegou a ter foi 287 px (três colunas numa janela de 1001) e 289 (duas numa de
681). O piso é o mesmo desenho, arredondado para baixo o suficiente para que aqueles dois
cortes continuem caindo do lado em que caíam. */
.aspects-grupos{columns:280px 3; column-gap:38px;}
/* O GRUPO PODE CONTINUAR NA COLUNA SEGUINTE — 13/09/2026, e isto REVOGA uma linha de
02/09 (o `break-inside:avoid` que estava aqui). Pedido da dona, com a foto da tela:
"espaço em branco, assimetria".
O QUE O `avoid` FAZIA: cada bloco de aspectos tinha de caber inteiro numa coluna, e o
navegador só podia equilibrar as três movendo BLOCOS. Medido nesta tela, com 62 aspectos:
as três colunas acabavam em 1.957, 2.140 e 1.815 px — 325 px de degrau entre a mais
comprida e a mais curta, que é exatamente o que ela fotografou.
POR QUE ELE PODE SAIR HOJE, e não podia em 02/09: naquele dia cada bloco tinha um TÍTULO
em caixa alta, e um bloco partido ao meio deixaria metade dele órfã, sem dizer de que
aspecto era. Os títulos saíram no MESMO dia, a pedido dela ("não quero os títulos"), e o
que passou a dizer qual aspecto é cada linha foi o SÍMBOLO, que se repete em todas elas.
Símbolo viaja com a linha; título não viajava. Com o título fora, partir um bloco não
custa nada — e o respiro entre blocos continua marcando onde um acaba e o outro começa.
MEDIDO DEPOIS: as três colunas acabam em 2.061, 2.061 e 2.060, e a lista inteira cai de
812 para 658 px. O equilíbrio não é enfeite: aquele degrau era altura de rolagem que
ninguém estava usando. */
.asp-grupo{margin-bottom:20px;}
.asp-grupo:last-child{margin-bottom:0;}
/* O BLOCO NÃO TEM TÍTULO — 02/09/2026: primeiro saiu a bolinha com a contagem ("não põe
número na frente do título, feio"), depois o título inteiro ("não quero os títulos, a
ordem já existe e divisões já existem"). O que separa um bloco do outro é o respiro, e
o que diz qual aspecto ele é são os símbolos iguais das linhas dele — explicados na
legenda da grade, na mesma tela. O agrupamento continua fazendo o trabalho dele. */
.asp-nada{color:var(--muted); font-size:var(--c-apoio);}
/* DENTRO DO GRUPO A PALAVRA SAIU E FICOU O SÍMBOLO — o título já diz qual aspecto é.
É essa largura devolvida que permite três colunas em vez de uma. */
.aspects-list{list-style:none; --asp-col:118px;}
.aspects-grupos .aspects-list{--asp-col:26px;}
/* A LINHA APERTOU — 13/09/2026, a pedido da dona, com a foto da lista no tablet deitado:
"diminui tudo isso para caber numa tela, atualmente está em 3 rolagens, muito espaço em
branco".
ERA A DECISÃO DE 03/09 QUE NUNCA CHEGOU AQUI. Naquele dia a tabela de posições trocou os
10 px de respiro por 6 e a entrelinha do corpo do site pela de tabela, e a linha caiu de
38 para 31 px — "as infos do mapa podem ficar pequenas", com a letra intacta. A lista de
aspectos ficou de fora: ela é a única tabela desta família que continuou com a linha do
tamanho antigo, e é a mais comprida de todas — um mapa com os pontos ligados tem mais de
sessenta aspectos.
MEDIDO NUM TABLET DEITADO, com 62 aspectos: a lista caiu de 1.020 para 812 px. É uma tela
inteira de rolagem a menos, e a letra não mudou de degrau — o que sai é o ar em volta
dela.
O QUE NÃO SE FEZ, e vale escrito: não se ganhou a quarta coluna. Ela cabe na largura —
quatro colunas de 239 px numa faixa de 1.016 —, mas o par de nomes mais comprido do
projeto ("Ascendente ☌ Parte da Fortuna") pede 264, e as sete linhas assim quebrariam em
duas. Quebra de linha aqui custa mais altura do que a coluna a mais economiza, além de
desalinhar o eixo do meio, que é o que faz a lista se ler de cima a baixo. A regra dos
280 px logo acima continua sendo a medida certa; o que mudou é o que há DENTRO da linha. */
.aspects-list li{display:grid; grid-template-columns:minmax(0,1fr) var(--asp-col) minmax(0,1fr); align-items:center; gap:10px; padding:6px 2px; border-bottom:1px solid var(--border-soft); font-size:var(--c-apoio); color:var(--ink); transition:background var(--dur-fast) var(--ease);}
/* ==========================================================================
A LISTA ENCOSTA À ESQUERDA, E OS DOIS NOMES ANDAM JUNTOS — 13/09/2026, à noite
==========================================================================
Pedido da dona: "os aspectos seguem um alinhamento centralizado. Põe eles alinhados à
esquerda como o restante para ver se encaixam melhor. Junta eles ao invés de separar — o
próprio símbolo e conjuntos já mostram o que é o que".
O QUE HAVIA: cada linha era uma grade de `1fr | símbolo | 1fr`, ou seja, o símbolo no
CENTRO da coluna e os dois nomes empurrados para as bordas dele. Num par curto ("Lua ☍
Juno") isso abria um vão no meio da linha e deixava branco nas duas pontas — e a coluna
inteira ficava com o texto boiando, sem margem comum com nada do resto da tela.
AGORA O BLOCO É QUE É A GRADE, e a linha é uma fatia dela (`subgrid`): as três colunas —
nome, símbolo, nome — são medidas uma vez por BLOCO e valem para todas as linhas dele. O
resultado é o que ela pediu com duas palavras: encostado à esquerda (a mesma margem das
tabelas e do resto da página) e junto (o vão entre os dois nomes é o tamanho do símbolo, e
não a metade da coluna).
E OS SÍMBOLOS CONTINUAM EM COLUNA dentro do bloco, que é o que faz a lista se ler de cima
a baixo. Não se buscou alinhá-los entre BLOCOS diferentes: cada bloco é um aspecto só, e o
símbolo dele se repete em toda linha — é o que ela mesma disse.
A ALTURA NÃO MUDA (658 px com 62 aspectos): o que sai é o ar dentro da linha, não linha
nenhuma. E as colunas continuam niveladas.
`minmax(0, max-content)` NAS DUAS PONTAS, E NÃO `max-content` SECO: coluna de grade em
`max-content` não encolhe, e numa tela estreita o par mais comprido do projeto empurraria
a lista para fora da caixa — a página inteira deslizando para o lado, que é o defeito de
02/09. Com o `minmax`, quando o espaço aperta o nome quebra em duas linhas, que é o que
uma lista deve fazer.
O `@supports` É PARA NAVEGADOR SEM `subgrid` (Safari anterior ao 16, Firefox anterior ao
71): lá a lista volta a ser um bloco comum e cada linha se arruma sozinha, encostada à
esquerda. Perde-se o alinhamento dos símbolos entre as linhas; não se perde o pedido. */
.aspects-grupos .aspects-list{display:grid; grid-template-columns:minmax(0,max-content) var(--asp-col) minmax(0,max-content); justify-content:start;}
/* E A LINHA NÃO SE PARTE AO MEIO, que foi o que este conserto quase introduziu: com o bloco
virando grade, a quebra de coluna passou a poder cair DENTRO de uma linha — medido, duas
delas ficaram com 9 px no pé de uma coluna e o resto no topo da seguinte. O `avoid` aqui é
na LINHA, e não no bloco: o bloco continua podendo se repartir (é ele que nivela as três
colunas, ver o `.asp-grupo`), o que não pode é meia linha. */
.aspects-grupos .aspects-list li{display:grid; grid-template-columns:subgrid; grid-column:1 / -1; gap:8px; break-inside:avoid;}
@supports not (grid-template-columns: subgrid){
.aspects-grupos .aspects-list{display:block;}
.aspects-grupos .aspects-list li{grid-template-columns:auto var(--asp-col) auto; justify-content:start;}
}
.aspects-list li:last-child{border-bottom:none;}
.aspects-list li:hover{background:var(--card-alt); border-radius:6px;}
.aspects-list .aspect-side{display:flex; align-items:center; gap:7px; min-width:0; line-height:1.35;}
/* O LADO DE CIMA ENCOSTA À ESQUERDA COMO O DE BAIXO — 13/09/2026. Ele era alinhado à
DIREITA para encostar no símbolo do meio, e era isso que criava o eixo central. */
.aspects-list .aspect-side-a{justify-content:flex-start; text-align:left;}
.aspects-list .aspect-side-b{justify-content:flex-start; text-align:left;}
.aspects-list .glyph{color:var(--brass-dark); flex:none; font-variant-emoji:text; -webkit-font-variant-emoji:text;}
.aspects-list .aspect-type{color:var(--muted); font-size:var(--c-etiqueta); text-transform:uppercase; letter-spacing:0.05em; display:grid; grid-template-columns:14px minmax(0,1fr); align-items:center; gap:6px; line-height:1.3;}
.aspects-list .aspect-icon{font-size:var(--c-apoio); color:var(--brass-dark); text-transform:none; text-align:center; font-variant-emoji:text; -webkit-font-variant-emoji:text; font-family:'Noto Sans Symbols','Noto Sans Symbols 2','Segoe UI Symbol','Inter',sans-serif;}
@media(max-width:560px){
.aspects-list{--asp-col:90px;}
.aspects-list li{gap:6px; font-size:var(--c-apoio);}
.aspects-list .aspect-side{gap:5px;}
.aspects-list .aspect-type{font-size:var(--c-micro); letter-spacing:0.02em; grid-template-columns:12px minmax(0,1fr); gap:4px;}
.aspects-list .aspect-icon{font-size:var(--c-etiqueta);}
}
table.pos-table{width:100%; border-collapse:collapse; font-size:var(--c-apoio);}
table.pos-table th{text-align:left; font-size:var(--c-etiqueta); color:var(--muted); text-transform:uppercase; letter-spacing:0.07em; padding-bottom:9px; border-bottom:1px solid var(--border); font-weight:600;}
table.pos-table td{padding:10px 4px; border-bottom:1px solid var(--border-soft); color:var(--ink);}
table.pos-table tr{transition:background var(--dur-fast) var(--ease);}
table.pos-table tbody tr:hover{background:var(--card-alt);}
table.pos-table td.glyph{color:var(--brass-dark); width:22px; font-size:var(--c-corpo);}
table.pos-table td .moon-phase-inline{display:block; font-size:var(--c-etiqueta); color:var(--muted); font-weight:400; margin-top:2px; letter-spacing:0.01em;}
table.pos-table tr.divider td{padding-top:16px; border-top:1px solid var(--border); font-size:var(--c-etiqueta); color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; font-weight:600;}
/* A DUAS COLUNAS SÓ A PARTIR DE 900 px — 02/09/2026, e a mudança de 820 para 900 é toda
sobre TABLET, que foi a terceira pergunta da dona: "a plataforma comporta tablet?".
Comporta, mas em pé ela caía no pior dos dois mundos. Um iPad em pé tem 834 px: com o
corte em 820 ele passava raspando para as DUAS colunas, e a roda encolhia de 770 px
(que é o que ela tem num iPad mini de 744) para 399 — metade do tamanho num aparelho
MAIOR. Duas colunas de 400 px não são um layout de duas colunas; são duas colunas
espremidas, e a que perde é sempre o gráfico.
Em 900 o iPad em pé fica com a roda inteira na largura da tela, que é o enquadramento
de quem vai gravar o mapa, e o de 1024 em pé continua com as duas colunas — lá elas
têm 504 e 412 px e cabem de verdade. */
/* A COLUNA ÚNICA É DO TELEFONE, E SÓ DELE — 03/09/2026, de noite. Este teto era 900 px, e
com isso o TABLET EM PÉ (834) recebia a coluna única do celular: a roda pequena no meio de
um creme largo e as fichas empilhadas uma embaixo da outra. Era exatamente o que a dona
nomeou: "pensar nas páginas para tablet terem divisões diferentes do telefone".
Agora o teto é 760 e a faixa do tablet tem desenho próprio, logo abaixo. */
@media (max-width:759.98px){ .resultado-grid{grid-template-columns:1fr;} }
/* No celular a roda usa a LARGURA INTEIRA DA TELA: ela come os 24 px de respiro do
`.wrap` de cada lado, e mais 4 px do padding do `.wheel-wrap`, que agora é zero.
Ela NÃO é cortada por isso: o `preserveAspectRatio` do SVG é `meet`, então o desenho
inteiro sempre cabe na caixa — o que muda é o tamanho, não o enquadramento. Num aparelho
de 390 px isso é 390 px de roda contra os 312 de antes de hoje: 25% a mais.
Respiro lateral em volta de um gráfico não é elegância, é gráfico menor. */
@media (max-width:680px){ .resultado-section .wheel-wrap{margin:0 -24px;} }
/* ==========================================================================
A JANELA DEITADA — 03/09/2026, de noite
==========================================================================
Dois dos quatro pedidos da dona vieram numa mensagem só, com fotos do tablet deitado:
"O início da página ainda está grande, o formulário sabe? Se subir um pouco ele aparece
completo na primeira página; ele aparece cortado."
"O gráfico do mapa, resultado gratuito, mesmo problema: não parece encaixado."
É O MESMO DEFEITO, e ele não é de largura — é de ALTURA. Um tablet deitado tem 1.365 px
de largura e 640 de altura. Todo o desenho desta página foi pensado numa janela alta, onde
respiro vertical é barato; ali ele é o recurso escasso, e a largura é que sobra.
MEDIDO ANTES, numa janela de 1365x640:
· o cartão do formulário nasce a 215 px do topo e tem 614 de altura — acaba em 829,
quase 200 px abaixo da dobra. O botão "gerar" fica FORA da tela;
· na tela do resultado, o cabeçalho (título e frase) come 263 px antes de a roda
começar; a roda tem 397 e acaba em 660, ou seja, cortada por 20 px.
O CORTE DE ALTURA É `max-height:760px`, e a largura mínima de 900 é o que impede que isto
caia num telefone deitado, onde a coluna é estreita e o desenho é outro. Um notebook de
768 px de altura entra aqui de propósito: ele tem a mesma escassez, em menor grau.
1) O FORMULÁRIO PASSA A USAR A LARGURA QUE SOBRA. A lista do que se recebe sai de baixo
do botão e vai para uma coluna ao lado — 105 px de altura que viram largura, numa
janela onde há 800 px de creme vazio de cada lado do cartão. O resto é aperto de
respiro: rótulos, campos e margens, sem tocar no tamanho da letra dos campos, que
continua em 16 px (abaixo disso o iOS dá zoom na página quando o dedo toca o campo).
2) A ARTE DE CIMA CEDE. `min(176px, 22vh)` dá 141 px numa janela de 640; passa a 10vh, que
dá 64. A aquarela continua abrindo a página — ela ocupa a tela inteira atrás do cartão,
e é do lado que ela aparece, não em cima.
3) NA TELA DO RESULTADO o cabeçalho encolhe e a roda passa a ser medida contra o que
sobra: `min(520px, 62vh)` não sabe que há 263 px de texto antes dela. */
@media (min-width:900px) and (max-height:760px){
/* O RESPIRO DA ARTE DESCEU DE 10vh PARA 6vh EM 13/09/2026, e o número tem conta. A lista
do que se recebe voltou para baixo do botão (ver o bloco logo abaixo), e mesmo deitada
numa linha ela devolveu altura ao cartão: medido na página construída, a 1365x640, o
cartão acabava a 660 px numa janela de 640 — 20 px fora da primeira tela. A régua da
janela deitada reprovou, e com razão: ali o cartão inteiro tem de caber sem rolagem.
Os 6vh dão 38 px nessa janela (eram 64) e devolvem 26. O resto veio do respiro de
dentro do cartão, logo abaixo. */
/* O 6vh ENTRA PELO TOKEN, E NÃO POR CIMA DO `--respiro-da-arte` — 16/09/2026. É o
mesmo aperto de sempre; o que muda é que agora ele pode ser desligado de fora sem
o número de hoje ser copiado junto (ver o bloco do `--respiro-em-altura`, lá em
cima). Quem o desliga é o fecho do blog, onde esta seção não é primeira dobra.
O `--cartao-deitado` sai daqui pela mesma razão: ele é o teto do cartão NESTA
janela, e a grade de duas colunas precisa saber esse teto para não deixar um vão
morto na borda direita — ver o bloco da grade, logo abaixo. */
.gerar-section{--respiro-em-altura:6vh; --cartao-deitado:620px; padding-bottom:56px;}
/* A LISTA VOLTOU PARA BAIXO DO BOTÃO — 13/09/2026, a pedido da dona, com a foto da tela
deitada ao lado: "gráfico completo, signos nos planetas etc deve seguir embaixo do
gerar meu mapa astral; vc colocou lado".
ELA ESTAVA AO LADO DESDE 04/09, e a razão de então continua verdadeira: nesta janela
(900 px ou mais de largura, 760 ou menos de altura) o cartão inteiro precisa caber sem
rolagem, senão o botão fica abaixo da dobra — que é o defeito que aquele bloco nasceu
para consertar. A lista empilhada custava 105 px de altura.
O QUE PAGA A CONTA DOS DOIS LADOS É A LISTA DEITAR-SE, e não voltar a empilhar: os três
itens numa LINHA embaixo do botão custam cerca de 40 px em vez de 105. A ordem de leitura
vira a que ela pediu — preencher, gerar, e então o que se recebe —, e o botão continua
visível na janela de 640 px de altura que originou o bloco. Nas janelas altas nada
mudou: lá a lista sempre esteve embaixo, empilhada, e continua.
E A GRADE DO CARTÃO SAI JUNTO. Ela existia só para abrir a segunda coluna; mantida sem a
lista dentro, sobraria uma faixa de 250 px de nada à direita dos campos — o mesmo
"reservado para uma lista que não existe" que o parágrafo abaixo descreve como quebra. */
/* O SELETOR COMEÇA EM `#view-catalog`, E A FALTA DISSO FOI UMA QUEBRA REAL — 04/09/2026,
fotografada pela dona: "a página dos mapas ficou toda cagada".
ESTE BLOCO EXISTE POR CAUSA DA LISTA DO QUE SE RECEBE, e essa lista só existe no
formulário da TELA DE INÍCIO. Escrito como `.birth-form` solto, ele alcançava também o
formulário de encomenda das 33 páginas de produto — que tem a mesma classe e NÃO tem a
lista. Resultado, medido numa janela de 1365x640: a coluna dos campos ficava com 106 px
(o cartão tem 440, menos os 250 reservados para uma lista que não existe e o vão de 34),
e os rótulos saíam quebrando uma palavra por linha, com os campos de data e hora do
tamanho de um selo.
Uma regra de aperto que mira uma classe compartilhada aperta a tela errada, e a tela
errada aqui é justamente a que cobra. */
/* A ÂNCORA MUDOU DE `#view-catalog` PARA `.gerar-section` EM 10/09/2026, e ela ficou
mais precisa em vez de mais larga: o que este bloco precisa é do formulário QUE TEM
A LISTA, e a lista só existe dentro da `.gerar-section`. O formulário de encomenda
das 33 páginas de produto continua fora do alcance — que era o defeito de 04/09,
fotografado pela dona ("a página dos mapas ficou toda cagada"). */
.gerar-section .birth-form{padding:18px 26px;}
.gerar-section .birth-form .birth-form-titulo{margin-bottom:12px;}
.gerar-section .birth-form .birth-form-checklist{
flex-direction:row; flex-wrap:wrap; gap:6px 22px; margin-top:10px;
}
.gerar-section .birth-form label{margin:10px 2px 6px;}
.gerar-section .birth-form > label:first-of-type{margin-top:0;}
.gerar-section .birth-form .row2 label{margin-top:10px;}
.gerar-section .birth-form input{height:40px;}
.gerar-section .birth-form .consent-row{margin:12px 0 2px;}
.gerar-section .birth-form .btn-primary{margin-top:14px; padding:13px;}
/* A TELA DO RESULTADO: cabeçalho curto e roda medida contra a sobra. Os 26vh da roda mais
os ~150 do cabeçalho cabem na janela — o que a conta antiga não fazia, porque ela media
a roda contra a tela inteira e ignorava o texto que vem antes dela. */
.resultado-section{padding:32px 0 48px;}
.resultado-section .section-head{margin:0 0 26px;}
.resultado-section .section-head h2{font-size:var(--t-secao);}
.resultado-section .resultado-grid{margin-top:22px; row-gap:24px;}
.resultado-section .wheel-wrap .roda-zoom:not(.em-tela-cheia){width:min(520px, 66vh);}
}
/* ==========================================================================
O TABLET EM PÉ TEM DIVISÃO PRÓPRIA — 03/09/2026, de noite
==========================================================================
Pedido da dona, com a foto da roda enquadrada do jeito que ela quer: "poderia ser
enquadrado assim". E, junto, o princípio que ela nomeou e que vale mais que o pedido:
"Talvez algo que te ajude é pensar nas 'páginas' para tablet terem divisões diferentes
do telefone."
ELA ESTÁ CERTA, E O NÚMERO MOSTRA. Até agora esta tela tinha DUAS divisões: a do telefone
(uma coluna, até 900 px) e a do computador (duas colunas, de 900 para cima). O tablet em
pé — 834 px — caía na do telefone. Medido nessa janela, antes:
· a roda tinha 520 px numa coluna de 770 — 68% da largura, com 125 px de creme vazio de
cada lado. Na foto dela a roda ocupa uns 81% da tela, que é o enquadramento pedido;
· a tabela de posições, a grade de aspectos e o quadro de elementos vinham EMPILHADOS,
um embaixo do outro, cada um ocupando os 770 px de largura para mostrar uma coluna de
texto de 300. A seção media 2.767 px de altura.
A DIVISÃO DO TABLET, medida depois na mesma janela: a roda passa a 680 px (81% da tela,
que é a foto dela), as posições ficam de um lado e a grade mais os elementos do outro, e a
seção cai para 2.441 px. É a mesma ORDEM de leitura do computador — a roda primeiro,
sozinha; as fichas depois, em duas colunas que acabam juntas —, com as proporções da
janela mais estreita.
AS COLUNAS NÃO SÃO METADE E METADE, e o motivo é a grade de aspectos: ela é uma tabela de
doze por doze que não quebra linha. Com 27 px por célula ela mede 384 px, e numa coluna de
385 (a metade exata) ela transbordaria — foi o que a primeira tentativa fez, e apareceu
como um risco vertical na borda direita. 0,9 contra 1,1 dá 335 e 409: a tabela de posições
cabe folgada nos 335 (ela é texto, e quebra), e a grade cabe nos 409 com 25 de sobra.
E O CORTE DE BAIXO VIRA 760, que é onde a `.hero` já vira duas colunas: a página inteira
passa a mudar de divisão no mesmo ponto, em vez de o cabeçalho virar tablet aos 760 e o
resultado só aos 900. */
@media (min-width:760px) and (max-width:899.98px){
.resultado-section .wheel-wrap .roda-zoom:not(.em-tela-cheia){width:min(680px, 100%);}
.resultado-section .resultado-grid{
grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
column-gap:26px; row-gap:28px; margin-top:26px;
}
/* O `:not(.section-head)` ENTROU EM 03/09/2026, de noite, com o cabeçalho descendo para
dentro da grade. Sem ele, o cabeçalho — que é um `div` sem `bloco-do-mapa` — virava
transparente como os invólucros, e o sobretítulo, o nome, a data e a frase viravam
QUATRO células da grade, cada uma numa linha. */
.resultado-section .resultado-grid > div:not(.bloco-do-mapa):not(.section-head){display:contents;}
.resultado-section .resultado-grid > div > *{min-width:0;}
.resultado-section .wheel-wrap{grid-column:1 / -1; grid-row:1;}
.resultado-section .section-head{grid-column:1 / -1; grid-row:2;}
.resultado-section .bloco-das-posicoes{grid-column:1; grid-row:3 / span 2;}
.resultado-section .bloco-da-grade{grid-column:2; grid-row:3;}
.resultado-section .bloco-dos-elementos{grid-column:2; grid-row:4;}
.resultado-section .aspectos-largo{grid-column:1 / -1; grid-row:5;}
/* 27 px por célula, e não os 30 do computador: a conta está no comentário acima. O
`padding:0` é o que faz o número valer — com respiro interno a célula cresce por dentro
e a largura escrita vira um piso, não uma medida. */
.resultado-section .ga-tabela th, .resultado-section .ga-tabela td{width:27px; min-width:27px; height:27px; padding:0;}
}
/* E ABAIXO DE 800 A CÉLULA DESCE MAIS UM DEGRAU. Medido num tablet de 760: a coluna da
direita fica com 369 px e a grade de 27 px mede 384 — transborda por 15. Com 24 px ela
mede 348 e cabe. É a mesma tabela; o que muda é o tamanho da casa, e o glifo do aspecto
continua legível porque ele nunca dependeu da casa para caber: o número da orbe embaixo
dele é que é miúdo, e ele já é `--c-micro` nas três larguras. */
@media (min-width:760px) and (max-width:799.98px){
.resultado-section .ga-tabela th, .resultado-section .ga-tabela td{width:24px; min-width:24px; height:24px;}
}
/* ---------- INTERPRETAÇÕES DISPONÍVEIS (carrossel) ---------- */
/* O RESPIRO DE CIMA ENCOLHEU — 01/09/2026. Eram 88 px de creme entre a arte e o título;
com a arte descendo até aqui e se dissolvendo (ver `pagina-inicial-e-formulario.css`),
esse tanto de vazio devolvia o corte que a continuação veio fechar. Os 34 px que sobram
são o que o título precisa para não nascer colado na aquarela. */
.catalog{padding:34px 0 88px;}
/* A VITRINE É UM DESTINO DE ROLAGEM DESDE 03/09/2026: o "Ver o catálogo completo" da
gaveta rola até ela ("Escolha uma área para compreender primeiro", a pedido da dona).
O `header` é `position:sticky` e mede 82 px — sem esta folga o cabeçalho comeria o
título da seção, e a pessoa chegaria numa fileira de cartões sem saber o que é. O
número é o mesmo do `#top`, no `pagina-inicial-e-formulario.css`, pela mesma medição. */
.catalog{scroll-margin-top:90px;}
.catalog-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:22px; flex-wrap:wrap; gap:8px;}
/* O TÍTULO DA SEÇÃO CRESCEU — 01/09/2026: "Escolha uma área maior, ela é Título; o nome
das seções é subtítulo, manter o tamanho que está".
Ele vinha do tamanho que o navegador dá a um `h2` sem regra (23 px) e ficava MENOR que
os nomes das coleções (26 px) — a hierarquia estava invertida na tela. Agora o título
abre em 33 px no celular contra os 26 dos nomes, e os nomes não mudaram um pixel. */
.catalog-head h2{font-size:clamp(30px, 8.5vw, 44px); line-height:1.14; text-wrap:balance;}
/* O RESPIRO DO "QUAL MELHOR MOMENTO?" — 30/08/2026.
Ele mora DENTRO da mesma `.catalog` das interpretações, e é outra seção: outro produto,
outro caminho de compra. Com os 14 px que tinha antes (escritos no `style=` da própria
`.catalog-head`, onde nenhuma regra daqui alcançava), o título encostava na última
fileira de cima e lia-se como mais uma prateleira do catálogo de nascimento.
Os 72 px de cima separam as duas seções; os 64 de baixo devolvem a mesma folga antes do
que vem depois, e a `.catalog-head` daqui abre 34 para o título não colar nos cartões.
No celular a mesma distância come meia tela, então cai para pouco mais da metade. */
#eletiva-na-home{margin-top:72px; padding-bottom:64px;}
#eletiva-na-home > .catalog-head{margin-bottom:34px;}
@media (max-width:700px){
#eletiva-na-home{margin-top:44px; padding-bottom:36px;}
#eletiva-na-home > .catalog-head{margin-bottom:24px;}
}
/* ---------- AS SETAS DA FILEIRA — 01/09/2026, a pergunta da dona ----------
"Sobre botões de rolagem dos mapas, tem necessidade? Já é tão intuitivo passar para o
lado, penso que talvez seja poluição visual."
NO CELULAR ELA TEM RAZÃO, E AS SETAS SAEM. Passar o dedo é o gesto da tela, a fileira já
encaixa cartão a cartão e o do meio cresce — a affordance está no próprio movimento. E
os botões tinham 34 px, abaixo dos 44 que um dedo pede: eram enfeite difícil de acertar.
NO COMPUTADOR ELAS FICAM, e não é teimosia: a fileira esconde a barra de rolagem
(`scrollbar-width:none`, logo acima) e o mouse não passa o dedo. Sem as setas, as 31
leituras ficam atrás de um gesto que aquele aparelho não tem — e nada na tela diria que
há mais cartão à direita. Tirar dos dois lugares trocaria poluição por conteúdo
escondido.
A RÉGUA É O PONTEIRO, E NÃO A LARGURA DA TELA: `pointer:coarse` é "isto é um dedo", e
responde certo no tablet largo (dedo, sem setas) e no notebook estreito (mouse, com
setas). Largura de tela erraria os dois.
E NO COMPUTADOR ELAS MUDARAM DE LUGAR — sugestão dela na mesma mensagem ("sugiro outro
tipo de rolagem com botões laterais"): saíram do cabeçalho e foram para as BORDAS da
fileira, na altura dos cartões, que é onde o movimento acontece. Por isso o `.row-arrows`
deixou de morar dentro do `.group-head` nos quatro moldes que o desenham: ele é irmão da
fileira agora, e as duas dividem a mesma célula da grade. */
.row-arrows{display:flex; gap:8px;}
.row-arrows button{
width:44px; height:44px; border-radius:50%; border:1px solid var(--border);
background:#fff; color:var(--ink); font-size:17px; line-height:1; box-shadow:var(--shadow-2);
}
.row-arrows button:hover{border-color:var(--brass); color:var(--brass-dark); box-shadow:var(--shadow-3);}
.row-arrows button:active{transform:scale(0.94);}
/* A ORDEM IMPORTA AQUI: as duas regras abaixo mexem no mesmo `display` do bloco de cima e
têm a mesma força. Escritas antes dele, o `display:flex` de cima venceria por vir depois
e as setas voltariam a aparecer no celular — que é exatamente o defeito que elas vêm
corrigir. Regra que perde para a própria irmã não dá erro: ela só não acontece. */
/* AS SETAS VOLTAM AO DEDO, A PARTIR DO TABLET — 03/09/2026, e isto DESFAZ uma decisão
escrita neste mesmo arquivo em 26/08 ("dedo, sem setas"). O pedido da dona é o motivo, e
ele vale mais que a regra antiga: "adiciona seta às esteiras de produtos, porque apesar
de ser intuitivo para mim não é todo mundo que vai saber que pode rolar com o dedo".
A REGRA VELHA NÃO ESTAVA ERRADA — ela estava incompleta. Num telefone a prateleira que
corre para o lado é um gesto que todo mundo já viu, e a seta ali cobre um cartão de 250 px.
Num tablet DEITADO a mesma fileira parece uma grade parada: cabem três ou quatro cartões
inteiros, nada indica que há mais, e não há ponteiro para revelar seta nenhuma ao passar.
Quem chega ali vê uma prateleira que acabou.
POR ISSO O CORTE É A LARGURA, e não o tipo de ponteiro: do tablet para cima o dedo ganha
as setas; no telefone continua tudo como está — que é o que ela aprovou e o que o resto
deste arquivo descreve. Os 700 px são a mesma fronteira que a folha já usa para trocar o
desenho da prateleira. */
@media (hover:none), (pointer:coarse){
.row-arrows{display:none;}
}
/* A GRADE QUE PÕE AS SETAS SOBRE A FILEIRA saiu de dentro do `@media` do mouse hoje: ela é
POSIÇÃO, e a posição vale para qualquer ponteiro. Só o `display` é que muda de resposta
conforme o aparelho — e é ele que fica nas duas consultas abaixo.
As duas ocupam a MESMA célula da grade, e o `align-self:center` acha o meio vertical
sozinho, mesmo que a altura do cartão mude um dia. Posição absoluta pediria a altura da
fileira escrita à mão em algum lugar, e ela muda com o conteúdo.
A COLUNA É ESCRITA NAS DUAS, e não só a linha: com a coluna em `auto`, a grade RECUSA
sobrepor — ela acha a célula 2/1 ocupada pela fileira e abre uma coluna 2 implícita ao
lado. Foi o que aconteceu na primeira tentativa: as duas setas foram parar juntas na
direita, e a fileira encolheu 96 px para dar lugar a elas. Sobreposição em grade se pede
pelo endereço INTEIRO da célula. */
.catalog-group{display:grid; grid-template-columns:minmax(0,1fr);}
.group-head{grid-row:1; grid-column:1;}
.poster-row{grid-row:2; grid-column:1;}
.row-arrows{
grid-row:2; grid-column:1; align-self:center; z-index:3;
/* OS 26 px SÃO O QUE TIRA O DISCO DE CIMA DO TEXTO — 09/09/2026, e o número foi medido,
não escolhido. Com os -14 px de antes, o disco de 44 acabava 30 px dentro da fileira e
o texto do primeiro cartão começa 21 px dentro dele: 9 px de letra por baixo de um
disco branco, no primeiro e no último cartão, em toda largura de 700 a 1440. Era o que
a dona via desde que os cartões das pontas deixaram de ser apagados — antes o disco
pousava sobre um cartão já esmaecido e se notava menos.
O TETO É A MARGEM DA PÁGINA, E ELE É 24 — não 32, e a diferença custou uma reprovação
na CI. A `.wrap` tem 32 px de margem na tela de início, mas a tela de produto usa 24
(`#view-product .wrap{padding:0 24px}`) e a folha estreita também. Puxar 26 fazia a
PÁGINA ROLAR 2 PX PARA O LADO em quatro conferências — e 2 px de rolagem lateral é
exatamente o que uma delas existe para não deixar passar.
Com 24, o disco encosta na borda do texto do cartão sem cobri-lo, e não sai da página
em largura nenhuma. A régua mede as duas coisas — a sobreposição e a rolagem —, e não
este número. */
justify-content:space-between; margin:0 -24px;
pointer-events:none; /* a faixa entre as duas setas não pode roubar o clique do cartão */
}
.row-arrows button{pointer-events:auto;}
@media (hover:hover) and (pointer:fine){
.row-arrows{display:flex;}
}
/* As duas consultas separadas, e não uma com `or`: é a mesma forma que a regra de cima já
usa, e ela funciona em navegador antigo — uma consulta com sintaxe nova que o aparelho
não entende é a regra inteira descartada, e aí a seta some justamente onde ela foi pedida. */
@media (hover:none) and (min-width:700px){
.row-arrows{display:flex;}
}
@media (pointer:coarse) and (min-width:700px){
.row-arrows{display:flex;}
}
/* NO DEDO ELAS SÃO MENORES E MAIS DISCRETAS: 38 px em vez de 44, e sem a sombra alta. Elas
ficam POR CIMA do primeiro e do último cartão da fileira, e num toque não há o realce de
passagem que, no mouse, avisa que aquilo é um controle e não parte do cartão. */
@media (hover:none) and (min-width:700px){
.row-arrows button{width:38px; height:38px; font-size:15px; box-shadow:var(--shadow-1); opacity:0.92;}
}
@media (pointer:coarse) and (min-width:700px){
.row-arrows button{width:38px; height:38px; font-size:15px; box-shadow:var(--shadow-1); opacity:0.92;}
}
/* SETA QUE NÃO LEVA A LUGAR NENHUM NÃO APARECE — 03/09/2026, e este é um defeito que só
existe em tela larga: numa prateleira de dois cartões (o "Corpo e rotina" da home tem
dois; o "Estudos", um) os 500 px de cartão cabem inteiros nos 1080 do computador, e as
duas setas ficavam ali prometendo um terceiro cartão que não existe. Clicar não movia
nada. No celular a prateleira de dois já transborda, então a pergunta nunca se colocou.
A RÉGUA É A `tem-mais`, a mesma que os depoimentos já usam desde 03/09 (ver
`metodo-testemunhos-faq-e-rodape.css`, e o porquê de ela não ser a `em-carrossel` está
escrito lá): ela é o motor dizendo "os cartões passam da borda, logo há para onde ir".
Duas réguas para a mesma pergunta é como uma delas fica para trás.
O `~` alcança as setas porque elas são a IRMÃ SEGUINTE da fileira nos quatro moldes que
desenham prateleira — o da home e os três da Eletiva. E o seletor pesa mais que o
`display:flex` das regras acima (duas classes e um `:not` contra uma classe), em qualquer
ordem de arquivo. */
.poster-row:not(.tem-mais) ~ .row-arrows{display:none;}
/* O padding de cima e de baixo não é respiro: é o espaço em que o cartão do meio
cresce. `overflow-x:auto` faz o navegador cortar o que passar da altura da linha,
então sem essa folga a borda do cartão que vem para a frente ficaria decepada.
ELE NÃO ESTAVA COBRINDO A SOMBRA — 01/09/2026, e era isto que a dona via: "tem uma cor
que quebra entre uma seção e outra, acredito que seja tipo a sombra dos cards, mas fica
amador visualmente". Era a sombra mesmo, e o que estragava não era ela: era o CORTE
dela. Uma faixa cinza-clara abaixo dos cartões terminando numa reta perfeita
atravessando a tela inteira — exatamente o que se vê no print que ela circulou.
A CONTA, medida no navegador e não estimada — a primeira versão desta correção errou
justamente por estimar, e o degrau continuou lá com 20 px a mais de respiro:
`overflow-x:auto` faz o navegador cortar TAMBÉM na vertical (as duas direções andam
juntas: pedir rolagem numa transforma a caixa em recorte na outra), então tudo o que a
linha desenha precisa caber dentro dela. E QUEM MANDA NA CONTA NÃO É O CARTÃO COMUM, é o
`COMECE POR AQUI` de cada prateleira — justamente o cartão que a dona circulou no print.
Ele é `.featured`, e a `.featured` carregava a `--shadow-4`, a sombra mais alta da
escala: `0 26px 56px`. Ela desce 26+56 = 82 px abaixo da borda, e o cartão do meio ainda
é ampliado em 8% (`--perto`), o que multiplica tudo por 1,08 e o faz crescer mais uns
14 px para baixo. Noventa e seis píxeis de sombra dentro de uma folga de trinta: o que
sobrava não era uma sombra, era uma FAIXA CINZA terminando numa reta de tela a tela.
SÃO DOIS CONSERTOS, e um sozinho não bastava:
· a `.featured` desceu para a `--shadow-3` (`0 16px 36px`), logo abaixo daqui. Ela
continua sendo a sombra mais alta da fileira — que é como o destaque se anuncia
desde que o contorno bege saiu —, e pede 52 px em vez de 82;
· esta folga passou a 40 px em cima e 72 embaixo. A conta: (16+36)×1,08 = 56 de sombra
mais 14 de ampliação = 70 embaixo; (36−16)×1,08 = 22 mais 14 = 36 em cima.
O PREÇO SÃO 62 PX DE ALTURA POR FILEIRA, E ELE NÃO APARECE NA TELA: a margem entre
coleções encolheu na mesma medida (`colecoes-da-pagina-inicial.css`), e a distância entre
o último cartão de uma prateleira e o título da seguinte continua sendo os 106 px de
antes. O respiro não cresceu — ele mudou de lado da linha do recorte. */
/* `--cartao-natural` É A LARGURA DE DESENHO DO CARTÃO, e ela mora aqui para que o motor
das fileiras possa LER sem realimentar a própria conta — ver o comentário do
`--cartao-cabido`, em `mapas/roda-de-sinastria.js`. Quem manda no tamanho continua
sendo o `flex-basis` do cartão; esta linha só o diz em voz alta. */
.poster-row{--cartao-natural:250px; display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:40px 4px 72px; scrollbar-width:none;}
.poster-row::-webkit-scrollbar{display:none;}
/* O CARROSSEL — a classe que o JavaScript liga quando os cartões não cabem na linha.
Ela faz DUAS coisas que a escala sozinha não faz:
· tira o `gap` e puxa cada cartão 10 px para dentro do vizinho, para o do meio cobrir
mesmo quem está ao lado — crescer 8% não vence um vão de 16 px;
· encaixa pelo CENTRO, e não pelo começo: a cada rolagem é o cartão do meio que para
no meio, que é o que a animação destaca. `--respiro` (escrito pelo JavaScript) é a
folga das pontas que deixa o primeiro e o último também chegarem lá. */
.poster-row.em-carrossel{gap:0; padding-inline:var(--respiro, 4px); scroll-padding-inline:var(--respiro, 4px);}
.poster-row.em-carrossel > .poster-card{margin-inline:-10px; scroll-snap-align:center;}
.poster-card{
flex:0 0 var(--cartao-cabido, var(--cartao-natural, 250px)); scroll-snap-align:start; background:var(--card); border:1px solid var(--border);
border-radius:var(--radius-md); overflow:hidden; display:flex; flex-direction:column;
box-shadow:var(--shadow-2); animation:cartaoEntra var(--dur-slow) var(--ease-soft) both;
position:relative; z-index:var(--camada,1); transform:scale(var(--perto,1)); opacity:var(--visto,1);
}
/* O CARTÃO QUE VEM PARA A FRENTE — 26/08/2026.
`--perto` e `--visto` são escritos pelo JavaScript a cada rolagem da linha: 0,84 e
apagado para quem está longe do meio, 1,08 e inteiro para quem está no meio. Quem manda
no desenho é a CSS; o JavaScript só diz a que distância do centro o cartão está.
E É POR ISSO QUE A ENTRADA DEIXOU DE SER A `fadeInUp`: o `to` dela fixa
`transform:translateY(0)`, e uma animação com `fill: both` continua mandando no
`transform` para sempre depois de terminar — o que fazia esta linha e o `:hover`
logo abaixo não terem efeito nenhum. A `cartaoEntra` não escreve `transform` no
`to`, então, acabada a entrada, quem decide o tamanho volta a ser a cascata. */
@keyframes cartaoEntra{from{opacity:0; transform:translateY(10px) scale(var(--perto,1));} to{opacity:var(--visto,1);}}
@media (prefers-reduced-motion: reduce){ .poster-card{transform:none; opacity:1;} }
.poster-row .poster-card:nth-child(1){animation-delay:0ms;} .poster-row .poster-card:nth-child(2){animation-delay:40ms;}
.poster-row .poster-card:nth-child(3){animation-delay:80ms;} .poster-row .poster-card:nth-child(4){animation-delay:120ms;}
.poster-row .poster-card:nth-child(n+5){animation-delay:150ms;}
/* O CONTORNO BEGE SAIU DOS CARTÕES — 01/09/2026, a pedido da dona ("tem cards que ainda
têm contorno bege"). É a continuação da passada de 31/08 que transformou a `--border` em
tinta transparente: estas duas linhas eram o que ainda escrevia o latão à mão, e por isso
sobreviveram a ela — o cartão "Comece por aqui" de cada prateleira saía com um anel bege
duplo (moldura mais filete interno) numa página que já não é cor de pergaminho.
O DESTAQUE NÃO SE PERDE, ele muda de instrumento: o cartão em destaque continua dizendo
o que é pela TARJA "Comece por aqui" e passa a se levantar pela SOMBRA, que é a mesma
linguagem que o resto do app usa para dizer "isto está mais perto de você". Cor de
moldura era a única peça daquele desenho que não pertencia à página onde ele está.
E o `:hover` vai junto: num celular o `:hover` GRUDA depois do toque, então aquele latão
não era um realce de passagem — era um contorno bege que ficava no cartão tocado até a
pessoa tocar noutro. */
/* A SOMBRA DO DESTAQUE É A `--shadow-3`, E NÃO A `--shadow-4` — 01/09/2026. O motivo
inteiro está na conta da `.poster-row`, logo acima: a `--shadow-4` não cabia no recorte
da fileira e chegava à borda dela em força quase cheia, virando um degrau reto. Um passo
abaixo na escala de elevação cabe, e continua sendo a sombra mais alta desta fileira —
que é tudo o que o destaque precisa dizer. */
/* O REALCE DE PASSAGEM SÓ EXISTE ONDE HÁ PASSAGEM — 02/09/2026, e este é o conserto do
"estou precisando clicar 2 vezes no botão pra conseguir abrir cada página de mapa".
O DEFEITO NÃO ESTAVA NO BOTÃO, e é por isso que ele não aparece num navegador de mesa:
quem levantava era o CARTÃO. Num iPhone, um primeiro toque sobre um elemento cujo
`:hover` MEXE NO DESENHO é gasto aplicando o hover — o Safari só entrega o clique no
segundo. E este `:hover` fazia a pior versão disso: `translateY(-4px)` tira o cartão de
debaixo do dedo no exato instante do toque, então o alvo se move antes de o clique
chegar. O botão dentro dele herda o problema inteiro, porque quem sobe é o pai.
O ARQUIVO JÁ SABIA DISSO — o comentário logo acima diz "num celular o `:hover` GRUDA
depois do toque", e foi por essa razão que o contorno bege saiu em 01/09. O que faltou
naquele dia foi aplicar a mesma conclusão às duas regras que sobraram.
`(hover:hover) and (pointer:fine)` é o par que descreve mouse: aparelho que consegue
pairar E que aponta com precisão. É a mesma pergunta que as setas da fileira já fazem
trinta linhas acima — e agora as duas metades do carrossel respondem igual. No celular
não sobra hover nenhum para grudar, e o primeiro toque é o único toque. */
@media (hover:hover) and (pointer:fine){
.poster-card:hover{transform:translateY(-4px) scale(var(--perto,1)); box-shadow:var(--shadow-3);}
}
.poster-card.featured{box-shadow:var(--shadow-3);}
.poster-cover{position:relative; height:120px; display:flex; align-items:center; justify-content:center; overflow:hidden; flex:none;}
.poster-cover::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.12));}
.poster-cover .glyph-bg{font-size:74px; opacity:0.22; color:#fff; position:absolute; transition:transform var(--dur-slow) var(--ease); z-index:1;}
/* Pelo mesmo motivo da regra do cartão, trinta linhas acima: girar o glifo é desenho de
passagem, e num aparelho de toque ele é o segundo `:hover` que grudava. */
@media (hover:hover) and (pointer:fine){
.poster-card:hover .poster-cover .glyph-bg{transform:scale(1.08) rotate(-3deg);}
}
.poster-cover .tag{position:absolute; top:12px; left:14px; font-size:var(--c-etiqueta); color:#fff; letter-spacing:0.05em; font-weight:700; text-transform:uppercase; background:rgba(0,0,0,0.32); padding:4px 9px; border-radius:var(--radius-pill); z-index:2; backdrop-filter:blur(4px);}
.poster-body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:10px; flex:1; background:var(--card);}
/* A etiqueta da natureza e o alerta de aviso, no cartão do Mapa eletivo. Moram aqui,
junto do resto do cartão, e não dentro do `#view-eletiva`: o mesmo cartão aparece na
home, na vitrine eletiva e na busca por termo, e regra presa a uma tela é regra que
falta nas outras duas. */
.poster-card .marca{font-size:var(--c-etiqueta); text-transform:uppercase; letter-spacing:0.08em; color:var(--brass-dark); font-weight:700; line-height:1.3;}
.poster-card.el-cartao{cursor:pointer;}
.poster-card h3{font-size:var(--c-lede); letter-spacing:-0.01em;}
.poster-card p{font-size:var(--c-apoio); color:var(--ink-soft); flex:1; line-height:1.55;}
/* A LINHA DO PREÇO VOLTOU A TER DONO — 07/09/2026. Estas duas regras estavam órfãs: a
classe existia na folha e nenhum JavaScript a desenhava desde que o preço saiu do cartão.
Agora o `cartaoPacote` a monta com DOIS filhos — o preço e o prazo —, e por isso o
`justify-content` deixa de ser `center`: com dois, o certo é cada um na sua ponta.
O TAMANHO SAI DA ESCADA, e não do 17px que estava escrito aqui (regra de 01/09: "escolhe
um degrau, nunca um número"). O preço é `--c-lede`, o degrau do texto que puxa o olho; o
prazo é `--c-nota`, o menor, porque ele é a segunda metade da frase e não pode competir
com o número. `text-align:right` no prazo para ele não quebrar torto num cartão estreito. */
.poster-card .price-row{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px solid var(--border-soft);}
.poster-card .price{color:var(--ink); font-weight:700; font-size:var(--c-lede); white-space:nowrap;}
/* O `text-wrap:balance` NÃO É ENFEITE — ele conserta uma órfã que a foto da tela pegou e a
medição não pegaria. Com a quebra gulosa do navegador, "Pronta em até 1 hora" saía como
"Pronta em até 1" / "hora": uma palavra sozinha na segunda linha, encostada na direita,
com cara de texto cortado. Equilibrada, ela parte no meio ("Pronta em até" / "1 hora").
E ele vale para os três idiomas, que é a razão de ser um EQUILÍBRIO e não uma quebra
escrita à mão: "Ready within 1 hour" e "Lista en hasta 1 hora" têm comprimentos
diferentes, e um `
` no lugar certo do português cairia no lugar errado dos outros
dois. É o mesmo instrumento que o botão do cartão já usa, dez linhas abaixo. */
.poster-card .price-row .prazo{color:var(--muted); font-size:var(--c-nota); line-height:1.3; text-align:right; text-wrap:balance;}
/* Botão com altura mínima de duas linhas e texto equilibrado: as chamadas curtas
e as que quebram em duas linhas ficam do mesmo tamanho, então os botões dos
cartões vizinhos param na mesma altura em vez de dançar pela fileira. */
/* O BOTÃO É DA COR DA CAPA — 31/08/2026, a pedido da dona ("botão da mesma cor da capa").
Ele era latão em todos os cartões: vinte e nove capas diferentes e um botão só embaixo,
o que fazia a cor da capa parecer decoração e não identidade da leitura.
`--capa-botao` NÃO é a cor média da capa — é ela escurecida até o branco em cima passar
dos 4,5:1 da WCAG AA. Metade das capas (o âmbar, o verde-água, o céu) reprovaria se o
botão herdasse a cor da capa como ela é, e é justamente no botão que a reprovação custa.
A reserva (`, var(--brass)`) é para cartão sem classe de capa: latão, e não transparente.
A sombra também é tingida — sombra de latão embaixo de botão turquesa suja o tom. */
.poster-card button{background:var(--capa-botao, var(--brass)); color:#fff; font-size:var(--c-apoio); font-weight:700; padding:10px 14px; border:none; border-radius:var(--radius-sm); width:100%; margin-top:4px;
min-height:52px; display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.35; text-wrap:balance;
box-shadow:0 6px 14px var(--capa-sombra, rgba(36,29,18,0.10));}
.poster-card button:hover{background:var(--capa-botao-forte, var(--brass-dark));}
.poster-card button:active{transform:scale(0.98);}
/* AS VINTE E OITO CLASSES `.cover-N` SAÍRAM DAQUI — 31/08/2026.
Elas viraram trinta e uma cores COM NOME em `design/capas-e-cores.css`, lidas também pela
página do produto e pela biblioteca. A vigésima oitava chegou na mescla, com a Astrologia
da Gravidez, e virou a `capa-trigo` — o mesmo dourado, com nome. O porquê da mudança está
escrito lá, com a queixa da dona que a motivou e a colisão de CINCO produtos pelo
`cover-24` que a antecedeu — a quinta foi justamente a Gravidez, na mescla de hoje.
O gradiente da `.poster-cover` também mora lá agora: é o mesmo das outras duas capas. */
/* ---------- PRÉVIA / TEASER BLOQUEADO ---------- */
/* ---------- MÉTODO ----------
TIRADO E DEVOLVIDO NO MESMO DIA — 01/09/2026. A dona pediu a remoção da seção
"Metodologia" das duas telas de manhã e voltou atrás na mesma sessão: "pode manter a
Metodologia, acho que é diferencial importante de manter, né?". Fica escrito porque
apagar isto de novo custaria a alguém o mesmo trabalho duas vezes — e porque o motivo da
volta é de PRODUTO, não de desenho: é o que explica por que o método é lido em conjunto,
e é o argumento de venda que nenhuma outra tela faz.
O que voltou junto: as duas seções no `index.html`, a `bindMethodToggle` do
`roda-de-sinastria.js`, as regras de colisão da tela de produto e este bloco. */
/* ---------- MÉTODO ---------- */
/* ==========================================================================
A FAIXA DE ARTE NO ALTO DAS DUAS SEÇÕES — 01/09/2026
==========================================================================
Pedido da dona: "as seções COMO INTERPRETAMOS SEU MAPA / Metodologia e PERGUNTAS
FREQUENTES / Dúvidas sobre a primeira experiência precisam de um up no visual. Pode usar
as imagens em anexo (uma no topo de cada seção) com a transparência que já utilizamos".
AS DUAS FOTOS SÃO RELÓGIOS ASTRONÔMICOS: a espiral do zodíaco na Metodologia e o
mostrador de Praga nas Perguntas frequentes — na ordem em que ela as mandou. Elas moram
em `assets/relogio-espiral-*` e `assets/relogio-astronomico-*`, cortadas em faixa (3,2:1)
e não no enquadramento original: o que aparece na tela é uma tira, e mandar a foto
inteira para o navegador é pedir que ele descarte metade dos bytes que baixou.
A TRANSPARÊNCIA É A QUE JÁ EXISTE, e não uma receita nova: opacidade baixa mais
`mix-blend-mode:multiply`, que é como a aquarela da faixa do formulário se assenta no
pergaminho (`pagina-inicial-e-formulario.css`). Multiplicar, e não sobrepor, é o que faz
a arte pegar a cor do papel em vez de pousar por cima dele.
O FILTRO É O QUE AS TRAZ PARA A PALETA. As duas fotos são azul-cobalto saturado, e a
paleta daqui é pergaminho e latão: a 38% de multiply, sem filtro, elas tingem a seção de
azul e a página passa a ter dois autores. `saturate(0.52) sepia(0.18)` recolhe o azul
para um cinza-ardósia morno que convive com o creme — o ouro do relógio encontra o latão,
e o azul vira sombra em vez de cor. Ele fica NA CSS, e não assado no arquivo, porque é
acabamento: mexer nele é mudar um número, e não regerar quatro imagens.
A MÁSCARA DISSOLVE NAS DUAS PONTAS, e é ela que responde à outra metade da queixa do dia
("tem uma cor que quebra entre uma seção e outra"). A arte NASCE DO NADA na borda de
cima — então a emenda entre esta seção e a de antes não ganha uma linha nova —, ganha
corpo no meio da faixa e se dissolve antes do conteúdo começar. Faixa com borda reta numa
das pontas seria trocar um corte por outro.
POR ISSO O FILETE DA FAQ SAIU: com a arte fazendo a separação, aquele `border-top` de
1 px virava exatamente o risco seco que a faixa veio dissolver.
========================================================================== */
/* A ALTURA DA FAIXA E O RESPIRO DE CIMA DAS DUAS SEÇÕES SÃO O MESMO NÚMERO, e por isso
ele é uma variável: o conteúdo começa ONDE A ARTE ACABA. Escrito em dois lugares, o dia
em que um deles mudasse traria de volta exatamente os dois defeitos que esta conta
resolve — o cartão da Metodologia cobrindo a arte que ele deveria deixar aparecer, e o
sobretítulo da FAQ caindo em cima do relógio. */
/* A FAIXA DE ARTE TAMBÉM TEM TETO DE ALTURA — 03/09/2026, e é o conserto das três
fotografias que a dona mandou de um tablet deitado: metade da tela de arte e o cartão
("Metodologia", "Dúvidas sobre a sua leitura") cortado pela borda de baixo.
O DEFEITO É O DE SEMPRE NESTE ARQUIVO, e é o terceiro do dia com a mesma forma: uma
medida em `vw` que só foi pensada em pé. `26vw` num telefone de 390 px são 101 px de
arte — um filete; num tablet deitado de 1.365 são 355, que o teto de 320 corta para
320. Só que a tela dele tem 640 px de ALTURA: 320 de arte é METADE do que a pessoa vê,
e o cartão começa onde a tela acaba.
O `min(26vw, 34vh)` faz a faixa responder às duas medidas, e o que manda é a menor:
ela nunca passa de um terço da janela. Medido: 218 px no tablet de 1365x640 (era 320),
306 num notebook de 1365x900, e 320 num monitor 1920x1080 — onde nada muda. NO CELULAR
NADA MUDA TAMBÉM, e é o piso de 200 px que garante: num 390x780 o `min` dá 101, e o
`clamp` devolve os mesmos 200 de sempre. */
.method, .faq{--faixa-de-arte:clamp(200px, min(26vw, 34vh), 320px); position:relative; overflow:hidden;}
.method > .wrap, .faq > .wrap{position:relative; z-index:1;}
.method::before, .faq::before{
content:""; position:absolute; top:0; left:0; right:0; z-index:0; pointer-events:none;
height:var(--faixa-de-arte);
background-size:cover; background-position:center 46%; background-repeat:no-repeat;
/* A ENTRADA DA ARTE FOI ALONGADA — 02/09/2026, pedido da dona ("faz degradê entre essas
seções"), e a causa foi vista na tela e não no arquivo. A rampa antiga ia de 0 a 0,92
em 22% da faixa: a 1200 px isso são 69 px, e a fotografia do relógio começa com um céu
claro. O resultado é que os primeiros 69 px não mostram quase nada e o azul entra de
uma vez, formando exatamente a LINHA HORIZONTAL que a rampa existia para evitar.
Agora ela sobe em três tempos e só chega ao pico em 46% — o azul se insinua antes de
aparecer, e não há um ponto único onde ele começa. */
-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.22) 14%, rgba(0,0,0,0.62) 28%, rgba(0,0,0,0.90) 46%, rgba(0,0,0,0.70) 72%, rgba(0,0,0,0) 100%);
mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.22) 14%, rgba(0,0,0,0.62) 28%, rgba(0,0,0,0.90) 46%, rgba(0,0,0,0.70) 72%, rgba(0,0,0,0) 100%);
}
/* NO TELEFONE A ENTRADA PRECISA SER AINDA MAIS LONGA, e a razão não é a rampa — é o
RECORTE. A faixa trava em 200 px de altura, e com `background-size:cover` numa tela de
430 px o pedaço visível da fotografia deixa de incluir o céu claro do alto: o que encosta
no topo da faixa é o meio do afresco, azul cheio. A mesma rampa que basta no computador
parte, aqui, de uma cor forte — e é por isso que a emenda que a dona fotografou aparece
no celular e quase não aparece na tela grande.
A correção é dar mais caminho à subida: o pico só chega aos 62%, e os primeiros 20% da
faixa ficam praticamente vazios. */
@media (max-width:700px){
.method::before, .faq::before{
-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.10) 20%, rgba(0,0,0,0.46) 40%, rgba(0,0,0,0.86) 62%, rgba(0,0,0,0.58) 82%, rgba(0,0,0,0) 100%);
mask-image:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.10) 20%, rgba(0,0,0,0.46) 40%, rgba(0,0,0,0.86) 62%, rgba(0,0,0,0.58) 82%, rgba(0,0,0,0) 100%);
}
}
/* A FAQ SEGUE NO PERGAMINHO, e por isso a foto dela continua sendo trazida para a paleta:
opacidade baixa, multiply e o filtro que recolhe o azul-cobalto para um cinza morno. */
.faq::before{opacity:0.38; mix-blend-mode:multiply; filter:saturate(0.52) sepia(0.18) contrast(0.96);}
/* ==========================================================================
A METODOLOGIA VESTE O AZUL DA PRÓPRIA FOTO — 02/09/2026
==========================================================================
Pedido da dona: "use azul nesta aba ao invés de bege para combinar com a imagem".
O AZUL NÃO FOI ESCOLHIDO, FOI MEDIDO. Recolhi da `relogio-espiral-1280` todos os píxeis
de matiz azul com alguma saturação — 4.078 dos 8.000 da amostra, metade da fotografia —
e a média deles é `#2D4876`. O tom da seção é esse mesmo azul escurecido para servir de
fundo a um cartão branco. Ou seja: a seção não "combina" com a imagem por semelhança de
gosto; ela é a imagem, na cor média dela.
E O FILTRO SEPIA SAIU DAQUI. Ele existia para trazer a foto ao pergaminho — sobre o
próprio azul dela, ele só a suja. A arte passa a aparecer NA COR QUE TEM, com opacidade
mais alta (0,55) e sem multiply: sobre um fundo escuro, multiplicar só apaga.
O DEGRADÊ DAS DUAS PONTAS é a mesma régua da seção do resultado, e pelo mesmo motivo: um
bloco azul chapado entre duas seções bege abre dois cortes retos atravessando a tela — e
foi disso que a dona reclamou em 01/09. Aqui o azul nasce do pergaminho e volta para ele.
As duas medidas estão logo abaixo, na regra da `.method`, e mudaram em 02/09 — o porquê
está escrito lá.
========================================================================== */
.method{--azul-metodo:#22365C; --azul-tipo:#22365C; --azul-suave:#2D4876;}
.method::before{opacity:0.55;}
/* A TIPOGRAFIA DO CARTÃO TAMBÉM VESTE O AZUL — 02/09/2026, na volta da dona: "me referi
no azul na fonte também da Metodologia".
Ela está certa e eu tinha entendido metade: pintar o FUNDO de azul e deixar dentro dele
um cartão com sobretítulo, números e botão em latão é pôr duas paletas na mesma seção —
o cartão continuava sendo o pedaço bege de que ela queria sair.
O QUE TROCA É O ACENTO, e não o texto corrido: o que era latão vira azul (o sobretítulo,
o 01 e o 02, o filete do divisor, o botão, a frase em destaque e o filete da nota de
rodapé). O corpo do texto fica na tinta de sempre — texto longo em azul cansa, e a
hierarquia aqui nunca dependeu dele.
MEDIDO ANTES DE FICAR: #22365C sobre branco dá 12,00:1 e branco sobre ele dá os mesmos
12,00:1 — o botão passa nos dois sentidos. O #2D4876 dos números dá 9,13:1. O latão que
sai daqui dava 6,21:1 no tom escuro e 3,70:1 no claro, ou seja: a troca SOBE o contraste
de tudo o que ela toca, inclusive dos números, que eram o pior caso da seção.
O PREFIXO `#view-catalog` SAIU EM 04/09/2026, e a razão dele deixou de existir no mesmo
dia. Ele estava aqui porque "a MESMA seção existe dentro da página de produto, e lá ela
não é azul — é tingida pela cor da leitura (violeta, malva, ouro)". A dona tirou a cor da
leitura das páginas de venda nesse dia ("e se deixarmos as capas coloridas, MAS a página
de vendas ser branca? As cores todas padrão do início"), e com isso a Metodologia é azul
em toda tela onde ela aparece — a de início e as 36 de venda que a clonam.
Manter o prefixo agora produziria o defeito que este bloco veio consertar, do outro lado:
um cartão de acento latão dentro de um chão azul. */
.method .eyebrow{color:var(--azul-tipo);}
.method .method-divider{color:var(--azul-tipo);}
.method .method-divider .divider-dot{background:var(--azul-tipo);}
.method .feature-num{color:var(--azul-suave);}
.method .method-toggle{background:var(--azul-tipo); box-shadow:0 10px 24px rgba(34,54,92,0.30);}
.method .method-toggle:hover{background:#1A2A49; box-shadow:0 16px 34px rgba(34,54,92,0.34);}
.method .method-more .key-question{color:var(--azul-tipo);}
.method .method-credibility{border-left-color:rgba(34,54,92,0.35);}
/* A linha `url()` antes do `image-set` é o que os navegadores sem `image-set` leem — mesmo
par de linhas que a faixa do formulário usa. O 640 serve o celular; acima dele, o 1280. */
.method::before{
background-image:url("/assets/relogio-espiral-1280.jpg");
background-image:image-set(url("/assets/relogio-espiral-1280.webp") type("image/webp"),
url("/assets/relogio-espiral-1280.jpg") type("image/jpeg"));
}
.faq::before{
background-image:url("/assets/relogio-astronomico-1280.jpg");
background-image:image-set(url("/assets/relogio-astronomico-1280.webp") type("image/webp"),
url("/assets/relogio-astronomico-1280.jpg") type("image/jpeg"));
}
@media (max-width:700px){
.method::before{
background-image:url("/assets/relogio-espiral-640.jpg");
background-image:image-set(url("/assets/relogio-espiral-640.webp") type("image/webp"),
url("/assets/relogio-espiral-640.jpg") type("image/jpeg"));
}
.faq::before{
background-image:url("/assets/relogio-astronomico-640.jpg");
background-image:image-set(url("/assets/relogio-astronomico-640.webp") type("image/webp"),
url("/assets/relogio-astronomico-640.jpg") type("image/jpeg"));
}
}
/* O RESPIRO DE CIMA É A FAIXA INTEIRA MAIS 18 PX, e não os 80 de antes. O cartão da
Metodologia é branco e OPACO: começando aos 80 px ele cobria justamente o pedaço em que
a máscara segura a arte com mais força. A arte existia no arquivo e não existia na tela.
Agora ela abre a seção — e o cartão pousa logo depois de ela se dissolver. */
/* AS DUAS PONTAS DO AZUL FICARAM LONGAS — 02/09/2026, e é o conserto do "resolver
diferença de cor entre uma seção e outra", que a dona mandou com um print do pé desta
seção: o cartão branco acaba, e logo abaixo dele aparece uma FAIXA CINZA antes do
pergaminho voltar.
A faixa não era um erro de cor — era a própria descida do azul, medida em captura:
`#22365C` chegava ao `#F8F3E7` em 90 px. Noventa píxeis para atravessar toda a distância
entre um azul-noite e um creme é rápido demais para o olho ler como desvanecimento: os
tons do meio (um cinza-azulado sem lugar na paleta) ficam grandes o bastante para virarem
uma tarja própria, e o que deveria ser uma emenda invisível vira uma terceira cor entre
as duas seções.
Agora são 260 px embaixo e 200 em cima. É o mesmo desenho, com a mesma cor e o mesmo
propósito — só que a passagem deixa de caber num relance. Custa altura, e é altura de
fundo vazio: nada de conteúdo se mexe.
A ENTRADA CONTINUA MAIS CURTA QUE A SAÍDA, pela razão que já estava escrita: em cima ela
divide o espaço com a arte do relógio, que também está aparecendo; embaixo não há nada
além da cor, e por isso é lá que a passagem precisa de mais espaço. */
.method{
padding:calc(var(--faixa-de-arte) + 18px) 0 80px;
background:linear-gradient(180deg,
var(--bg) 0,
var(--azul-metodo) 200px,
var(--azul-metodo) calc(100% - 260px),
var(--bg) 100%);
}
/* O CARTÃO VIROU UMA COLUNA SÓ, E DA LARGURA DE LEITURA — 01/09/2026, quando a
ilustração da direita saiu (o porquê está no `index.html`, onde ela morava).
Sem a segunda coluna, um `grid` de duas frações desenharia o texto na largura inteira
do `.wrap` — 976 px de linha, o dobro do que um olho lê sem se perder no retorno.
OS 760 PX SÃO OS DA FAQ. A `.faq-list` logo abaixo já fecha em 720 px centrados, e as
duas seções são vizinhas na página: larguras diferentes para o mesmo papel é o tipo de
desalinho que ninguém sabe nomear e todo mundo sente. */
.method-grid{
max-width:760px; margin:0 auto;
background:var(--card); border:1px solid var(--border); border-radius:var(--radius-xl); overflow:hidden;
box-shadow:var(--shadow-4);
}
.method-content{padding:52px 44px;}
.method h2{font-size:var(--t-secao); margin:0;}
.method-divider{display:flex; align-items:center; gap:12px; margin:22px 0 28px; color:var(--brass-dark);}
.method-divider .divider-line{flex:1; height:1px; background:var(--border);}
.method-divider .divider-dot{width:4px; height:4px; border-radius:50%; background:var(--brass-dark); flex:none;}
.method-divider .divider-sun{font-size:19px; flex:none;}
.method-lede{font-size:var(--c-lede); line-height:1.75; color:var(--ink-soft); margin-bottom:34px;}
.method-feature{display:flex; gap:22px; align-items:flex-start; margin-bottom:30px;}
.feature-num{
font-family:var(--fonte-titulo); font-size:26px; font-weight:600; color:var(--brass);
line-height:1; flex:none; width:36px; padding-top:2px;
}
.method-feature p{font-size:var(--c-corpo); line-height:1.75; color:var(--ink-soft); margin:0; padding-top:5px;}
.method-toggle{
display:inline-flex; align-items:center; gap:10px; background:var(--brass);
color:#fff; font-weight:600; font-size:var(--c-corpo); padding:14px 26px; border:none; border-radius:var(--radius-sm);
box-shadow:var(--shadow-brass); margin-top:8px;
}
.method-toggle:hover{background:var(--brass-dark); transform:translateY(-1px); box-shadow:var(--shadow-brass-lg);}
.method-toggle:active{transform:translateY(0) scale(0.98);}
.method-toggle .arrow{transition:transform var(--dur-base) var(--ease);}
.method-toggle.open .arrow{transform:rotate(90deg);}
.method-more{max-height:0; overflow:hidden; transition:max-height .6s var(--ease-soft), opacity .4s ease; opacity:0;}
.method-more.open{max-height:3200px; opacity:1;}
.method-more-inner{padding-top:26px;}
.method-more p{font-size:var(--c-corpo); line-height:1.75; color:var(--ink-soft); margin-bottom:14px;}
.method-more .quote-line{font-family:var(--fonte-titulo); font-style:italic; color:var(--ink); font-size:var(--c-lede); margin:2px 0;}
.method-more .quote-stack{margin:6px 0 18px;}
.method-more .key-question{font-family:var(--fonte-titulo); font-style:italic; color:var(--brass-dark); font-size:var(--c-citacao); margin:18px 0;}
.method-credibility{margin-top:32px; padding:18px 0 0 20px; border-top:1px solid var(--border); border-left:2px solid var(--brass-light);}
.method-credibility p{font-size:var(--c-apoio); line-height:1.6; color:var(--muted); margin:0; padding-left:14px;}
.method-credibility strong{color:var(--ink-soft); font-weight:600;}
/* As regras da `.method-art` e da `.method-art-svg` saíram junto com o elemento que elas
desenhavam. CSS sem elemento é peso morto que a próxima pessoa lê procurando onde
aquilo aparece — e a resposta é "em lugar nenhum". */
@media (max-width:900px){
.method-content{padding:40px 26px;}
}
@media (max-width:600px){
.method-inner{padding:32px 22px;}
}
/* ---------- TESTEMUNHOS ---------- */
/* O FILETE DE CIMA SAIU — 02/09/2026, junto com o alongamento da descida do azul logo
acima. Ele desenhava uma linha de 1 px exatamente onde a Metodologia entrega a página de
volta ao pergaminho, ou seja: marcava com um risco seco a emenda que o degradê existe
para dissolver. É a mesma conclusão que a FAQ já tinha tirado em 01/09 ("por isso o
filete da FAQ saiu"), aplicada à seção vizinha, que ficou para trás naquele dia. */
/* ==========================================================================
A FAIXA AMARELA DOS DEPOIMENTOS — 02/09/2026
==========================================================================
Pedido da dona: "faz um fundo amarelinho (da paleta da roda) para esta seção ter um
design bonito".
O AMARELO É O `--areia`, amostrado da própria roda do zodíaco (o porquê e as medidas de
contraste estão no `tokens-e-base.css`). Nada de tinta inventada: a seção fica com a cor
da aquarela que está logo abaixo dela na página.
E A FAIXA NÃO TEM BORDA — ela ENTRA e SAI por degradê, em 120 px de cada lado. Isso não é
capricho: em 02/09 a queixa foi "resolver diferença de cor entre uma seção e outra", e a
causa medida na Metodologia foi uma descida de cor curta demais, cujos tons do meio
viravam uma tarja própria. Uma faixa amarela com corte reto aqui repetiria o mesmo
defeito duas seções acima. Os 120 px são o que faz a emenda desaparecer sem precisar de
filete nenhum.
O `overflow:hidden` ERA DO PIN, e não da faixa: ele garantia que a arte das estrelas
pudesse sangrar na margem sem abrir rolagem horizontal no telefone. Com o pin fora
(11/09/2026), ele FICA — não porque a razão dele continue valendo, mas porque o degradê
desta faixa nasce e morre transparente e nada aqui dentro precisa escapar dela. É a mesma
pergunta que a seção `.prova-faixa` respondeu ao contrário em 05/09, quando o recorte dela
saiu: o que existia por causa da peça que saiu vai junto, o que existia por conta própria
fica. */
/* O AMARELO SAIU EM 10/09/2026, e o pedido da dona nomeia o problema: "o fundo amarelo
com estrelas decorativas fica mais próximo de uma landing page de marketing, enquanto a
seção de metodologia abaixo parece muito mais institucional e premium. Eu aproximaria as
avaliações da linguagem da metodologia: creme mais neutro, menos decoração e um card
mais editorial."
O CREME É O `--creme-avaliacoes`, e ele é o `--areia` puxado de volta para o pergaminho:
o mesmo papel do site, meio tom acima do fundo, o bastante para a faixa existir e não o
bastante para ela gritar. A forma da regra não mudou — continua um gradiente que nasce e
morre transparente, para a faixa não ter borda dura contra as seções vizinhas. */
/* O RESPIRO DE BAIXO DOBROU — 11/09/2026: "dê mais espaço embaixo do depoimento antes de
iniciar a seção metodologia".
ELE É ASSIMÉTRICO DE PROPÓSITO, e o motivo está na tela: em cima desta seção vem a vitrine,
que acaba em cartões sobre o mesmo pergaminho; embaixo vem a Metodologia, que é uma FAIXA
DE PONTA A PONTA com fundo próprio. Um fundo que começa é uma borda dura, e borda dura
quer mais folga antes dela do que um parágrafo qualquer. Os 88 px de cima continuam sendo
o vão que abre a seção; os 128 de baixo são o vão que a fecha CONTRA outra coisa.
E O DEGRADÊ ACOMPANHA: ele nasce e morre transparente em 120 px, então o creme desta faixa
acaba antes do fim do respiro — o que a Metodologia encosta é o pergaminho, e não a cor. */
.testimonials{
--creme-avaliacoes:#F6EFDF;
padding:88px 0 128px;
position:relative;
overflow:hidden;
background:
linear-gradient(180deg,
transparent 0,
var(--creme-avaliacoes) 120px,
var(--creme-avaliacoes) calc(100% - 120px),
transparent 100%);
}
.testimonials .wrap{position:relative; z-index:1;}
/* O PIN DE ESTRELAS SAIU EM 11/09/2026 — "remove as estrelas em aquarela", pedido da dona.
Ele foi encolhendo até sumir, e a história inteira cabe em três datas: nasceu em 02/09
como arte grande no alto da faixa AMARELA da página inicial, que era o fundo para o qual
ele tinha sido desenhado; em 10/09 o amarelo saiu (a faixa virou creme neutro, "menos
decoração e um card mais editorial") e o pin sobreviveu como selo pequeno no canto de
baixo das telas de produto; hoje saiu também.
É a mesma lição que este arquivo já escreveu duas vezes, e agora sobre a própria peça que
a ensinou: QUANDO O FUNDO DE UMA CAIXA SAI, O QUE SOBRA DELA PRECISA SER LIDO LINHA A
LINHA. O pin existia por causa do amarelo — sobreviveu a ele um dia.
Saíram junto: a inserção no `navegacao-entre-as-telas-do-app.js`, a linha do
`correcoes-de-colisao.css` que o escondia na cópia das seções, os dois arquivos de
`assets/`, as duas listas que os conferiam (o `netlify-build.sh` e a régua das artes) e a
régua "nada é cortado por uma borda que ninguém vê", que MEDIA o pin — ela não saiu, foi
reescrita no invariante dela. */
/* A MESMA FAIXA DENTRO DAS 33 PÁGINAS DE PRODUTO.
Aqui ela não pode sangrar de ponta a ponta: o `#p-social` e o `#pp-social` moram DENTRO
do `.wrap`, que já limita a página a 1080 px. Então a faixa vira um BLOCO arredondado,
que estoura o `.wrap` só os 32 px do respiro dele — o suficiente para se ler como faixa
e não como mais um cartão.
E o `--capa-fundo` NÃO entra aqui: cada uma das 33 leituras tinge a própria página, e uma
faixa que mudasse de cor a cada produto deixaria de ser a seção de depoimentos do site
para virar um enfeite da página. O amarelo é o mesmo em todas — é o mesmo da roda. */
/* O SELETOR LEVA O ID DA TELA, e não é preciosismo: o `tela-de-produto.css` tem
`#view-product section{padding:36px 0}`, que é mais específico do que uma classe e
ganharia da faixa. Medido: com `.prova-faixa` sozinha, o respiro saía 36px 0 e os cartões
encostavam na borda amarela. Um id contra um id resolve, e escrever os dois deixa claro
que esta faixa vive em duas telas diferentes. */
/* O AMARELO SAIU EM 04/09/2026: "a aba de depoimentos está com fundo de outra cor".
Ele foi escolhido em 02/09 como uma cor FIXA, de propósito, para não mudar a cada uma das
33 leituras — e a razão escrita aqui era boa: "uma faixa que mudasse de cor a cada produto
deixaria de ser a seção de depoimentos do site para virar um enfeite da página".
O que mudou é o entorno. Com a página de venda vestindo a paleta da tela de início, o
amarelo deixou de ser a única cor estável no meio de 33 e passou a ser a ÚNICA cor
diferente numa página inteira de pergaminho — e a seção de depoimentos da tela de início,
que é o padrão que ela pediu para copiar, não tem faixa nenhuma: os cartões brancos ficam
sobre o pergaminho.
A CAIXA FICA, e só o fundo sai: são dela o respiro dos cartões, o recorte que segura o pin
de estrelas no canto e a margem negativa que estoura os 32 px do `.wrap`. Tirar a caixa
junto devolveria os cartões encostados na borda, que é o defeito que ela veio consertar. */
/* O RECORTE SAIU EM 05/09/2026: "depoimentos de fundo aparecem cortados na tela como se
estivessem dentro de um quadrado".
Do que ficou em 04/09, o RESPIRO era mesmo da caixa e continua. O RECORTE não era: ele
servia enquanto havia amarelo. A frase que o justificava dizia "não sangra: o bloco é
arredondado, e corte na curva do canto lê como imagem escapando do cartão" — e isso é
verdade sobre um CARTÃO. Sobre fundo transparente não existe cartão nenhum de onde escapar:
existe uma linha de corte no meio do pergaminho, e o pin de estrelas era fatiado 13 px
acima do seu pé por uma borda que ninguém vê. Medido nas duas telas, produto e parto.
O `border-radius` saiu junto, pela mesma razão: canto arredondado em fundo transparente não
arredonda nada — só dava forma ao recorte. É a segunda peça desta sessão que sobreviveu ao
próprio motivo (a outra é o degradê do rodapé). QUANDO O FUNDO DE UMA CAIXA SAI, O QUE
SOBRA DELA PRECISA SER LIDO LINHA A LINHA: o que existia por causa da cor vai junto com a
cor. */
/* O RESPIRO DOBROU EM 11/09/2026 — "dê mais espaço ao redor de depoimentos porque as outras
seções estão muito próximas", pedido da dona, com a foto do telefone: as setas do
carrossel encostando na faixa de arte que fecha a página, e a nota do Google começando
quase colada no fim do bloco de pagamento.
ELA DESCREVEU UMA CONTA QUE NUNCA FECHOU, e é a mesma de sempre neste arquivo: os 34/30 px
foram escritos em 02/09, quando a faixa TINHA FUNDO AMARELO. Um fundo que se vê já separa
sozinho — a mudança de cor é a borda, e o respiro interno só precisa afastar o conteúdo
dela. Em 04/09 o amarelo saiu e a caixa ficou; em 05/09 o recorte e o canto arredondado
saíram pelo mesmo motivo. Sobrou o respiro, que era a última peça da caixa ainda medida
como se houvesse caixa. Sem cor nenhuma, 30 px entre a última seta e a seção seguinte não
são "o respiro da faixa": são o mesmo vão que separa dois parágrafos.
OS NÚMEROS SÃO OS DA VIZINHANÇA, e não inventados: o vão comum entre as seções desta tela
é de 36 px (`#view-product section{padding:36px 0}` — medido nas quatro, a capa e as duas
cópias `de-sempre` de fora, que têm respiro próprio) e a seção de depoimentos da página
inicial respira 88. Esta fica entre as duas, mais perto da de cima, porque ela é o fecho
de uma tela de venda e não uma seção de abertura.
E O RESPIRO DE BAIXO É MAIOR QUE O DE CIMA, de propósito: embaixo dela vem a faixa de arte
que fecha a página — um fundo de ponta a ponta, que foi justamente o que a dona
fotografou colado nas setas. Em cima vem texto sobre pergaminho, que já se separa sozinho.
O TELEFONE NÃO GANHA MENOS PORQUE A TELA É MENOR, e é onde a tentação mora: numa tela
estreita todo respiro parece caro, e foi num TELEFONE que a dona tirou a foto. O que ele
ganha é um pouco menos que o computador (56/68 contra 62/72), porque a página inteira
respira menos ali — e não porque o pedido valha menos. MEDIDO: com os 48/56 da primeira
tentativa, o respiro de cima ficava a 4 px do vão entre duas seções comuns da própria
tela, ou seja, dentro da margem de erro do defeito que ele veio consertar. */
/* O RESPIRO DE BAIXO CRESCEU DE NOVO EM 11/09/2026 — "dê mais espaço embaixo do depoimento",
e é a segunda vez no mesmo dia. A primeira passada desta sessão levou os 34/30 de 02/09
para 62/72 (o texto acima conta por quê); a dona olhou a tela e pediu mais.
ELA ESTÁ CERTA PELA MESMA CONTA, e o que faltava era contar a peça que vem DEPOIS: embaixo
desta faixa vem a esteira de sugestões e, no fecho, a faixa de arte de ponta a ponta. O
respiro de baixo não separa dois parágrafos — separa o fim de uma seção do começo de um
FUNDO. Os 96 px o põem no mesmo degrau que a faixa de depoimentos da página inicial ganhou
nesta mesma passada (128 px contra um vão comum de 36), medido em proporção e não em
número absoluto: lá a página respira mais em tudo.
O DE CIMA NÃO MEXEU, e a assimetria é a mesma de sempre: em cima vem texto sobre
pergaminho, que já se separa sozinho. */
#view-product .prova-faixa,
#view-parto .prova-faixa{
position:relative;
background:transparent;
padding:62px 30px 96px;
margin:0 -32px;
}
@media (max-width:700px){
#view-product .prova-faixa,
#view-parto .prova-faixa{margin:0 -18px; padding:56px 18px 88px;}
}
/* A fileira já estoura o próprio contêiner em 24 px de cada lado para o último cartão poder
encostar na borda. Dentro da faixa isso viraria cartão saindo por baixo do amarelo, então
o estouro é desfeito e devolvido como respiro. */
#view-product .prova-faixa .test-row,
#view-parto .prova-faixa .test-row{margin:0; padding-left:0; padding-right:0;}
/* O `z-index` DESTAS ERA DO PIN: ele morava no `z-index:0` do fundo da faixa, e sem estas
linhas o texto de venda ficaria por baixo da aquarela. Com o pin fora, o que sobra é
`position:relative` sem nada para vencer — e o `position` FICA, porque ele não era do pin:
é o que segura qualquer ornamento futuro fora do caminho do texto.
ERAM TRÊS ATÉ 11/09/2026: as duas dos títulos ("Quem já passou pela leitura", num `h2` na
tela de produto e num `h3` no parto) saíram junto com o título. */
.prova-faixa .nota-shelly{position:relative;}
.recebe-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.recebe-card{padding:26px 24px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-1); animation:fadeInUp var(--dur-slow) var(--ease-soft) both;}
.recebe-card .g{font-size:22px; color:var(--brass); display:block; margin-bottom:12px; line-height:1;}
.recebe-card h3{font-family:var(--fonte-titulo); font-size:var(--c-lede); line-height:1.35; color:var(--ink); margin:0 0 8px; font-weight:600;}
.recebe-card p{font-size:var(--c-apoio); line-height:1.7; color:var(--ink-soft); margin:0;}
@media (max-width:1000px){ .recebe-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .recebe-grid{grid-template-columns:1fr; gap:14px;} .recebe-card{padding:20px;} }
/* O SOBRETÍTULO "DEPOIMENTOS" SAI EM VERMELHO — 02/09/2026, a pedido da dona ("depoimentos
título escrito em vermelho p combinar c paleta").
O vermelho é o `--rust` (#95402D), que JÁ é da paleta desde 31/08 — é a cor de ação dos
botões do site. Não entrou tinta nova aqui; entrou uma que já existia, num lugar em que
ela ainda não tinha sido usada.
MEDIDO ANTES DE FICAR: #95402D sobre o pergaminho #F8F3E7 dá 6,44:1, folgado na WCAG AA
até para texto pequeno — e este é pequeno mesmo, dez píxeis em caixa alta com
espaçamento de letra. O latão que ele substitui dava 5,6:1, ou seja: a troca SOBE o
contraste do rótulo.
O SELETOR É O DA SEÇÃO, e não o `.eyebrow` solto: o mesmo sobretítulo existe na
Metodologia e na FAQ, e ali ele é azul e latão. Vermelho nos três seria trocar a paleta
inteira em nome de um pedido sobre uma seção. */
/* A REGRA DO SOBRETÍTULO VERMELHO SAIU COM O SOBRETÍTULO — 02/09/2026. Ela nasceu hoje de
manhã, a pedido da dona ("depoimentos título escrito em vermelho p combinar c paleta"),
e à tarde o próprio sobretítulo saiu por outro pedido dela ("menos repetir o óbvio").
O `--rust` continua na paleta e continua sendo a cor de ação dos botões; o que deixou
de existir é o lugar onde ele estava. Manter a regra faria a versão SEM depoimentos
desta seção — "Antes de decidir / O que chega até você" — sair com um sobretítulo
vermelho que ninguém pediu. */
/* ==========================================================================
OS DEPOIMENTOS ROLAM PARA O LADO — 02/09/2026
==========================================================================
Pedido da dona: "os depoimentos devem rolar p lado e ter foto + nome".
POR QUE A GRADE SAIU. Ela era `repeat(3,1fr)`, e uma grade fixa faz o número de
depoimentos MEXER NO DESENHO: com um, um cartão ocupava um terço e sobravam dois terços
de vazio; com quatro, o quarto caía sozinho numa segunda fileira. São 50 avaliações no
Google para escolher, e a lista vai crescer — uma fileira que rola aceita qualquer
quantidade sem que ninguém venha aqui mexer em número nenhum.
E ROLAR PARA O LADO É O QUE FAZ PROVA SOCIAL PARECER PROVA SOCIAL: uma grade de três
parece um bloco escolhido a dedo; uma fileira que continua depois da borda diz, sem
escrever, que há mais de onde aqueles vieram.
A MECÂNICA É A MESMA DA VITRINE (`vitrine-e-carrossel.css`), e de propósito: encaixe por
`scroll-snap`, um cartão por vez, e o recorte deixando ver o pedaço do próximo. Duas
receitas de carrossel na mesma casa é como uma delas ganha o polimento e a outra não.
O `scroll-padding-inline` acompanha o `padding` para o primeiro cartão encaixar rente à
margem do texto, e não colado na borda da tela. */
.test-row{
display:flex; gap:16px; overflow-x:auto; overflow-y:hidden;
scroll-snap-type:x mandatory; scroll-behavior:smooth;
/* O ENCAIXE FROUXO — 03/09/2026. A classe é escrita pelo motor quando cabem vários cartões
na fileira, e o porquê inteiro está lá (`roda-de-sinastria.js`, ao lado do
`encaixe-frouxo`): com `mandatory` e encaixe pelo CENTRO, o primeiro cartão só pode
parar no meio se houver `(largura − cartão)/2` de folga na ponta, e essa folga tem teto.
Sem posição válida, o navegador devolve a rolagem — é a fileira "travada".
`proximity` encaixa quando o dedo para perto de um cartão e não encaixa quando não há
nenhum por perto, sem abrir 382 px de branco nas pontas. */
padding:4px 24px 18px; margin:0 -24px;
scroll-padding-inline:24px;
-webkit-overflow-scrolling:touch;
/* OS CARTÕES VOLTAM A TER A MESMA ALTURA — 03/09/2026, a pedido da dona ("os depoimentos
já tinha sido corrigidos p terem cards da msm medida").
ELES FORAM DESIGUAIS DE PROPÓSITO EM 02/09, e a razão daquele dia era real: esticados
até a altura do MAIOR, os curtos abriam um vão de quase cem píxeis ENTRE A CITAÇÃO E O
NOME, porque o conteúdo ficava colado no topo e a sobra caía toda embaixo.
O QUE MUDOU FOI O CARROSSEL, e é o que faz a conta virar. Com todos do mesmo tamanho e
lado a lado, pé irregular passava por avaliação de tamanho diferente — é assim que o
Google desenha as dele. Desde ontem os cartões se SOBREPÕEM e o do meio cresce 8%: aí
três bordas de baixo terminando em alturas diferentes debaixo do cartão em foco leem
como desalinho, e não como conteúdo.
E O VÃO NÃO VOLTA JUNTO: o conteúdo do cartão passou a ser centrado na vertical (ver
`justify-content` no `.test-card`, logo abaixo), então a sobra de um depoimento curto se
divide em cima e embaixo em vez de virar um buraco no meio. Sem esse par de linhas, esta
aqui devolveria o defeito de 02/09 inteiro.
A conta da sobra, medida nas 40 avaliações: a mais baixa tem 153 px, a mediana 219 e as
quatro mais altas 286. O pior caso ganha 66 px de respiro em cada ponta — e 286 não é um
caso isolado que estica tudo por um só, são quatro cartões no mesmo teto. */
}
/* A BARRA DE ROLAGEM SOME NO DESKTOP, e é decisão de desenho e não descuido: a fileira
encaixa por `scroll-snap` e mostra metade do próximo cartão, que é o que convida a
arrastar. Uma barra cinza atravessando o pé de uma seção de depoimentos é a única coisa
ali que não é conteúdo. No celular ela já não aparece. */
.test-row::-webkit-scrollbar{display:none;}
.test-row{scrollbar-width:none;}
/* 300 px é a largura em que um depoimento de duas a quatro linhas fica confortável e ainda
sobra a borda do próximo à vista num iPhone de 375 px. `flex:0 0` porque um cartão que
pudesse encolher se espremeria todos na largura da tela — que é a grade de novo. */
/* O CARTÃO ENCOLHEU DE 300 PARA 274 PX — 10/09/2026, e o número saiu de uma conta, não
de gosto. A dona pediu "uns 15-20% dos cards vizinhos aparecendo, de forma simétrica".
O quanto do vizinho aparece é `respiro - vão + sobreposição`, e o respiro é
`(largura da fileira - cartão) / 2`. Num telefone de 390 px:
· com 300 → respiro 45, vizinho aparecendo 43 px = 14% do cartão (abaixo do pedido);
· com 274 → respiro 58, vizinho aparecendo 56 px = 20% do cartão.
O `max-width:86vw` fica: ele é o que impede o cartão de encostar nas duas bordas numa
tela de 320 px, onde 274 já é quase a largura inteira. */
.test-card{
flex:0 0 274px; max-width:86vw; scroll-snap-align:start;
padding:24px; display:flex; flex-direction:column; gap:12px; margin:0;
/* O par da altura igual, lá em cima: a sobra de um depoimento curto vira respiro em cima e
embaixo, e não um vão entre a citação e a assinatura. */
justify-content:center;
/* `--perto`, `--visto` e `--camada` são escritos pelo JavaScript a cada rolagem da
fileira — ver o bloco do carrossel logo abaixo. Sem carrossel eles não existem, e os
três valores de reserva devolvem o cartão exatamente como ele era. */
position:relative; z-index:var(--camada,1); transform:scale(var(--perto,1)); opacity:var(--visto,1);
/* A ENTRADA DEIXOU DE SER A `fadeInUp` — 03/09/2026, e a troca é o que faz a linha de
cima ter efeito. O `to` da `fadeInUp` fixa `transform:translateY(0)`, e uma animação
com `fill:both` continua mandando no `transform` PARA SEMPRE depois de terminar: o
`scale` acima e o `:hover` abaixo seriam escritos e ignorados, sem erro nenhum
aparecendo. A `cartaoEntra` (em `vitrine-e-carrossel.css`) não escreve `transform` no
`to`, então, acabada a entrada, quem decide o tamanho volta a ser a cascata.
É a mesma armadilha que a prateleira de produtos documentou em 26/08 — e ela pegou
esta fileira também, porque a fileira nasceu depois e copiou a animação de antes. */
animation:cartaoEntra var(--dur-slow) var(--ease-soft) both;
}
.test-row .test-card:nth-child(2){animation-delay:60ms;} .test-row .test-card:nth-child(3){animation-delay:120ms;}
/* Dentro de `@media (hover:hover)` pela razão do cartão da vitrine: `:hover` que levanta o
desenho gruda no toque e come o primeiro clique. Ver `vitrine-e-carrossel.css`. */
/* O `scale(var(--perto,1))` acompanha o `translateY`: `transform` é uma propriedade só, e
escrever o deslocamento sozinho apagaria a escala do carrossel — o cartão do meio
ENCOLHERIA ao receber o mouse, que é o contrário do que o realce quer dizer. */
@media (hover:hover) and (pointer:fine){
.test-card:hover{transform:translateY(-3px) scale(var(--perto,1)); box-shadow:var(--shadow-3); border-color:rgba(31,26,18,0.18);}
}
/* ==========================================================================
O DEPOIMENTO DO MEIO VEM PARA A FRENTE — 03/09/2026
==========================================================================
Pedido da dona, com o print de um site concorrente: "ajusta os depoimentos para terem
esse efeito ao rolar para o lado". No print, o depoimento do meio está grande e nítido e
os dois vizinhos ficaram atrás dele, menores e desfocados.
QUEM MEDE É O MOTOR DA PRATELEIRA, o mesmo de 26/08 (`mapas/roda-de-sinastria.js`): ele
passou a varrer `.poster-row, .test-row` em vez de só a primeira. Não há conta nova, não
há segundo ouvinte de rolagem, e as constantes do efeito (0,84 longe, 1,08 no meio, 0,62
de opacidade) são as mesmas nas duas fileiras. Era o que este arquivo já pedia trinta
linhas acima: "duas receitas de carrossel na mesma casa é como uma delas ganha o
polimento e a outra não".
O DESFOQUE É A ÚNICA COISA QUE A PRATELEIRA NÃO TEM, e ele é daqui por uma razão de
conteúdo, não de gosto: cartão de produto é capa, título e preço — três coisas que se
reconhecem de relance mesmo apagadas. Depoimento é PARÁGRAFO. A 62% de opacidade o texto
do vizinho continua legível, e dois parágrafos legíveis lado a lado disputam a leitura
em vez de conduzi-la. O desfoque tira a disputa sem tirar o cartão da tela — continua
claro que há mais depoimentos ali, que é o que a fileira existe para dizer.
ELE SAI DE `--visto`, e não de uma variável nova: a opacidade já é a distância do meio
traduzida em número (0,62 na ponta, 1 no centro), então `1 - --visto` é o quanto o cartão
está fora de foco. Uma quarta propriedade escrita a cada quadro em cada cartão custaria
escrita à toa nas 333 fichas da loja, que passam por este mesmo motor. */
.test-row.em-carrossel{
/* O VÃO É 12 PX, E O NÚMERO FOI MEDIDO — 03/09/2026, de noite. Ele era ZERO, e a razão
escrita aqui era boa pela metade: "crescer 8% não vence um vão de 16 px, e sem isto o
cartão do meio cresce sem cobrir ninguém". Verdade — só que com vão nenhum ele passou a
cobrir DEMAIS, e a dona fotografou o resultado num tablet deitado: "bug na página", com
o cartão do meio comendo a primeira letra de cada linha do vizinho.
A CONTA, e é ela que escolhe o 12. O cartão tem 300 px e 24 de respiro interno; cresce
8% no meio (+11,7 de cada lado) e encolhe nos lados, o que encolhe o respiro do vizinho
junto. Medida a sobreposição contra o respiro do vizinho, em cinco janelas:
com vão 0 com vão 12
1365x640 24,8 sobre 22,3 -> 9,2 sobre 22,3
1024x768 25,0 sobre 21,5 -> 8,0 sobre 22,1
834x1112 31,1 sobre 24,3 -> 17,8 sobre 24,1
390x780 22,0 sobre 22,4 -> 8,0 sobre 22,1
Com vão zero a sobreposição alcança ou passa o respiro em TODAS as larguras: o cartão
do meio não cobre a margem do vizinho, cobre a palavra. Com 12 ela fica dentro da
margem em todas, com folga, e continua existindo — o cartão do meio segue por cima, e a
sombra dele (que chega a 22 px) segue caindo sobre o vizinho, que é o que diz "está na
frente".
NO CELULAR ISSO NUNCA APARECEU e por isso passou aprovado: lá cabe um cartão na tela e
o vizinho é uma tira que ninguém tenta ler. O defeito é o mesmo em toda largura — só que
é na tela larga, com três ou quatro cartões à vista, que ele encontra alguém lendo. */
gap:12px;
/* O encaixe passa a ser pelo CENTRO. `--respiro` é escrito pelo JavaScript e é a folga
das pontas que deixa o PRIMEIRO e o último também chegarem ao meio — sem ela a fileira
abriria com o cartão 1 pequeno na borda e o 2 grande, e ninguém entenderia por que o
segundo é o escolhido. */
padding-inline:var(--respiro, 4px);
scroll-padding-inline:var(--respiro, 4px);
/* O RESPIRO DE CIMA E DE BAIXO É O QUE IMPEDE O CORTE. `overflow-x:auto` recorta TAMBÉM
na vertical — as duas direções andam juntas —, e o cartão do meio cresce 8% a partir do
próprio centro: num depoimento de cinco linhas isso é uma dúzia de píxeis para cada
lado, mais a sombra que ele ganha ao vir para a frente. Com os 4 px de cima que a
fileira tinha, o topo do cartão destacado saía cortado numa reta.
A CONTA, e ela é a mesma que a prateleira de produtos já fez: a sombra do cartão em
foco é a `--shadow-2` (`0 8px 22px`), que desce 8+22 = 30 px abaixo da borda e sobe
22−8 = 14 px acima dela; a ampliação de 8% multiplica os dois por 1,08 e acrescenta uns
12 px de cartão para cada lado. Dá 44 embaixo e 28 em cima — e é por isso que os dois
números são diferentes. */
padding-block:28px 44px;
}
/* Dentro da faixa amarela das 33 telas de produto, a regra do `#view-product` zera o
respiro lateral da fileira (ela já está dentro do `.wrap`) — e um id ganha de duas
classes, então o `--respiro` do carrossel precisa ser devolvido com o mesmo peso. Sem
estas duas linhas o efeito valeria na página inicial e não valeria nas telas onde se
decide pagar, que é justamente onde a prova social trabalha. */
#view-product .prova-faixa .test-row.em-carrossel,
#view-parto .prova-faixa .test-row.em-carrossel{
padding-inline:var(--respiro, 4px); scroll-padding-inline:var(--respiro, 4px);
}
.test-row.em-carrossel > .test-card{
margin-inline:-10px; scroll-snap-align:center;
/* O DESFOQUE CAIU DE 6 PARA 3 PX no mesmo pedido: com o vizinho aparecendo 20% e a
opacidade em 0,72, seis píxeis de borrão viravam uma mancha na borda da tela — o
"cortados de um jeito agressivo". Três continuam tirando a disputa de leitura. */
filter:blur(calc((1 - var(--visto, 1)) * 3px));
/* A SOMBRA TAMBÉM SAI DE `--visto`, pela mesma razão do desfoque: ela é a distância do
meio dita em elevação. No centro o cartão chega à `--shadow-2` inteira (`0 8px 22px`
a 9%), que é o que o faz PAIRAR sobre os vizinhos em vez de só ser maior que eles; na
ponta ela encolhe para menos do que a `--shadow-1` de repouso, e o cartão apagado
parece encostado no fundo. Escrita como três `calc` sobre a mesma variável, e não como
duas sombras trocando de lugar, para que ela CRESÇA junto com o cartão enquanto o dedo
arrasta — sombra que aparece de uma vez lê como piscada. */
/* ELA DIMINUIU EM 10/09/2026 — "também reduziria um pouco a sombra". Era a
`--shadow-2` inteira (8/22 a 9%); passou a 5/14 a 6%. O cartão do meio continua
pairando sobre os vizinhos — que é o trabalho dela —, sem a mancha escura que fazia
a fileira parecer um componente de biblioteca pousado sobre a página. */
box-shadow:0 calc(var(--visto, 1) * 5px) calc(var(--visto, 1) * 14px)
rgba(36,29,18, calc(var(--visto, 1) * 0.06));
/* A lista repete a do `tokens-e-base.css` porque `transition` não se soma: escrever só o
`filter` apagaria a transição do `transform` e da opacidade, e o cartão passaria a
saltar de tamanho em vez de crescer. */
transition:color var(--dur-fast) var(--ease), background var(--dur-base) var(--ease),
border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease),
transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease),
filter var(--dur-base) var(--ease);
}
/* ==========================================================================
AS SETAS DA FILEIRA DE DEPOIMENTOS SAÍRAM — 11/09/2026
==========================================================================
"Tira setas e faça os depoimentos se moverem para o lado automaticamente, ficando em cada
depoimento por 3 segundos. Mantenha a rolagem com o dedo caso a pessoa queira ir e voltar."
COM ELAS SAÍRAM AS SEIS REGRAS QUE AS DESENHAVAM, e é o que este bloco era. Não sobrou
nenhuma: o tamanho discreto (34 px contra os 44 da prateleira), a tinta em `--ink-soft`, a
subida de 14 px para elas pertencerem à fileira, a versão menor no celular e as duas linhas
que as acendiam pela `tem-mais`. A prateleira de produtos continua com as dela, no
`vitrine-e-carrossel.css` — o desenho de lá nunca passou por aqui.
O QUE FICA DESTE TRECHO É UMA LINHA SÓ, logo abaixo: o `encaixe-frouxo`, que é do
CARROSSEL e não das setas. Ele mora aqui por vizinhança e não por parentesco — o porquê
dele está no `medirLinhaViva`, no `roda-de-sinastria.js`.
E VALE REGISTRAR O QUE NÃO VOLTAR A FAZER, porque estas setas custaram três pedidos. Elas
nasceram em 03/09 ("setas discretas para ir e voltar os cards"), foram tiradas de cima dos
cartões no mesmo dia ("seta embaixo dos depoimentos p n ficar tampando em cima") e saíram
em 11/09. O pedido era o mesmo nas três vezes, dito cada vez mais perto: um jeito de ver o
depoimento seguinte que não atrapalhe a leitura do de agora. Uma tentativa intermediária
também ficou registrada e continua válida — fazê-las discretas por TRANSPARÊNCIA (papel a
82% com desfoque de fundo) as fazia SUMIR, porque branco translúcido sobre cartão branco
não tem contorno. Discreto não é invisível; o lugar da discrição é o tamanho e a tinta.
A resposta que ficou não ocupa pixel nenhum da seção: a fileira anda sozinha. */
.test-row.encaixe-frouxo, .poster-row.encaixe-frouxo{scroll-snap-type:x proximity;}
/* Quem pediu menos movimento não entra no carrossel — o motor nem liga a classe nesse caso
(`prefers-reduced-motion` é a primeira coisa que ele pergunta). Esta regra é o cinto de
segurança do lado da folha de estilo, para o caso de a classe sobrar de uma medida
anterior à pessoa mudar a preferência do aparelho. */
@media (prefers-reduced-motion: reduce){
.test-card{transform:none; opacity:1; filter:none;}
.test-row.em-carrossel > .test-card{filter:none;}
}
.test-card .testimonial-stars{color:var(--estrela-forte); font-size:var(--c-apoio); letter-spacing:1px; line-height:1;}
/* A citação é um `
`, e as aspas são DESENHADAS pela folha de estilo em vez de
escritas no texto: aspa dentro da string é aspa que vai para o dicionário de tradução, e
que aparece duplicada no dia em que alguém colar uma avaliação que já tem as suas. */
/* O `flex:1` que empurrava o nome para o pé do cartão saiu junto com a altura igual: sem
sobra de altura para ocupar, ele não fazia nada além de existir. */
.test-card blockquote{
font-size:var(--c-apoio); color:var(--ink-soft); line-height:1.7; margin:0;
font-style:italic;
}
.test-card blockquote::before{content:"\201C";}
.test-card blockquote::after{content:"\201D";}
/* A ASSINATURA. O CÍRCULO COM A INICIAL SAIU EM 02/09/2026 ("pode remover o ícone de foto
então"), e a regra do retrato FICA — ela só desenha quando houver uma foto de verdade no
`DEPOIMENTOS_HOME`, e hoje não há nenhuma. `object-fit:cover` para que uma foto
retangular não entre esticada; `flex:none` porque um nome comprido não pode espremer o
retrato. Sem foto, a assinatura é só o nome e a origem — que é o que ela é numa citação. */
.test-card .testimonial-author{display:flex; align-items:center; gap:10px; margin-top:2px;}
.test-card .testimonial-avatar{
width:38px; height:38px; border-radius:50%; flex:none; object-fit:cover;
}
.test-card .testimonial-name{font-size:var(--c-apoio); font-weight:700; color:var(--ink);}
.test-card .testimonial-meta{font-size:var(--c-nota); color:var(--muted); display:flex; align-items:center; gap:6px;}
/* O SELO DO GOOGLE. Ele é DESENHO ao lado de uma frase, e por isso é dimensionado em
`em` e não em píxel: cresce e encolhe junto com a linha que ele acompanha, em qualquer
largura de tela e em qualquer degrau da escala tipográfica que essa linha venha a usar.
O `flex-shrink:0` é o que impede a marca de achatar quando o nome é comprido — um
logotipo espremido é pior do que nenhum. */
.test-card .selo-google{flex:0 0 auto; display:block; width:1.15em; height:1.15em; line-height:0;}
.test-card .selo-google img{width:100%; height:100%; display:block;}
/* A LINHA DA NOTA DO GOOGLE — 02/09/2026, no lugar da data por depoimento (o porquê está
no `roda-de-sinastria.js`, junto do texto).
Ela é CENTRADA na página inicial porque o título dela também é; nas páginas de produto
herda o mesmo centro do `.section-title`. O selo aqui é maior do que no rodapé do cartão
(1,35 em contra 1,15) porque esta linha é uma só na seção inteira e precisa ser lida de
relance, enquanto lá ele acompanha quarenta assinaturas e some se for grande demais.
O tom é o `--ink-soft`, e não o `--muted` do rodapé dos cartões: é um número que a
página está AFIRMANDO, e não uma procedência dita em voz baixa. */
.prova-nota{
display:flex; align-items:center; justify-content:center; gap:9px;
font-size:var(--c-apoio); color:var(--ink-soft); font-weight:600;
/* ELA AGORA VEM ANTES DO TÍTULO, e por isso a margem virou de baixo curta: entre a nota
e o título que ela abre, 10 px; o respiro grande fica DEPOIS do título, que é onde a
seção respira de verdade. Com 26 px aqui, a nota flutuava solta entre o nada e o
título, parecendo pertencer à seção anterior. */
margin:0 0 10px;
}
.prova-nota .selo-google{flex:0 0 auto; display:block; width:1.35em; height:1.35em; line-height:0;}
.prova-nota .selo-google img{width:100%; height:100%; display:block;}
/* O RESPIRO GRANDE VOLTOU PARA CÁ — 11/09/2026, quando o título saiu do meio.
A margem de 10 px logo acima foi escrita em 03/09 para o vão entre a nota e o TÍTULO que
ela abria; o respiro grande ficava depois do título. Com o título fora (pedido da dona:
"já é autoexplicativo todo o restante"), os 10 px passaram a separar a nota dos CARTÕES,
e uma linha de texto colada num carrossel lê como legenda dele em vez de abertura da
seção — que é, palavra por palavra, o defeito que aquele dia consertou do outro lado.
O SELETOR É DE ADJACÊNCIA, e é o que mantém a página inicial de fora: lá a nota mora
dentro do `.section-head`, e a fileira é filha de outro elemento — o respiro daquela tela
é o `margin-bottom:48px` do cabeçalho, que já existe e já basta. Aqui as duas são irmãs,
porque as telas de venda escrevem as duas no mesmo `innerHTML`. */
.prova-nota + .fileira-de-depoimentos{margin-top:26px;}
/* ---------- FAQ ---------- */
/* Sem `border-top`: quem separa agora é a faixa de arte (ver o bloco lá em cima).
E O SOBRETÍTULO NÃO PISA NA ARTE, que é a única coisa que este respiro está comprando.
"PERGUNTAS FREQUENTES" sai em `--brass-dark`, e sobre o pergaminho limpo ele mede
5,6:1 — folgado na WCAG AA. Sobre o relógio, medido em quatro larguras com o texto
apagado e o pixel mais escuro do fundo procurado um a um: 3,56:1 num celular de 430 px e
2,91:1 num monitor de 1920. Ou seja, REPROVA — e o título em `--ink`, que mede 8,4:1 no
pior caso, não salva o rótulo que vem antes dele.
Começar o conteúdo depois da faixa devolve o fundo limpo aos dois. É a régua que o
`pagina-inicial-e-formulario.css` já escreveu para a aquarela do formulário: texto sobre
arte se mede contra o pixel mais escuro dela, não se olha e se acha que dá. */
.faq{padding:calc(var(--faixa-de-arte) + 10px) 0 88px;}
.faq-list{max-width:720px; margin:0 auto; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); padding:6px 24px; box-shadow:var(--shadow-1);}
.faq-item{border-bottom:1px solid var(--border-soft);}
.faq-item:last-child{border-bottom:none;}
.faq-item summary{list-style:none; cursor:pointer; padding:19px 4px; font-size:var(--c-corpo); font-weight:600; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:16px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--brass-dark);}
.faq-item summary::after{content:"+"; color:var(--brass-dark); font-size:20px; font-weight:400; flex:none; transition:transform var(--dur-base) var(--ease);}
.faq-item[open] summary::after{content:"–";}
.faq-item p{padding:0 4px 19px; font-size:var(--c-corpo); color:var(--ink-soft); line-height:1.65; animation:fadeIn var(--dur-base) ease both;}
/* ---------- FOOTER (simplificado) ---------- */
/* O RODAPÉ INTEIRO SAI DA SERIFA — 02/09/2026, a pedido da dona ("rodapé sem serif").
Quem estava serifado eram os quatro cabeçalhos de coluna — PLATAFORMA, CONTATO, SUPORTE,
LEGAL —, e não por escolha: são ``, e a regra geral dos títulos veste de Fraunces
todo `h1`–`h4` da página. É o mesmo respingo que os tokens já contam ("ela estava, por um
descuido meu, em 69 lugares que não são título"), aparecendo aqui em quatro rótulos de
dez pixéis em CAIXA ALTA com `letter-spacing` — que é o tamanho e o tratamento em que uma
serifa de display menos serve: os serifos viram sujeira e o rótulo perde a legibilidade
justamente onde ele já é miúdo.
A regra pega o rodapé INTEIRO, e não só o `h4`, para que um título novo aqui dentro nasça
certo — que é o oposto do que aconteceu com estes quatro. */
footer, footer h1, footer h2, footer h3, footer h4{font-family:var(--fonte-interface);}
/* O RODAPÉ ENTRA POR DEGRADÊ — 02/09/2026, o segundo pedido do "faz degradê entre essas
seções". Era o corte mais seco da página inteira: pergaminho #F8F3E7 encostando em
#1B160F numa linha de um píxel.
A RAMPA COMEÇA EM TRANSPARENTE, e não no pergaminho, e essa é a única decisão que
importa aqui: o mesmo rodapé aparece nas 33 páginas de produto, onde o fundo NÃO é
pergaminho — é a cor da leitura (violeta, malva, ouro). Uma rampa que partisse de
`var(--bg)` desenharia uma faixa bege dentro de uma página violeta, ou seja, criaria a
emenda que ela veio desfazer. Partindo do transparente, quem aparece nos primeiros
140 px é o fundo que estiver atrás — qualquer que ele seja.
E O RESPIRO DE CIMA SUBIU DE 50 PARA 158 px porque a rampa precisa de lugar: texto em
cima do degradê ficaria com contraste diferente em cada linha, do começo ao fim do
parágrafo. Degradê sem espaço é degradê em cima de conteúdo.
O FILETE DE LATÃO DE 1 px SAIU. Ele marcava o topo do rodapé quando o topo era um
corte; sobre a rampa ele vira um risco dourado solto no meio do pergaminho — que é
exatamente o "risco seco" que este arquivo já tinha aprendido a tirar da FAQ. */
/* O DEGRADÊ SAIU EM 05/09/2026, A PEDIDO DA DONA: "o rodapé com gradiente/degradê não
combina, pode remover... acredito que esteja fora do padrão de um site profissional".
Ela tem razão, e o motivo é o que está escrito logo acima: a rampa foi ficando cada vez
mais elaborada para consertar a si mesma. Ela passava por um marrom PORQUE a rampa simples
caía num cinza morno no meio; ganhou 196 px de respiro PORQUE degradê sem espaço fica em
cima do conteúdo; perdeu o filete de latão PORQUE sobre a rampa ele virava um risco solto.
Três consertos encadeados são o sinal de que a peça é que estava errada — nenhum deles
teria sido preciso sem ela.
AGORA É UM CORTE: creme em cima, tinta embaixo. O respiro caiu de 196 para 64 px porque
os 196 existiam para caber a rampa, e sem rampa eles são só um vazio. O rodapé encolheu
de 533 px para 387 na janela do tablet. */
/* O RODAPÉ RESPIRA ANTES DE COMEÇAR — 11/09/2026: "dê mais espaço embaixo da última seção
antes do rodapé porque tá muito perto. Isso vale para TODO APP", pedido da dona com a foto
do telefone — a promessa que fecha a página inicial encostando na tinta escura.
O RESPIRO É DAQUI, E NÃO DA ÚLTIMA SEÇÃO, e essa é a decisão que faz o pedido valer no app
inteiro numa linha só. Há UM rodapé neste documento (desde 03/09, quando as duas cópias
viraram uma) e ele fecha TODAS as telas: a inicial, as 32 de produto, a Astrologia eletiva,
o parto programado, a biblioteca, a leitura comprada, a Aba Lunar e os Horóscopos. Cada
tela acaba numa seção diferente — e algumas acabam em faixa de arte de ponta a ponta, que
não se pode empurrar por dentro sem mover a arte junto. Pedir o respiro a quinze seções
seria quinze números para divergir; pedi-lo ao rodapé é um, e ele é o mesmo em todas.
É MARGEM, E NÃO `padding`, porque o que se quer é o PERGAMINHO aparecendo entre a última
seção e a tinta — um `padding-top` daria mais tinta escura, que é o contrário do pedido:
mais rodapé, e não mais folga antes dele.
O TELEFONE GANHA UM POUCO MENOS (56 contra 72), pela mesma conta que a faixa de
depoimentos já registra neste arquivo: a página inteira respira menos ali. Menos, e não
nada — foi num telefone que a dona tirou a foto. */
footer{
background:var(--ink);
margin-top:72px;
padding:64px 0 48px; position:relative; overflow:hidden;
}
@media (max-width:700px){ footer{margin-top:56px;} }
/* CINCO COLUNAS DESDE 10/09/2026 — as redes sociais entraram quando o botão verde
flutuante saiu. O `auto-fit` com mínimo em vez de `repeat(5,1fr)`: cinco colunas fixas
numa janela de tablet deitado dariam 160 px cada, e "Política de Privacidade" não cabe.
Assim elas se acomodam sozinhas em 5, 3 ou 2 conforme a largura. */
.footer-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:32px;}
.footer-grid h4{font-size:var(--c-apoio); color:#E7DEC7; text-transform:uppercase; letter-spacing:0.07em; margin-bottom:14px; font-weight:600;}
.footer-grid a{font-size:var(--c-apoio); color:#B9AF98; display:block; margin-bottom:9px;}
.footer-grid a:hover{color:#F4EFE2; transform:translateX(2px);}
/* A linha de direitos reservados fecha o rodapé. O FILETE QUE A SEPARAVA DOS LINKS SAIU EM
30/08/2026, a pedido, e o respiro cresceu na conta do que ele ocupava: separar não é a
mesma coisa que riscar, e tirar o filete sem devolver o espaço aproximaria o fecho dos
links em vez de soltá-lo. O `line-height` está aqui porque agora são DUAS linhas — o
1.68 do corpo é para parágrafo, e num fecho de doze pixels deixa as duas coladas. */
/* O RESPIRO SUBIU DE 48 PARA 72 PX — 02/09/2026: "mais espaçamento, pq o © 2026 Shelly
Gonella Astrologia & Cartomancia / Todos os direitos reservados está muito perto do nome
das páginas".
Ela está descrevendo uma conta que nunca fechou. Em 30/08 o filete que separava o fecho
dos links saiu, e o respiro cresceu "na conta do que ele ocupava" — mas o que o filete
ocupava era 1 px, e o que ele FAZIA era separar. Trocar uma linha por 48 px de vazio numa
coluna de quatro links que já termina em texto pequeno não é a mesma troca: sem o risco,
o vazio precisa ser grande o bastante para ser lido como fim de bloco, e não como o
intervalo entre dois itens da lista.
Os 72 px são maiores que o maior vão da própria grade do rodapé (os 32 px de `gap` entre
as colunas), que é a régua que faz o fecho pertencer ao rodapé sem pertencer à lista. */
/* Os selos de bandeira aceitos. Eles são MONTADOS POR JAVASCRIPT a partir do que está de
fato ligado (ver `montarOsSelosDePagamento`) — anunciar Apple Pay num endereço onde o
checkout não o oferece é prometer o que a página não cumpre, e a promessa quebrada
aparece justo na hora de pagar. */
/* ELES ENCOLHERAM E FICARAM TODOS DA MESMA ALTURA — 10/09/2026, a pedido da dona: "os
logos das formas de pagamento estão grandes e visualmente muito diferentes entre si;
essa área parece mais loja virtual brasileira que o restante do produto".
O que fazia a fila parecer bagunçada não era o tamanho de cada um: era a ALTURA
desigual das pastilhas, porque a caixa crescia com o conteúdo (`min-height`). Agora a
altura é FIXA e igual para todas — as com arte e as escritas —, e a arte se acomoda
dentro dela. */
/* E A FILA VIROU GRADE — 10/09/2026, no mesmo dia e a pedido da dona: "o logo da stripe foi
o único q ficou pra abaixo; organiza eles melhor: ou todos em 1 linha, ou 2 linhas com
logos proporcionais".
O QUE ELA ESTAVA VENDO é o que `flex-wrap` faz quando o espaço acaba UM item antes do fim:
sete selos numa fileira e o oitavo sozinho embaixo. Não era o tamanho de cada um — a
passada da manhã já tinha igualado a altura das pastilhas —, era a QUEBRA, que depende da
largura que sobrar depois da linha de direitos ao lado. Numa fila, o desenho é o resto de
uma conta; numa grade, ele é a conta.
SÃO QUATRO COLUNAS NO TELEFONE E UMA FILEIRA SÓ A PARTIR DE 620 px. Com a Stripe ligada
são oito selos: quatro colunas dão duas fileiras CHEIAS, que é a segunda metade do pedido
("ou 2 linhas com logos proporcionais"). E colunas iguais são o "proporcionais": a
pastilha quadrada da Amex passa a ocupar a mesma largura da tira do Google Pay.
O `flex:none` DENTRO DO FECHO não é zelo: sem ele o flex de fora encolhe a grade para
caber ao lado dos direitos, e a fileira única volta a quebrar — o defeito de novo, com
outra roupa. */
/* A PASTILHA BRANCA SAIU EM 11/09/2026 — "no rodapé os logos estão em card branco, nunca
pedi card em volta deles, tira", pedido da dona.
ELA TINHA RAZÃO NAS DUAS PONTAS: ninguém pediu a moldura, e ela não era desenho — era
muleta. O rodapé é escuro e as artes oficiais são feitas para papel claro, então a
pastilha era o papel. Tirar só estas duas linhas teria deixado a `mastercard.png` e a
`stripe.png` como RETÂNGULOS BRANCOS (as duas trazem o fundo assado no arquivo — ou seja,
o card voltaria por dentro da imagem) e o Apple Pay, o Google Pay e o Pix quase apagados.
ENTÃO O CONSERTO NÃO É DE CSS, É DE ARTE: cinco das oito ganharam uma versão para fundo
escuro em `assets/pagamento/*-escuro.*`, e quem as escolhe é a `montarOsSelosDePagamento`.
O porquê de cada uma, e por que a Visa, a Amex e o Mercado Pago NÃO têm versão escura,
está escrito ao lado da lista, no `gaveta-de-navegacao.js`.
O QUE SOBRA AQUI É ESPAÇO, E NÃO CAIXA. Sem pastilha o que alinha a fila é a altura da
ARTE e o vão entre elas, então o `gap` cresceu (as marcas precisam de ar entre si quando
não há moldura dizendo onde uma acaba) e a altura subiu de 15 para 18 px — o que era
generoso dentro de uma cápsula de 26 px fica pequeno solto no escuro.
O NOME ESCRITO CONTINUA COM CÁPSULA, e é a exceção que prova a regra: ele é TEXTO, e texto
claro sobre fundo escuro sem nada em volta não se lê como selo, se lê como link perdido.
Hoje nenhuma bandeira cai nesse caso — as oito têm arte —, e a regra fica de pé para a
nona, que vai nascer sem arte como todas nasceram. */
.footer-pagamentos{
display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px 14px; align-items:center;
margin-top:56px; padding-top:26px; border-top:1px solid rgba(255,255,255,0.08);
}
@media (min-width:620px){
.footer-pagamentos{
grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:64px;
justify-content:center;
}
}
.footer-pagamentos:empty{display:none; border-top:none; margin-top:0; padding-top:0;}
.selo-pagamento{
font-size:var(--c-micro); font-weight:600; letter-spacing:0.02em; color:#C8BEA6;
background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.10);
border-radius:var(--radius-pill,999px); padding:0 10px; white-space:nowrap;
display:inline-flex; align-items:center; justify-content:center; height:26px;
box-sizing:border-box;
}
/* A arte oficial fica SOBRE O RODAPÉ, sem fundo, sem borda e sem cápsula.
O `max-width` iguala o PESO VISUAL, e não o tamanho: as marcas vêm em duas formas, a
deitada (Stripe, Google Pay) e a quadrada (Amex, Mercado Pago). Igualando só a altura,
a deitada fica três vezes mais larga e a fila desanda. */
.selo-pagamento.com-arte{
background:none; border:0; border-radius:0; padding:0; height:auto;
}
/* DUAS ALTURAS, E NÃO UMA — é o `forma` da lista de selos chegando à tela pela primeira vez
(ele foi escrito em 02/09 e nunca tinha saído do JavaScript). A régua está lá e continua
valendo: as artes oficiais NÃO têm proporção comum. A da Amex e a do Mercado Pago são
QUADRADAS; a do Google Pay é uma tira quase três vezes mais larga que alta. Dando a mesma
altura às duas formas, o quadrado sai com 18 px de largura ao lado de uma tira de 48 — e
a fila desanda exatamente como desandava com a moldura, só que sem a moldura para disfarçar.
Igualando a LARGURA aproximada de cada uma, elas passam a pesar o mesmo na fileira: é o que
o comentário da lista chama de "a palavra lê maior com menos altura".
MEDIDO nas oito: com 24 e 15 px de altura, as larguras ficam entre 23 e 49 px. Com uma
altura só, iam de 18 a 48. */
.selo-pagamento.com-arte img{width:auto; max-width:60px; object-fit:contain; display:block;}
.selo-pagamento.com-arte.forma-cartao img{height:24px;}
.selo-pagamento.com-arte.forma-palavra img{height:15px;}
/* A rede para uma bandeira nova que entre na lista sem `forma`: ela não fica sem altura. */
.selo-pagamento.com-arte img:not(.forma-cartao img):not(.forma-palavra img){height:20px;}
.footer-pagamentos + .footer-direitos{margin-top:22px; padding-top:0;}
.footer-direitos{margin-top:72px; padding-top:30px; font-size:var(--c-nota); line-height:1.9; color:#8B8266; text-align:center;}
@media (max-width:700px){ .footer-grid{grid-template-columns:1fr 1fr; gap:26px 20px;} /* Contato tem o item mais comprido do rodapé ("WhatsApp (19) 99405-4717"). Em duas
colunas ele não cabe numa linha e quebrava no meio do número: `break-word` deixa a
quebra acontecer onde o texto permite, e não dentro do telefone. */
.footer-grid a{overflow-wrap:anywhere;} }
/* ==========================================================================
A METODOLOGIA E AS PERGUNTAS NUMA JANELA DEITADA — 03/09/2026, de noite
==========================================================================
Pedido da dona, com a foto do tablet deitado: "a seção Metodologia e Dúvidas ainda está
gigante, desproporcional para a versão tablet/mobile — ela não está adaptada ainda".
MEDIDO NUMA JANELA DE 1365x640, que é a do tablet dela:
· a Metodologia tem 985 px de altura — uma seção e meia de tela para UM bloco;
· o cartão dela sozinho tem 669, ou seja, mais alto que a janela inteira;
· as Perguntas frequentes têm 1.075.
O DEFEITO NÃO É DE LARGURA, É DE ALTURA — o mesmo do formulário e da roda do resultado,
consertados no `pagina-inicial-e-formulario.css` com o mesmo corte. Numa janela deitada
sobra largura e falta altura, e este bloco foi desenhado ao contrário: 52 px de respiro
interno, 34 entre a frase e o primeiro item, 30 entre os dois itens, e os dois itens um
EMBAIXO do outro num cartão de 760 px de largura com as linhas de texto pela metade.
O QUE MUDA, e cada número é o mesmo desenho apertado, não um desenho novo:
· os dois itens numerados passam a ficar LADO A LADO. É a maior economia sozinha
(uns 115 px) e é o que a largura sobrando pede: duas colunas de texto curto em vez de
duas linhas de texto curto com metade da largura vazia;
· a faixa de arte cede de 34vh para 26vh — 218 px viram 166;
· os respiros internos apertam, e nenhum tamanho de letra muda, com uma exceção: o `h2`
desce um degrau da escala (de `--t-secao` para `--t-bloco`), que é escolher um degrau
e não um número, como a regra dos tokens manda.
MEDIDO DEPOIS, na mesma janela: a Metodologia cai para perto de uma tela, e as Perguntas
acompanham. Acima de 760 px de altura NADA MUDA — o desenho generoso continua onde ele
cabe, que é onde ele foi pensado. */
@media (min-width:900px) and (max-height:760px){
.method, .faq{--faixa-de-arte:clamp(150px, min(26vw, 26vh), 320px);}
.method{padding-bottom:48px;}
.faq{padding-bottom:52px;}
.method-content{padding:30px 38px;}
.method h2{font-size:var(--t-bloco);}
.method-divider{margin:14px 0 18px;}
.method-lede{margin-bottom:20px;}
.method-feature{margin-bottom:0; gap:16px;}
.method-toggle{padding:11px 22px; margin-top:14px;}
.method-credibility{margin-top:20px; padding-top:14px;}
.method-more-inner{padding-top:16px;}
/* OS DOIS ITENS LADO A LADO. As linhas são declaradas uma a uma porque o `nth-of-type`
não serve aqui: o divisor, os dois itens, o "saiba mais" e a nota de rodapé são todos
`div`, e contá-los por tipo daria o item errado. Com a linha 5 escrita nos dois itens e
a coluna deixada em `auto`, o próprio navegador põe o primeiro na coluna 1 e o segundo
na 2 — que é o que o encaixe automático da grade faz quando a linha já está decidida. */
.method-content{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:34px; align-content:start;}
.method-content > .eyebrow{grid-column:1 / -1; grid-row:1;}
.method-content > h2{grid-column:1 / -1; grid-row:2;}
.method-content > .method-divider{grid-column:1 / -1; grid-row:3;}
.method-content > .method-lede{grid-column:1 / -1; grid-row:4;}
.method-content > .method-feature{grid-row:5;}
.method-content > .method-toggle{grid-column:1 / -1; grid-row:6; justify-self:start;}
.method-content > .method-more{grid-column:1 / -1; grid-row:7;}
.method-content > .method-credibility{grid-column:1 / -1; grid-row:8;}
/* As perguntas não viram duas colunas, e é decisão: uma sanfona em duas colunas move a
coluna vizinha a cada resposta aberta — a pessoa clica numa pergunta e o texto que ela
estava lendo ao lado salta de lugar. O que aperta aqui é o respiro de cada linha. */
.faq-item summary{padding:14px 4px;}
.faq-item p{padding-bottom:14px;}
}
/* ==========================================================================
AS DÚVIDAS E O RODAPÉ NO TABLET E NO COMPUTADOR — 03/09/2026, de noite
==========================================================================
Dois pedidos da dona na mesma mensagem, e os dois são o mesmo princípio que ela nomeou
uma hora antes ("pensar nas páginas para tablet terem divisões diferentes do telefone"):
"Dúvidas sobre a leitura ainda está muito grande."
"Rodapé precisa ser ajustado para tablet/pc — ele está muito grande e as coisas muito
centradas no meio da tela."
MEDIDO NUMA JANELA DE 1365x640, antes:
· as Perguntas frequentes tinham 913 px de altura (1,43 tela) com o cartão em 720 px de
largura, ou seja 53% da janela: sete perguntas empilhadas numa coluna estreita, com
creme vazio dos dois lados;
· o rodapé tinha 668 px — mais que uma tela inteira. Dentro dele, os selos de bandeira e
a linha de direitos vinham EMPILHADOS e centrados, formando uma coluna estreita no
meio de um rodapé largo, logo abaixo de quatro colunas espalhadas. É isso que ela
chama de "muito centradas no meio da tela".
AS PERGUNTAS VIRAM DUAS COLUNAS, e o receio de mexer numa sanfona em duas colunas — que
este arquivo já registrou ao recusar isso numa janela deitada — não vale aqui: naquele
caso as duas colunas eram MEIA LARGURA de uma coluna estreita, e a resposta aberta
empurrava a vizinha. Numa grade de verdade cada pergunta tem célula própria: abrir a de
cima empurra as de BAIXO da mesma coluna, exatamente como já acontece na coluna única, e
a coluna do lado não se mexe.
O RODAPÉ FECHA EM UMA LINHA: os direitos à esquerda, na mesma vertical da primeira coluna;
as bandeiras à direita. É o desenho que
qualquer rodapé largo tem, e ele devolve os dois problemas de uma vez — a altura (dois
blocos empilhados viram um) e o "centrado no meio" (as duas pontas passam a encostar nas
margens que as colunas de cima já usam).
E A RAMPA ENCURTA. Ela é o degradê que impede o corte seco entre o pergaminho e o
quase-preto, e ocupava 196 px de respiro de cima — 29% do rodapé inteiro. Numa janela de
640 isso é um terço da tela só para a passagem de cor. As paradas descem na mesma
proporção, então a passagem continua sendo a mesma curva, mais curta. */
/* AS DUAS COLUNAS DAS PERGUNTAS COMEÇAM EM 760, e o fecho do rodapé só em 1000: são duas
contas diferentes. A pergunta mais comprida cabe em 300 px de linha, que é o que sobra num
tablet de 760; já as oito bandeiras somam 530 px e a linha de direitos pede uns 300, e as
duas só cabem lado a lado quando a faixa passa de 866 — o que acontece a partir de 1000.
Um número só para as duas coisas quebraria uma delas. */
@media (min-width:760px){
/* DE GRADE PARA COLUNAS — 06/09/2026, e é o conserto do vão que a dona fotografou.
A grade morreu do mesmo mal da coluna de leitura da tela de produto: NUMA GRADE, A LINHA
TEM A ALTURA DA MAIOR CÉLULA, e a vizinha herda esse tamanho. Com "Como funciona?"
aberta à esquerda, a pergunta à direita ficava sozinha numa linha de 300 px e a seguinte
só podia começar depois dela — 158 px de branco medidos entre as duas, e uma célula vazia
no canto de baixo.
O `align-items:start` de antes atacava metade do problema, e o comentário dele dizia isso
com todas as letras: "o vão continua existindo... mas passa a ser espaço, e não uma caixa
desenhada". Encostar a pergunta no topo tira o filete solto; NÃO tira o buraco. É a mesma
forma do `span 3` da tela de produto — meio conserto que resolve o sintoma visível e
deixa o de trás.
COLUNAS DE TEXTO NÃO TÊM LINHA, e é isso que resolve: cada pergunta ocupa a própria
altura e a seguinte encosta nela, em qualquer estado de aberto ou fechado. Medido: os
vãos vão de 158 e 0 para ZERO nas duas colunas, e continuam zero abrindo outra pergunta.
A lista encolheu de 421 para 326 px.
O `break-inside:avoid` impede que uma resposta aberta seja partida ao meio pela quebra de
coluna, e a divisa entre as duas passa a ser o `column-rule` — o `nth-child(odd)` de antes
não serve mais, porque em colunas "ímpar" já não quer dizer "da esquerda". */
.faq-list{
max-width:980px;
display:block;
column-count:2; column-gap:0; column-rule:1px solid var(--border-soft);
padding:6px 0;
}
.faq-item{break-inside:avoid;}
/* O respiro lateral sai da caixa e vai para cada pergunta: com ele na caixa, a divisa
entre as duas colunas ficaria a 24 px de cada texto e a 0 da vizinha. */
.faq-item{padding-inline:24px;}
/* A divisa é do `column-rule` agora — ver acima. Esta linha some junto com a grade. */
}
@media (min-width:1000px){
/* O degradê saiu aqui também — ver o comentário longo no `footer` acima. Na tela larga a
rampa era de 134 px e o respiro de 150; agora é corte, e o respiro é o mesmo da caixa
estreita. */
footer{padding:64px 0 48px;}
/* AS QUATRO COLUNAS NÃO OCUPAM OS 1.080 DO SITE — 05/09/2026, o segundo pedido da mesma
mensagem: "e até diminuir a largura do rodapé". São links curtos, e esticados na largura
inteira sobrava ar demais entre um e outro.
CADA COLUNA TEM O TAMANHO DO QUE ELA CARREGA, e não um quarto de um número combinado.
Elas se agrupam à esquerda com um vão fixo de 64 px, e o resto da faixa fica vazio.
ESTE É O CONSERTO DE UM ERRO MEU, E O ERRO VALE MAIS QUE O CONSERTO. A primeira versão
desta regra dizia `max-width:920px` e trazia escrito que 920 era o chão medido. Era o
chão EM PORTUGUÊS. Em inglês e espanhol o WhatsApp leva o código do país —
"WhatsApp +55 (19) 99405-4717", 212 px contra 181 —, e em 920 ele partia em duas linhas
nas 600 páginas dos outros dois idiomas. O chão de verdade era 944.
Coluna do tamanho do conteúdo não tem chão para errar: medida nos três idiomas, a fileira
ocupa 767 px em português, 772 em inglês e 796 em espanhol, e nenhum item quebra. No dia
em que um texto crescer, a coluna cresce com ele.
E A LINHA DE BAIXO FICA NOS 1.080: os direitos e as bandeiras precisam da largura
inteira — em 900 as bandeiras iam para duas fileiras e o nome da empresa partia ao meio.
Como a grade é alinhada à ESQUERDA, o "PLATAFORMA" continua na mesma vertical do
"© 2026" logo abaixo, que é o alinhamento que o `.footer-fecho` existe para manter. */
/* SÃO CINCO COLUNAS DESDE 10/09/2026, E ESTA LINHA DIZIA QUATRO. As redes sociais
entraram no rodapé de manhã, quando o botão verde flutuante saiu, e a regra da tela
larga continuou contando quatro: a quinta coluna ia sozinha para uma segunda fileira,
no computador — que é onde o rodapé tem largura de sobra. O `repeat(auto-fit, minmax)`
da regra de cima acomodava a quinta; esta, com o número escrito à mão, não.
O NÚMERO CONTINUA ESCRITO À MÃO, e é de propósito: aqui as colunas têm o tamanho do
que carregam (`auto`) e se agrupam à esquerda, que é o pedido de 05/09 ("até diminuir
a largura do rodapé"). O `auto-fit` esticaria as cinco pela faixa inteira de novo.
Quem acrescentar a sexta coluna troca este número — e vai descobrir isso pelo mesmo
caminho que eu: olhando o rodapé numa janela larga. */
.footer-grid{grid-template-columns:repeat(5, auto); justify-content:start; column-gap:52px;}
.footer-fecho{
display:flex; align-items:center; justify-content:space-between; gap:36px;
margin-top:36px; padding-top:24px; border-top:1px solid rgba(255,255,255,0.08);
}
/* Os dois filhos perdem a margem e o filete que tinham quando eram blocos soltos: quem
separa agora é a caixa de fora, e dois filetes na mesma altura é um risco duplo. */
/* A ORDEM É TROCADA POR `order`, e não no HTML: os direitos ficam à ESQUERDA, na mesma
vertical do "PLATAFORMA" logo acima, e as bandeiras à direita. No HTML eles continuam na
ordem em que se lê num telefone — as bandeiras primeiro, que é a informação que decide a
compra, e o registro da empresa por último. */
.footer-fecho .footer-pagamentos{order:2; margin-top:0; padding-top:0; border-top:none;
justify-content:end; flex:none;}
.footer-fecho .footer-direitos{order:1; margin-top:0; padding-top:0; text-align:left; line-height:1.7; min-width:0;}
}
/* ==========================================================================
TELA DE PRODUTO (#view-product) — toda regra aqui é prefixada com
"#view-product" de propósito, pra não vazar estilo pro catálogo (que usa
as mesmas classes genéricas, tipo .hero e .btn-primary, com outro visual).
========================================================================== */
/* A PÁGINA VESTE A COR DA CAPA — 31/08/2026, a pedido da dona: "página com mesmo fundo
(mais claro) / cor de botões para combinar com capa".
QUEM PÕE A CLASSE é o `renderProduct` (app/nucleo/catalogo-e-compra.js), no `#view-product`, a
cada abertura de produto. Daqui para baixo NENHUMA regra sabe qual produto está aberto:
elas leem `--capa-fundo`, `--capa-botao`, `--capa-vidro` — e é isso que faz a página do
Mapa do corpo ser verde e a da Espiritualidade violeta sem existirem duas folhas de
estilo. A reserva em cada `var()` é o pergaminho e o latão de antes: se um dia a classe
não chegar, a página sai como sempre foi, e não branca.
O FUNDO É A COR DA CAPA COM 8,5% DE FORÇA, e a dose importa: a capa é um gradiente que
ocupa 88 px de círculo, o fundo ocupa a tela inteira. A mesma saturação nos dois faria
uma página pintada, não um papel — e o texto do produto, que é o que vende, teria de
brigar com ela. */
*{box-sizing:border-box; margin:0; padding:0;}#view-product{font-family:var(--fonte-interface); background:var(--capa-fundo, var(--bg)); color:var(--ink-soft); line-height:1.68; -webkit-font-smoothing:antialiased; font-size:var(--c-lede);}#view-product h1, #view-product h2, #view-product h3:not(:where(.payment-brick-title)), #view-product h4{font-family:var(--fonte-titulo); font-weight:600; color:var(--ink); letter-spacing:-0.015em; line-height:1.18;}#view-product a{color:inherit; text-decoration:none;}#view-product .wrap{max-width:640px; margin:0 auto; padding:0 24px;}
/* ==========================================================================
A TELA DE PRODUTO NO TABLET E NO COMPUTADOR — 13/09/2026, a segunda forma
==========================================================================
Pedido da dona, olhando a página de produto num computador: "não tem como pôr o
formulário abaixo do card explicativo aumentando a largura de ambos para ficar mais
adaptado a tela tablet/pc?".
O QUE HAVIA AQUI ERA A GRADE DE 03/09, de duas colunas: o que se LÊ de um lado, o que se
PREENCHE do outro. Ela não estava errada — nasceu equilibrada (1.097 px de leitura contra
1.170 de formulário) e resolvia um problema real, que está descrito dois parágrafos
abaixo e continua valendo. Ela desequilibrou sozinha: a leitura ENCOLHEU (as duas fichas
viraram uma em 08/09, a citação saiu, a ponte saiu) e a encomenda CRESCEU (o cadastro e o
pagamento passaram a caber na mesma rolagem). Medido em 12/09, nos 33 produtos, em
1365x640: a leitura media de 633 a 771 px, a encomenda de 1.397 a 1.965 — e o vazio
embaixo da leitura ia de 652 a 1.250 px em TODOS. Prender a ficha (o `sticky` de 12/09)
tapou o buraco; a dona pediu para acabar com ele.
O PROBLEMA QUE A GRADE DE 03/09 RESOLVIA É O ÚNICO RISCO DESTA MUDANÇA, e por isso ele é
medido e não presumido. Empilhada numa coluna de 640 px, a página punha o formulário a
1.244 px do topo — "quem abre a página num computador não vê que há o que encomendar sem
rolar duas telas". A conta mudou porque a leitura encolheu pela metade e porque as faixas
passaram a ser LARGAS: medido hoje, nos 32 produtos, o título "Encomendar minha análise"
nasce a menos de uma tela do topo em 1365x640, em todos. É a régua "a encomenda aparece na
primeira tela" que guarda isso, e ela existe porque este número não é estável: um texto de
oferta que cresça duas vezes o empurra para fora.
A FORMA NOVA são três faixas de 1.016 px, uma debaixo da outra, começando e acabando na
mesma vertical — que é a segunda metade do pedido ("aumentando a largura de ambos"):
1. A CAPA VIRA FAIXA: o emblema ao LADO do título e da frase, e não em cima deles. Numa
coluna de 520 o emblema empilhado custava 110 px de altura; ao lado, ele não custa
nenhum, e a capa deixa de ser uma torre no alto de uma página larga.
2. A FICHA OCUPA A FAIXA INTEIRA, com a prosa em DUAS COLUNAS. Isto não é enfeite de
jornal: uma linha de texto de 1.016 px tem cerca de 130 caracteres, e o olho perde o
começo da linha seguinte muito antes disso. Em duas colunas cada uma fica com ~62,
que é a medida de leitura da casa. Sem isto, "aumentar a largura do card" pioraria
justamente o que o card existe para fazer, que é ser lido.
3. A ENCOMENDA OCUPA A FAIXA INTEIRA, e os CAMPOS é que se emparelham — ver o `.row2`
do e-mail e da senha, no `index.html`. Um formulário de 1.016 px com campos de ponta
a ponta é pior de preencher que o de 440 que havia aqui: o olho anda a faixa inteira
entre o rótulo e o fim da caixa. Emparelhados, os campos ficam com ~470 — a mesma
largura confortável de antes, com metade da altura.
ABAIXO DE 1000 px NADA MUDA, e é o mesmo limite de sempre: a coluna de 640 é a do celular
e a do tablet em pé, e é a que está aprovada.
O QUE SAIU JUNTO, e sai porque a grade saiu: as colocações de linha e coluna de cada peça
(`grid-row:5`, `grid-row:6`, o `span 3` da encomenda, a linha da folga) e o trilho preso da
ficha. Cada uma delas existia para arrumar um defeito que só a grade de duas colunas tinha
— a sobra de altura repartida entre as linhas (05/09), a peça nova que caía na linha da
folga (07/09), a coluna curta ao lado da comprida (12/09). Regra de CSS que conserta um
defeito impossível é peso morto que a próxima pessoa lê procurando onde aquilo aparece. A
história delas fica nos relatórios e no Git; o arquivo guarda o desenho de hoje.
E AS DUAS TELAS ELETIVAS VIERAM JUNTO, no mesmo dia: a dona perguntou "você fez a das
eletivas também?" e decidiu empilhar com o número na frente. O porquê delas, e o que a
mudança custou lá (a encomenda do parto desceu de 75 para 1.155 px do topo, por causa do
aviso médico que não se move de cima), está no `eletiva-o-objetivo.css` — inclusive o que a
régua daquela tela deixou de cobrar por causa disso. */
@media (min-width:1000px){
#view-product > .wrap{max-width:1080px; padding:0 32px;}
/* A CAPA EM FAIXA. O emblema é UM item que atravessa as três linhas do texto, e não um
bloco flutuando: assim ele fica centrado na altura do conjunto sem número nenhum
escrito, e continua centrado quando o título quebrar em duas linhas num produto de nome
comprido. O `:not(.de-sempre)` é o de sempre — a capa CLONADA que fecha a página é outra
`section.hero` dentro desta mesma tela, e o cabeçalho deste arquivo conta por quê. */
#view-product > .wrap > section.hero:not(.de-sempre){
display:grid; grid-template-columns:auto minmax(0,1fr);
grid-template-rows:auto auto auto;
column-gap:30px; align-items:center; text-align:left; padding:44px 0 4px;
}
#view-product > .wrap > section.hero:not(.de-sempre) > .hero-glyph{grid-column:1; grid-row:1 / span 3; margin:0;}
#view-product > .wrap > section.hero:not(.de-sempre) > .eyebrow{grid-column:2; grid-row:1; align-self:end;}
#view-product > .wrap > section.hero:not(.de-sempre) > h1{grid-column:2; grid-row:2;}
/* O TETO DA FRASE É EM `ch`, E NÃO EM PÍXEIS, e é a diferença que o faz continuar certo:
`ch` mede na letra da página, então o limite acompanha o tamanho do texto em vez de ser
um número combinado com a fonte de hoje. O `margin:0` desfaz o `margin:0 auto 4px` da
regra geral da frase — margem automática CENTRA um item de grade, que é o defeito que a
barra do horóscopo teve em 12/09. */
#view-product > .wrap > section.hero:not(.de-sempre) > .lede{
grid-column:2; grid-row:3; align-self:start; max-width:64ch; margin:0;
}
/* A FICHA, DE PONTA A PONTA. As duas colunas da prosa são de `columns`, e não de uma
grade: o cartão tem UM parágrafo dentro, e `columns` o reparte em duas sem que ninguém
precise partir o texto no HTML. No dia em que a oferta crescer ou encolher, o navegador
reequilibra as duas sozinho. */
#view-product > .wrap > section.ficha-do-produto{padding:18px 0 26px;}
#view-product .answers-card .oferta-texto{columns:2; column-gap:54px;}
/* A ENCOMENDA. O título dela alinha com o cartão, e não com o meio da faixa: um título
centrado sobre um formulário alinhado à esquerda é o tipo de desalinho que ninguém sabe
nomear e todo mundo sente. */
#view-product > .wrap > #checkout-section{padding-top:8px;}
#view-product > .wrap > #checkout-section > .section-title{text-align:left;}
#view-product .ficha-do-produto .section-title{text-align:left;}
/* A FRASE DA CAPA NÃO É CENTRADA — 04/09/2026, e a dona apontou o desalinho num print do
meu próprio trabalho: "a capa (redonda), título está muito à direita, centraliza com o
restante; muita coisa torta ainda". O SOBRETÍTULO NÃO PODE SER CONSERTADO DAQUI: a regra
que o centra mora no `correcoes-de-colisao.css`, que é colado DEPOIS deste (ver
`design/ordem.txt`), e entre pesos iguais vence o último. O conserto dele está lá, ao
lado da regra que ele corrige. */
#view-product .hero:not(.de-sempre) .lede{margin-left:0; margin-right:auto;}
}#view-product button{font-family:inherit; cursor:pointer;}
/* header */
#view-product header{position:sticky; top:0; z-index:50; background:var(--capa-vidro, rgba(248,243,231,0.85)); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid var(--border-soft);}#view-product .nav{display:flex; align-items:center; justify-content:space-between; padding:16px 24px; max-width:640px; margin:0 auto;}
/* A BARRA DE CIMA ACOMPANHA A LARGURA DA PÁGINA — 04/09/2026: "menu precisa ajustar os botões
nos cantos da página".
O `max-width:640px` da linha acima é da época em que a página INTEIRA tinha 640. Ela passou
a 1.080 em 03/09 e a barra ficou para trás: medido numa janela de 1365, a caixa do menu
ficava de 363 a 1003 enquanto o conteúdo da página ia de 175 a 1191 — o botão do menu
flutuava a 212 px da margem esquerda do texto e o seletor de idioma a 212 da direita, os
dois espremidos no meio de uma barra que ocupa a tela toda.
Os números aqui são os do `.wrap` da página no mesmo ponto (1.080 de teto, 32 de respiro),
e por isso o menu passa a nascer exatamente onde o título começa. */
@media (min-width:1000px){
/* O TETO SAIU EM 05/09/2026 e o respiro virou 40 px — ver o comentário longo no
`cabecalho-gaveta-e-idioma.css`. O alinhamento com o título, que o parágrafo acima
descreve, foi trocado pelo canto a pedido da dona: numa janela de 1.700 o menu estava
a 342 px da borda. */
#view-product .nav{max-width:none; padding:16px 40px;}
}
/* hero */
/* O `.hero` GENÉRICO PINTA `var(--bg)`, e ele vale aqui também: as duas telas dividem a
classe (é o que o cabeçalho deste arquivo avisa). Enquanto ele pintava, o pergaminho
ficava por cima do fundo tingido, e a página do produto saía com uma FAIXA cor de papel
atravessando o topo — visível numa captura do violeta, que foi como isto foi achado.
Transparente, o fundo da página aparece inteiro, do alto do glifo ao rodapé. */
/* O `:not(.de-sempre)` NAS REGRAS DA CAPA — 03/09/2026, com o fecho das páginas.
Toda tela de venda passou a terminar com "O céu no exato momento do seu nascimento…",
que é a CAPA da tela de início clonada — outra `` dentro desta
mesma tela (ver `app/nucleo/as-secoes-de-sempre.js`). Sem esta ressalva, as regras da
capa DAQUI — centrada, com 44 px em cima e o título menor — cairiam também sobre a
cópia, e o mesmo bloco sairia com outra letra e outro alinhamento só nesta tela. A marca
`de-sempre` existe para isto: separar a capa desta página das cópias que passam por ela. */
#view-product .hero:not(.de-sempre){background:transparent;}
#view-product .hero:not(.de-sempre){padding:44px 0 8px; text-align:center; animation:fadeInUp var(--dur-slow) var(--ease-soft) both;}#view-product .hero-glyph{
width:88px; height:88px; border-radius:50%; margin:0 auto 22px;
display:flex; align-items:center; justify-content:center;
font-size:38px; color:#fff; box-shadow:0 16px 34px var(--capa-sombra, rgba(126,90,40,0.34)), 0 0 0 6px rgba(255,255,255,0.55);
}/* O SOBRETÍTULO É O DA CAPA DESTA TELA, e o seletor passou a dizer isso — 04/09/2026.
Escrito como `#view-product .eyebrow`, ele alcançava TRÊS sobretítulos: o da capa do
produto ("Análise astrológica"), que é o dele, e mais dois dentro das seções CLONADAS da
tela de início — o da Metodologia e o das Perguntas frequentes. O da Metodologia é AZUL na
tela de início (`.method .eyebrow{color:var(--azul-tipo)}`, duas classes) e saía dourado
aqui, porque um id ganha de duas classes. Mesmo texto, mesma seção, outra cor.
É a mesma família do botão logo abaixo: regra da tela de venda vazando no fecho copiado. */
#view-product .hero:not(.de-sempre) .eyebrow{font-size:var(--c-nota); letter-spacing:0.14em; text-transform:uppercase; color:var(--capa-botao, var(--brass-dark)); font-weight:700; margin-bottom:10px;}#view-product .hero:not(.de-sempre) h1{font-size:clamp(26px,5vw,34px); margin-bottom:14px; text-wrap:balance;}
/* AS LINHAS DA DESCRIÇÃO SÃO REPARTIDAS, E NÃO DEIXADAS AO ACASO — 02/09/2026, a pedido da
dona: "a descrição logo no início da página de cada mapa, não gosto que as palavras
fiquem quebradas, soltas em parágrafo debaixo — ajuste, de todos".
O que ela viu é o defeito clássico do texto centrado: a quebra normal enche cada linha
até o limite e joga o resto para a seguinte, então a última costuma sobrar com uma ou
duas palavras soltas no meio da largura — e num bloco centrado isso não parece rag, parece
erro. O `balance` reparte o parágrafo em linhas de peso parecido, e a última deixa de ser
a sobra das outras.
VALE PARA TODAS as 33 páginas de produto porque a regra é UMA: o título e a descrição do
alto são os mesmos elementos em todas elas. Se um dia um lede passar do teto de linhas
que o navegador equilibra, ele volta sozinho à quebra normal — que é o que existe hoje —,
e não quebra nada. */
/* ESTA REGRA NÃO PODE GANHAR PESO, e a lição custou uma hora em 04/09/2026.
Ela alcançava também a capa CLONADA no pé da página (o vão entre o título e a frase era
20 px na tela de início e ZERO no clone), e o conserto óbvio — pôr um `:not(.de-sempre)`
aqui — QUEBROU OUTRA COISA: o seletor passou de 1-2-1 para 1-3-1 e virou mais forte que a
linha 84 deste mesmo arquivo, que é quem desfaz a centralização acima de 1.000 px. A
descrição da capa saltou 20 px para a direita nas 32 páginas de produto, e a régua do
prumo acusou.
PESO DE SELETOR NÃO É DETALHE DE ESCRITA: mexer nele mexe em quem ganha de quem, e num
arquivo onde outra regra existe só para desfazer esta, subir o peso desliga o conserto.
A correção do clone foi para o `correcoes-de-colisao.css`, que é colado DEPOIS e é o lugar
onde as adaptações do fecho moram. */
#view-product .hero p.lede{font-size:var(--c-lede); color:var(--ink-soft); max-width:480px; margin:0 auto 4px; line-height:1.7; text-wrap:balance;}#view-product .price-discreet{
text-align:left; margin:18px 2px 4px;
}#view-product .price-discreet .pd-label{display:block; font-size:var(--c-etiqueta); font-weight:500; color:var(--muted); margin-bottom:2px;}#view-product .price-discreet .pd-value{font-family:var(--fonte-interface); font-size:var(--c-corpo); font-weight:600; color:var(--ink);}
/* O PRAZO DE ENTREGA MORA JUNTO DO PREÇO — 08/09/2026. É um TETO, e não uma estimativa:
as leituras medidas hoje ficam entre 10 e 25 minutos e o Mapa kármico, o maior deles,
em torno de 45. Duas horas é a folga que a dona pediu. Degrau da escala, nunca número
solto: `--c-nota` é o menor da tipografia e é onde uma ressalva ao lado do preço mora. */
#view-product .price-discreet .pd-prazo{display:block; font-size:var(--c-nota); color:var(--muted); margin-top:4px;}
/* content sections */
#view-product section{padding:36px 0;}#view-product .section-title{font-size:var(--t-bloco); margin-bottom:16px; text-align:center;}#view-product .answers-card, #view-product .method-card{
padding:22px 24px; margin-bottom:14px; transition:box-shadow var(--dur-base) var(--ease);
}#view-product .answers-card:hover, #view-product .method-card:hover{box-shadow:var(--shadow-2);}#view-product .answers-list{list-style:none;}/* O MARCADOR POSICIONADO, e não um item de flex — 04/09/2026. O porquê inteiro está no
`eletiva-o-objetivo.css`, ao lado da lista onde o defeito apareceu: num `` que é
contêiner flex, todo elemento inline vira uma coluna, e uma frase com `` no meio se
parte em três. Esta lista não tem negrito hoje e por isso parecia certa — a mesma regra,
o mesmo defeito à espera. */
#view-product .answers-list li{
padding:11px 0 11px 18px; border-bottom:1px solid var(--border-soft); font-size:var(--c-corpo); color:var(--ink-soft);
position:relative;
}#view-product .answers-list li:last-child{border-bottom:none;}
/* O TEXTO DA OFERTA — 08/09/2026, quando as duas listas viraram prosa a pedido da dona.
ELE É O MAIOR TEXTO CORRIDO DA TELA, e é o que vende: por isso sobe um degrau da escada
(`--c-lede`, e não o `--c-corpo` dos itens que ele substituiu) e ganha entrelinha larga.
Um parágrafo de cinco linhas no tamanho de item de lista é um parágrafo que ninguém lê
inteiro.
O `text-wrap:pretty` É PARA A ÚLTIMA LINHA: sem ele, um texto deste tamanho termina com
uma palavra órfã sozinha na linha em boa parte das larguras, e órfã no fim do argumento é
o pior lugar para ela cair.
A `.oferta-fecho` SAIU no mesmo dia, poucas horas depois de entrar: era um segundo
parágrafo, meu e não pedido, separado do primeiro por um filete — ou seja, DUAS COISAS
EMPILHADAS dentro do cartão que existe para não ter duas coisas empilhadas. O recado da dona
foi "leia o que eu falei"; ela tinha mandado o conteúdo do cartão, e o cartão é ele. */
#view-product .oferta-texto{
font-size:var(--c-lede); color:var(--ink-soft); line-height:1.75; text-wrap:pretty;
}#view-product .answers-list li::before{content:"•"; color:var(--capa-botao, var(--brass)); position:absolute; left:0; top:11px; font-size:var(--c-apoio); line-height:1.6;}/* AS REGRAS DO SEGUNDO BLOCO DO MÉTODO SAÍRAM COM ELE — 03/09/2026.
Eram a caixa do `.method-explain`, o `.metodo-nome` que a abria e o tratamento dos
parágrafos — e cada uma tinha uma razão escrita, de 02/09: o título maior, à esquerda e
na cor da página; a escrita da interface no `h3` e a serifa mantida no nome do método.
Nada disso estava errado. O que saiu foi o BLOCO: ele repetia, quatro parágrafos abaixo
da Metodologia, o mesmo argumento que o "Saiba mais" dela já fazia.
Regra de estilo sem elemento na tela é peso morto que ninguém percebe — só aparece no dia
em que alguém cria uma classe com o mesmo nome e herda um desenho que não pediu. */
/* form */
#view-product .birth-form{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:30px 24px; box-shadow:var(--shadow-3);}#view-product .birth-form .row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:520px){#view-product .birth-form .row2{grid-template-columns:1fr; gap:0;} }#view-product .birth-form label{display:block; font-size:var(--c-apoio); font-weight:600; color:var(--ink); margin:18px 2px 8px;}#view-product .birth-form > label:first-of-type{margin-top:0;}#view-product .birth-form .row2 label{margin-top:18px;}#view-product .birth-form input, #view-product .birth-form select{width:100%; height:50px; padding:0 15px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:16px; background:#fff; color:var(--ink); box-sizing:border-box;}#view-product .birth-form input::placeholder{color:var(--muted); opacity:0.9;}#view-product .birth-form input:hover, #view-product .birth-form select:hover{border-color:#D8C79A;}#view-product .birth-form input:focus, #view-product .birth-form select:focus{outline:none; border-color:var(--capa-botao, var(--brass)); box-shadow:0 0 0 4px var(--capa-brilho, var(--brass-glow));}#view-product .birth-form input[type="date"], #view-product .birth-form input[type="time"]{
-webkit-appearance:none; appearance:none; height:50px; line-height:50px; padding:0 15px;
}/* O BOTÃO É O DO FORMULÁRIO, E O SELETOR PASSOU A DIZER ISSO — 04/09/2026.
Estava escrito `#view-product .btn-primary`, e alcançava TODO botão principal dentro da
tela de produto. Só que o formulário de encomenda não tem mais nenhum (o pagamento é o
bloco do Mercado Pago), e o ÚNICO `.btn-primary` que sobrou ali dentro é o da capa
CLONADA da tela de início, no pé da página. Ou seja: uma regra escrita para um botão que
não existe mais, cujo único efeito hoje era desfigurar o botão do fecho.
Medido num tablet em pé de 834, o mesmo botão nas duas telas:
tela de início 392 px, corpo 14,5, peso 600, raio 8, sombra rust
página de produto 592 px, corpo 16, peso 700, raio 12, sombra latão
Não era só a largura — era outro botão. Acima de 1000 px o desalinho estava tapado por
acidente, porque a regra da capa em duas colunas escreve `width:auto`; entre 600 e 999
(que é onde mora o tablet em pé) ele aparecia inteiro.
O `.birth-form` no seletor devolve a regra ao lugar dela: se um dia o formulário voltar a
ter um botão de enviar, ele continua vestido; o fecho volta a ser o fecho. */
#view-product .birth-form .btn-primary{
width:100%; margin-top:24px; background:var(--capa-botao, var(--rust)); color:#fff; font-weight:700; font-size:var(--c-lede);
padding:16px; border:none; border-radius:var(--radius-md); box-shadow:0 16px 34px var(--capa-sombra, rgba(122,51,36,0.34));
}#view-product .birth-form .btn-primary:hover{background:var(--capa-botao-forte, var(--rust-deep)); transform:translateY(-1px);}#view-product .birth-form .btn-primary:active{transform:translateY(0) scale(0.98);}#view-product .birth-form .btn-primary:disabled{opacity:0.6; cursor:not-allowed; transform:none;}/* O PAGAMENTO DEIXOU DE SER UMA SEGUNDA CAIXA — 10/09/2026. Queixa da dona sobre esta
tela: "é a que mais perde refinamento; há muitas caixas dentro de caixas, bordas
douradas, radios, logos e diferentes estilos competindo".
O QUE ELE ERA: um cartão branco com moldura, canto arredondado e a `--shadow-3` — a
sombra mais alta da casa — pousado logo abaixo de OUTRO cartão branco com moldura, o do
formulário. Duas caixas idênticas empilhadas não dizem "duas coisas": dizem "duas vezes
a mesma coisa", e a segunda delas é justamente onde se digita o cartão.
O QUE ELE É AGORA: a continuação do formulário, separada por um filete e por respiro.
O fundo, a moldura e a sombra saíram; o `padding` lateral saiu junto, porque sem caixa
não há de que afastar o conteúdo. Uma caixa a menos na tela onde se paga.
O `animation` FICA: ele é o bloco aparecendo quando a compra é montada, e sem ele a
seção surge de uma vez no meio da página. */
#view-product .payment-brick-wrap{
background:transparent; border:0; border-top:1px solid var(--border); border-radius:0;
padding:26px 0 0; margin-top:26px;
box-shadow:none; animation:fadeInUp var(--dur-base) var(--ease-soft) both;
}
/* A caixa de uso interno CONTINUA sendo caixa: ela é a exceção que não pode se confundir
com o caminho normal — é onde a dona libera uma compra sem pagar. O tracejado dela vem
por estilo embutido no `index.html`, e estas três linhas devolvem o que a regra acima
acabou de tirar. */
#view-product .payment-brick-wrap.interno-bloco{
border:1px dashed var(--border); border-radius:var(--radius-lg); padding:24px;
}/* O TÍTULO "FORMA DE PAGAMENTO" TAMBÉM SAI DA SERIFA — 02/09/2026, mesma queixa. Ele é um
``, e o `#view-product h1,h2,h3,h4` lá em cima veste todos de Fraunces: sem esta
linha, o rótulo da seção continuaria serifado em cima de um formulário que deixou de
ser — que é a metade pior das duas, porque é a que se lê primeiro. */
/* O TÍTULO DO PAGAMENTO E AS MARCAS MUDARAM-SE PARA O `componentes-reutilizaveis.css` —
03/09/2026. Eles estavam presos ao `#view-product`, e por isso o parto programado e a
Astrologia eletiva — que também COBRAM — abriam o pagamento com um `Pagamento `
cru, sem o tratamento e sem bandeira nenhuma. Três telas que pedem cartão e três
desenhos diferentes é o "parece remendo" no lugar em que ele custa mais caro.
Só o `#paymentBrick_container` fica: esse id é desta tela mesmo. */
/* O `min-height` mudou-se para o `forma-de-pagamento.css` — 07/09/2026, com o resto
das regras do componente do Mercado Pago. Ver o cabeçalho de lá. */
/* E AQUELA MUDANÇA DE 03/09 COBROU UM PREÇO QUE SÓ APARECEU EM 07/09/2026 — o conserto
está lá em cima, na primeira linha deste arquivo. A regra do título do pagamento virou
CLASSE (`.payment-brick-title`), e classe perde de id: o `#view-product h1,h2,h3,h4`
continuou vestindo de Fraunces justamente o `` "Forma de pagamento". Quatro dias com
o único título serifado do cartão de pagamento, na tela que vende as 33 leituras,
enquanto as outras duas telas que cobram — que não têm regra de título com id — mostravam
o mesmo rótulo na fonte da interface. A captura da dona pegou isso.
O conserto é o `:not(:where(.payment-brick-title))` no seletor daquela linha: a serifa
continua sendo a dos títulos DESTA página e para de alcançar o rótulo de uma seção de
formulário. Um `!important` escrito aqui embaixo resolveria a mesma tela e deixaria a
armadilha de pé para o próximo componente de classe que passasse por baixo daquele id.
E O `:where()` DENTRO DO `:not()` NÃO É ENFEITE — ele é o que mantém o PESO da regra
igual ao que era. Escrito como `:not(.payment-brick-title)`, o seletor ganharia o peso de
uma classe (0-1-1 em vez de 0-0-1 sobre o id) e passaria a vencer as regras do
`forma-de-pagamento.css`, que valem 1-0-1 e contam com a ordem da `ordem.txt` para
desempatar. Foi medido nesta mesma passada: com a classe crua dentro do `:not()`, um
`` DENTRO do formulário do Mercado Pago voltava a sair em Fraunces — o defeito
consertado aqui reaparecendo três linhas adiante, no componente. O `:where()` não soma
peso nenhum, então esta linha continua pesando o que sempre pesou e só deixa de alcançar
uma classe. */
/* O RECADO QUE OCUPA O LUGAR DO FORMULÁRIO DE PAGAMENTO enquanto não há e-mail — 03/09/2026.
O porquê inteiro está no `catalogo-e-compra.js`, junto da linha que decide: o Mercado
Pago pergunta o endereço quando o formulário nasce sem ele, e não existe configuração
que desligue esse passo — então o formulário não nasce antes da hora.
ELE PRECISA PARECER ESPERA, E NÃO DEFEITO. Um retângulo vazio no lugar do pagamento lê
como coisa quebrada; por isso a primeira linha diz o que a loja aceita, na cor da
página, e a segunda diz o que falta. Sem borda e sem fundo próprio: o cartão do
pagamento já é a caixa, e uma caixa dentro da outra faria parecer um erro emoldurado. */
#view-product .brick-espera{
padding:18px 4px; text-align:center;
font-size:var(--c-apoio); color:var(--muted); line-height:1.6;
}
#view-product .brick-espera .brick-espera-meios{
font-weight:600; color:var(--capa-botao, var(--brass-dark)); margin-bottom:4px;
}
/* AS TRÊS TELAS QUE COBRAM, E NÃO SÓ A DAS 32 LEITURAS — 08/09/2026.
Este bloco nasceu escrito com `#view-product` na frente de cada seletor, quando a
escolha entre cobradores existia numa tela só. Hoje ela existe em três: a Astrologia
eletiva e o parto programado passaram a aceitar Apple Pay, Google Pay e cartão
internacional, e sem estas linhas os cartões de opção chegariam lá crus — botão de
navegador, sem borda, sem bolinha e sem a marca do que está escolhido.
É a mesma regra da tabela do `CLAUDE.md`: mudança pedida para uma página de produto é
mudança para as três que cobram. */
/* A ESCOLHA DO COBRADOR — Mercado Pago ou Stripe.
Dois cartões de opção, e não uma aba: numa tela de compra, aba parece navegação e some
da vista de quem está preenchendo campo. O cartão marcado fica marcado.
O bloco inteiro se esconde sozinho quando só há um meio ligado (ver `montarOsMeios`):
escolha com uma opção só não é escolha, é ruído entre a pessoa e o botão de pagar. */
#view-product .meios, #view-eletiva-objetivo .meios, #view-parto .meios{display:grid; gap:10px; margin-bottom:18px;}
#view-product .meio-op, #view-eletiva-objetivo .meio-op, #view-parto .meio-op{
display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left;
padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-md);
background:#fff; cursor:pointer; color:var(--ink); font-family:inherit;
}
#view-product .meio-op:hover, #view-eletiva-objetivo .meio-op:hover, #view-parto .meio-op:hover{border-color:#D8C79A;}
/* O ANEL DOURADO DE 3 PX SAIU EM 10/09/2026 — "bordas douradas ... competindo". A opção
escolhida continua sendo a escolhida: a moldura fica dourada, o fundo muda para o creme
e a bolinha se preenche. São três sinais, e o anel era o quarto — o único que, por ter
três píxeis de latão brilhante, disputava a atenção com o próprio botão de pagar. */
#view-product .meio-op[aria-pressed="true"], #view-eletiva-objetivo .meio-op[aria-pressed="true"], #view-parto .meio-op[aria-pressed="true"]{
border-color:var(--brass); background:var(--card-alt);
}
#view-product .meio-bolinha, #view-eletiva-objetivo .meio-bolinha, #view-parto .meio-bolinha{
width:18px; height:18px; border-radius:50%; border:2px solid var(--border);
flex-shrink:0; margin-top:2px; background:#fff;
}
#view-product .meio-op[aria-pressed="true"] .meio-bolinha, #view-eletiva-objetivo .meio-op[aria-pressed="true"] .meio-bolinha, #view-parto .meio-op[aria-pressed="true"] .meio-bolinha{
border-color:var(--brass);
background:radial-gradient(circle at center, var(--brass) 0 4px, #fff 4px);
}
#view-product .meio-nome, #view-eletiva-objetivo .meio-nome, #view-parto .meio-nome{display:block; font-size:var(--c-corpo); font-weight:600; line-height:1.4;}
#view-product .meio-detalhe, #view-eletiva-objetivo .meio-detalhe, #view-parto .meio-detalhe{display:block; font-size:var(--c-apoio); color:var(--muted); line-height:1.55; margin-top:3px;}
/* AS BANDEIRAS DENTRO DA OPÇÃO — 02/09/2026.
Duas alturas, e não uma, porque as artes oficiais não têm proporção comum: a da Amex é
um quadrado e a do Google Pay é uma tira quase cinco vezes mais larga que alta. Com a
mesma altura de caixa, o quadrado parece miúdo ao lado da tira. Então o retângulo de
cartão recebe 22 px e a palavra escrita recebe 18 px — a palavra lê maior com menos
altura. Nenhum dos dois números é tipografia (é DESENHO, a exceção que os tokens
preveem): não existe degrau da escala que sirva de altura de logotipo.
O `max-width` é cinto de segurança para arte substituída um dia por uma mais larga —
sem ele, uma tira comprida sozinha empurraria a linha e quebraria a caixa da opção. */
/* ==========================================================================
O PAINEL ABRE DENTRO DA OPÇÃO — 11/09/2026
==========================================================================
Pedido da dona, com a foto do telefone: "caso ela clique em PIX CARTÃO E PARCELAMENTO o
card deve se expandir e mostrar abaixo, atualmente ele aparece mais para baixo solto todo
feio. Quando ela clica em Apple/Google/internacional abre lindinho, use esse como
referência."
A REFERÊNCIA DELA ERA UM ACIDENTE, e vale dizer por quê: os dois painéis eram IRMÃOS da
caixa de opções, escritos no HTML logo depois dela. A Stripe é a ÚLTIMA opção em
português, então o painel dela caía por acaso logo abaixo do próprio botão — "lindinho".
O do Mercado Pago, sendo o PRIMEIRO botão, caía dois cartões abaixo de si mesmo, com a
opção da Stripe no meio. Mesmo código, duas leituras, e nenhuma das duas de propósito.
Agora cada `.meio-item` carrega o botão e o painel dele: o desenho que ela aprovou passa a
valer para os dois porque foi escrito, e não porque a ordem calhou.
A MOLDURA DESCE DO BOTÃO PARA A CAIXA, e é isso que faz os dois lerem como uma peça só: a
opção escolhida já ficava com a borda de latão e o fundo creme (a regra do
`[aria-pressed="true"]` aqui em cima), e o painel repete os dois, perde a borda de cima e
guarda os cantos de baixo. Sem isso seriam duas caixas empilhadas, que é o defeito com
outro nome.
E NADA ABRE ANTES DE ALGUÉM ESCOLHER — "não deve aparecer pix e cartão de crédito ANTES da
pessoa clicar nessa opção". Quem esconde é a ausência da `.aberto`, e não um
`style="display:none"` embutido: estilo embutido ganha de qualquer folha, e era ele que
escondia o painel da Stripe até hoje — mantê-lo faria a classe nunca conseguir abrir.
A `sem-escolha` É O OUTRO ESTADO DA MESMA CAIXA, e ela existe porque o formulário mudou de
casa. Até hoje, com um cobrador só, a `montarOsMeios` escondia a caixa INTEIRA e o
formulário do Mercado Pago continuava na tela — ele morava fora dela. Agora mora dentro:
esconder a caixa esconderia o pagamento junto, e a loja ficaria sem caixa. Então a caixa
fica, os BOTÕES é que somem, e o painel aberto perde a moldura — volta a ser exatamente o
que a tela mostrava antes desta mudança. É a mesma regra de sempre, dita por CSS: escolha
com uma opção só não é escolha. */
#view-product .meio-painel, #view-eletiva-objetivo .meio-painel, #view-parto .meio-painel{display:none;}
#view-product .meio-item.aberto .meio-op, #view-eletiva-objetivo .meio-item.aberto .meio-op, #view-parto .meio-item.aberto .meio-op{
border-bottom-left-radius:0; border-bottom-right-radius:0;
/* A BORDA DE BAIXO VIRA FUNDO, E NÃO `transparent`: transparente deixaria ver o cartão
BRANCO do bloco de pagamento por um filete de 1 px entre o botão e o painel — uma
costura clara no meio da peça que estas regras existem para juntar. Pintada da cor do
painel, ela some sem que nada mude de lugar (tirar a borda moveria tudo 1 px). */
border-bottom-color:var(--card-alt);
}
#view-product .meio-item.aberto .meio-painel, #view-eletiva-objetivo .meio-item.aberto .meio-painel, #view-parto .meio-item.aberto .meio-painel{
display:block;
border:1px solid var(--brass); border-top:0;
border-radius:0 0 var(--radius-md) var(--radius-md);
background:var(--card-alt);
padding:2px 16px 16px;
}
/* UM COBRADOR SÓ: os botões saem e o painel volta a ser o formulário cru que esta tela
mostrava antes de 11/09. O `margin-bottom` some junto porque, sem escolha, esta caixa não
é mais uma caixa de escolha — ela é o próprio bloco do pagamento, e quem dá o respiro
abaixo dele é o cartão que o embrulha. */
#view-product .meios.sem-escolha .meio-op, #view-eletiva-objetivo .meios.sem-escolha .meio-op, #view-parto .meios.sem-escolha .meio-op{display:none;}
#view-product .meios.sem-escolha, #view-eletiva-objetivo .meios.sem-escolha, #view-parto .meios.sem-escolha{gap:0; margin-bottom:0;}
#view-product .meios.sem-escolha .meio-item.aberto .meio-painel, #view-eletiva-objetivo .meios.sem-escolha .meio-item.aberto .meio-painel, #view-parto .meios.sem-escolha .meio-item.aberto .meio-painel{
border:0; border-radius:0; background:transparent; padding:0;
}
/* (as quatro regras da `.meio-marcas` também se mudaram — ver acima) */
#view-product #stripe-pane, #view-eletiva-objetivo #elo-stripe-pane, #view-parto #pp-stripe-pane{min-height:60px;}
/* A linha "ou pague com cartão" só existe quando há um botão de carteira acima dela. Sem
Apple Pay nem Google Pay no aparelho, o Express Checkout não desenha nada — e uma
divisória separando o cartão de coisa nenhuma fica parecendo defeito. */
#view-product .stripe-ou, #view-eletiva-objetivo .stripe-ou, #view-parto .stripe-ou{display:none; align-items:center; gap:12px; margin:18px 0; color:var(--muted); font-size:var(--c-nota);}
#view-product .stripe-ou.mostrar, #view-eletiva-objetivo .stripe-ou.mostrar, #view-parto .stripe-ou.mostrar{display:flex;}
#view-product .stripe-ou::before, #view-eletiva-objetivo .stripe-ou::before, #view-parto .stripe-ou::before, #view-product .stripe-ou::after, #view-eletiva-objetivo .stripe-ou::after, #view-parto .stripe-ou::after{content:""; flex:1; height:1px; background:var(--border);}
#view-product .stripe-pagar, #view-eletiva-objetivo .stripe-pagar, #view-parto .stripe-pagar{
width:100%; margin-top:18px; background:var(--capa-botao, var(--rust)); color:#fff; font-weight:700;
font-size:var(--c-corpo); padding:14px; border:none; border-radius:var(--radius-md);
box-shadow:0 10px 24px var(--capa-sombra, rgba(126,90,40,0.30)); cursor:pointer;
}
#view-product .stripe-pagar:active, #view-eletiva-objetivo .stripe-pagar:active, #view-parto .stripe-pagar:active{transform:scale(0.98);}
#view-product .stripe-pagar:disabled, #view-eletiva-objetivo .stripe-pagar:disabled, #view-parto .stripe-pagar:disabled{opacity:0.6; cursor:not-allowed; transform:none;}
/* Âmbar, e não a cor de erro: nada está errado — é um aviso de estado. A cor de erro
nesta tela é a de "o pagamento foi recusado", e gastá-la aqui gastaria o alarme. */
#view-product .stripe-teste, #view-eletiva-objetivo .stripe-teste, #view-parto .stripe-teste{
font-size:var(--c-apoio); line-height:1.55; color:#6A4A1E; background:var(--brass-light,#F1E4C8);
border-radius:var(--radius-sm); padding:9px 12px; margin-bottom:14px; font-weight:600;
}
/* O QUE SOBRAVA DE LATÃO NA PÁGINA — 31/08/2026, na segunda passada.
A primeira passada tingiu o fundo, os botões, os marcadores e o foco, e uma captura da
página do Mapa do corpo mostrou o que tinha ficado para trás: o botão "Saiba mais" da
Metodologia e os números das etapas, dourados no meio de uma página verde. Eles são de
classes COMPARTILHADAS com a página inicial (`.method-toggle`, `.feature-num`), e por isso
precisam ser tingidos aqui dentro do `#view-product` — na home, onde não há produto aberto
nem classe de capa, os dois continuam latão, que é o que eles têm de ser.
A regra só funciona porque este arquivo é colado DEPOIS do
`metodo-testemunhos-faq-e-rodape.css` (ver `design/ordem.txt`). */
/* AS TRÊS REGRAS DO ACENTO DA METODOLOGIA SAÍRAM — 04/09/2026, com a página de venda
passando a usar a paleta da tela de início. Elas existiam para tingir o botão "saiba mais"
e os números 01/02 com a cor da leitura; agora quem manda neles é a regra da própria
seção, que é azul — a mesma da tela de início, e a mesma do chão que a seção ganhou aqui
em 03/09. Mantê-las seria pôr um botão de latão dentro de um cartão branco sobre um chão
azul, que é exatamente o defeito de duas paletas na mesma seção que o
`metodo-testemunhos-faq-e-rodape.css` conta ter consertado em 02/09. */
/* nota pequena abaixo dos campos de data/hora */
#view-product .field-note{font-size:var(--c-nota); color:var(--muted); line-height:1.55; margin:8px 2px 0;}
/* AS REGRAS DO COMPONENTE DO MERCADO PAGO MUDARAM-SE — 07/09/2026, para o
`forma-de-pagamento.css`, que é o último da `ordem.txt`.
Elas estavam aqui, presas ao `#view-product`, e por isso não alcançavam as outras duas
telas que cobram: o parto programado tinha metade delas copiada, e a Astrologia eletiva
não tinha nenhuma — abria o pagamento cru, com os botões de escolha do cobrador virando
caixas brancas de 48 px (foto da dona, do tablet). É a mesma lição que o TÍTULO do
pagamento já tinha aprendido em 03/09, uma tela antes.
O texto de cada decisão — a serifa que não entra, o botão branco, o terreno para o
rótulo centrado — foi junto, inteiro. Nada aqui mudou de valor; mudou de casa. */
/* resultado Pix (QR Code + copia-e-cola) */
#view-product .pix-result{display:none; margin-top:22px; padding-top:22px; border-top:1px solid var(--border); text-align:center;}#view-product .pix-result.show{display:block; animation:fadeInUp var(--dur-base) var(--ease-soft) both;}#view-product .pix-result h4{font-size:var(--c-corpo); margin-bottom:16px;}#view-product .pix-qr{width:200px; height:200px; display:block; margin:0 auto 16px; border:1px solid var(--border); border-radius:var(--radius-sm); background:#fff; padding:8px; box-shadow:var(--shadow-1);}#view-product .pix-code{
font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:var(--c-etiqueta); line-height:1.5; color:var(--ink-soft);
background:var(--card-alt); border:1px solid var(--border); border-radius:var(--radius-sm); padding:12px;
word-break:break-all; max-height:88px; overflow-y:auto; text-align:left; margin-bottom:12px;
}#view-product .pix-copy-btn{
width:100%; background:var(--capa-botao, var(--rust)); color:#fff; font-weight:700; font-size:var(--c-corpo);
padding:14px; border:none; border-radius:var(--radius-md); box-shadow:0 10px 24px var(--capa-sombra, rgba(126,90,40,0.30));
}#view-product .pix-copy-btn:hover{background:var(--capa-botao-forte, var(--brass-dark));}#view-product .pix-copy-btn:active{transform:scale(0.98);}#view-product .pix-hint{font-size:var(--c-apoio); color:var(--muted); margin-top:14px; line-height:1.6;}#view-product .status{text-align:center; font-size:var(--c-apoio); min-height:0; margin-top:0;}
/* O RECADO SÓ OCUPA ESPAÇO QUANDO TEM O QUE DIZER — 03/09/2026.
Ele reservava 18 px de altura mais 12 px de margem SEMPRE, para a tela não pular no
dia em que um erro aparecesse. Com a linha do "pagamento seguro" fora, esses 30 px
viraram a única coisa embaixo do formulário — o "espaço vazio embaixo" da queixa, um
vão maior do que o de cima, num cartão que devia parecer equilibrado.
O `:not(:empty)` resolve os dois lados: vazio, ele não ocupa nada e o cartão fecha
rente ao formulário; com recado, ele empurra e ganha a margem de volta. O pulo que a
reserva evitava acontece agora só quando há erro — e nesse instante a tela DEVE
mudar, que é como a pessoa percebe que algo foi dito.
O `margin-top:0` da regra acima é EXPLÍCITO, e não redundante: o `.status` genérico
do `telas-de-carregando.css` declara 12 px, e sem essa linha ele continuava valendo.
Medido antes e depois: 37 px de sobra embaixo do formulário, contra 25. */
#view-product .status:not(:empty){margin-top:14px; min-height:18px;}#view-product .status.error{color:var(--rust);}#view-product .status.success{color:var(--success); font-weight:600;}/* A NOTA DE "O QUE ACONTECE DEPOIS DE PAGAR" PERDEU O `#view-product` — 09/09/2026, no dia
em que ela deixou de existir numa tela só. As três telas que cobram cartão passaram a
ter a mesma linha debaixo do mesmo botão, e um seletor preso a uma delas deixaria as
outras duas com a nota sem estilo nenhum — texto cru, alinhado à esquerda, no lugar
exato em que a dona apontou "parece remendo".
ELA NÃO PRECISA DE TRÊS SELETORES, e é a diferença desta para a esteira de sugestões
(que os tem, logo abaixo): a esteira depende do TETO de largura de cada tela, e a nota
não depende de nada — é texto centrado, na cor de nota. A classe é usada em três lugares
e em mais nenhum; o seletor de classe alcança os três e nasce certo no quarto. */
.trust-note{text-align:center; font-size:var(--c-nota); color:var(--muted); margin-top:16px; line-height:1.6;}
/* depoimentos — o CARTÃO é o mesmo da página inicial desde 02/09/2026 (a `.test-card` do
`metodo-testemunhos-faq-e-rodape.css`, que rola para o lado e mostra foto e nome). O que
sobra aqui é só o que é DESTA tela: as duas peças coloridas passam a vestir a cor da
leitura, em vez do latão de sempre.
A `.testimonial-card` que existia aqui morreu junto com o segundo HTML que a desenhava —
regra de CSS sem elemento é peso morto que a próxima pessoa lê procurando onde aquilo
aparece, e a resposta é "em lugar nenhum". */
#view-product .test-card .testimonial-avatar{background:var(--capa-fundo-forte, var(--brass-light)); color:var(--capa-botao, var(--brass-dark));}
/* AS ESTRELAS NÃO SE TINGEM MAIS PELA CAPA DO PRODUTO — 02/09/2026. Elas seguiam o
`--capa-botao`, e por isso saíam de uma cor diferente em cada uma das 33 leituras: azul
numa, malva noutra. Com o pedido do "amarelo forte", isso deixou de ser variação e
passou a ser contradição — cinco estrelas são o mesmo símbolo em toda tela, e um símbolo
que muda de cor conforme a página deixa de ser símbolo. A regra vale nas 33. */
#view-product .test-card .testimonial-stars{color:var(--estrela-forte);}
#view-product .testimonial-disclaimer{text-align:center; font-size:var(--c-etiqueta); color:var(--muted); margin-top:6px; font-style:italic;}
/* AS TRÊS REGRAS DO TÍTULO DA FILEIRA SAÍRAM — 11/09/2026, com o título.
Elas mediam o vão entre a nota da Shelly, a linha do Google e o "Quem já passou pela
leitura" — e o terceiro não existe mais em tela nenhuma (pedido da dona: "já é
autoexplicativo todo o restante"). Regra de CSS sem elemento é peso morto que a próxima
pessoa lê procurando onde aquilo aparece, e a resposta seria "em lugar nenhum" — é o que
a `.testimonial-card` daqui de cima já ensinou nesta mesma folha.
O QUE ENTROU NO LUGAR DELAS é UMA linha, e ela mora no `metodo-testemunhos-faq-e-rodape.css`
junto da `.prova-nota`: `.prova-nota + .fileira-de-depoimentos{margin-top:26px}`. O vão que
a nota precisava do título ela precisa agora dos cartões, e o número é o mesmo respiro
grande que o título carregava. Três regras viraram uma porque não há mais dois vãos a
ajustar — há um, e ele vale nas duas telas de venda de uma vez. */
/* FAQ */
#view-product .faq-card{padding:6px 22px;}#view-product .faq-item{border-bottom:1px solid var(--border-soft);}#view-product .faq-item:last-child{border-bottom:none;}#view-product .faq-item summary{
list-style:none; cursor:pointer; padding:19px 4px; display:flex; justify-content:space-between; align-items:center; gap:12px;
font-family:var(--fonte-interface); font-size:var(--c-corpo); font-weight:600; color:var(--ink);
}#view-product .faq-item summary:hover{color:var(--capa-botao, var(--brass-dark));}#view-product .faq-item summary::-webkit-details-marker{display:none;}#view-product .faq-item summary::after{content:"+"; font-family:var(--fonte-interface); font-size:20px; font-weight:400; color:var(--capa-botao, var(--brass)); flex-shrink:0;}#view-product .faq-item[open] summary::after{content:"–";}#view-product .faq-a{font-size:var(--c-corpo); color:var(--ink-soft); line-height:1.7; padding:0 4px 19px; animation:fadeIn var(--dur-base) ease both;}
/* A BARRA DE COMPRA FIXA SAIU — 25/08/2026, decisão da dona do projeto.
Ela existia para deixar o preço e o botão sempre à mão no celular, e passou por
`backdrop-filter` (hipótese descartada por medição), fundo opaco e `position:sticky`
tentando parar de aparecer fora do lugar no iPhone. Sai inteira: o preço já está no
alto da página e o botão de encomendar está na seção de pagamento, que é para onde a
barra levava de qualquer forma. Um elemento a menos flutuando é um defeito a menos
possível — e o `#view-product footer` agora encosta no fim do conteúdo, sem espaço
reservado para nada.
Quem quiser a história completa: `relatorio-barra-fixa-25ago2026.pdf`. */
/* AS QUATRO REGRAS DO RODAPÉ SAÍRAM DAQUI — 03/09/2026, e sair é o conserto.
Elas devolviam à mão a cor dos rótulos, dos links e da linha de direitos do rodapé, e só
existiam por um motivo de ESPECIFICIDADE: o rodapé morava DENTRO da `#view-product`, e o
`#view-product a{color:inherit}` lá de cima — um seletor com id — vencia o `.footer-grid a`
e deixava os links do rodapé da cor do texto do corpo, ilegíveis sobre o fundo escuro.
Hoje o rodapé é UM SÓ e mora FORA de todas as telas (ver o comentário dele no
`index.html`), então nada da `#view-product` o alcança e não há o que devolver. Manter as
quatro linhas seria guardar a resposta de uma pergunta que não se faz mais — e no dia em
que a cor do rodapé mudasse, elas seriam quatro lugares para esquecer.
O RESPIRO DE CIMA JÁ TINHA SAÍDO HOJE DE MANHÃ, pela rampa: os 50 px daqui venciam o
`footer{}` global e jogavam os quatro rótulos para dentro do degradê. A conclusão é a
mesma das quatro cores, uma passada depois — o rodapé não é da tela do produto. */
/* ===== A FICHA DA GESTAÇÃO — Previsão astrológica do parto, 31/08/2026 =====
O bloco opcional fica dentro de um , e o precisa parecer um botão de
abrir: sem isto ele herda o triângulo cru do navegador, que em telefone é uma área de
toque de doze pixels no meio de um formulário que a pessoa está preenchendo com uma mão
só. A borda e o respiro existem para separar "o que eu tenho de preencher" de "o que eu
preencho se souber" — a distinção é o produto, e ela tem de ser visível antes da leitura. */
.parto-extras{
margin:14px 0 6px;
border:1px solid var(--line, rgba(0,0,0,.12));
border-radius:12px;
padding:0 14px;
background:rgba(255,255,255,.35);
}
.parto-extras[open]{padding-bottom:14px;}
.parto-extras > summary{
cursor:pointer;
padding:14px 0;
font-size:var(--c-corpo);
line-height:1.45;
font-weight:600;
list-style:none;
}
.parto-extras > summary::-webkit-details-marker{display:none;}
.parto-extras > summary::before{
content:"+";
display:inline-block;
width:1.2em;
font-weight:700;
}
.parto-extras[open] > summary::before{content:"–";}
/* O ultrassom ganha um filete próprio porque é o bloco com mais prioridade da ficha: ele
redata a gestação inteira quando discorda da DPP informada. */
.parto-us{
margin-top:14px;
padding-top:12px;
border-top:1px dashed var(--line, rgba(0,0,0,.12));
}
/* ===== O CARTÃO DA PREVISÃO DO PARTO — 31/08/2026 =====
Ele é lido por alguém no fim de uma gestação, muitas vezes no telefone, muitas vezes de
madrugada. Duas decisões saem daí: as linhas do topo são pares rótulo/valor que se
empilham em telas estreitas em vez de espremer, e a linha do tempo é uma lista com o
nível ESCRITO ao lado de cada faixa — barra colorida sozinha obriga a consultar legenda,
e legenda é o que ninguém lê antes de entender o que está vendo. */
.parto-cartao .parto-linha{
display:flex;
flex-wrap:wrap;
gap:2px 12px;
justify-content:space-between;
align-items:baseline;
padding:9px 0;
border-bottom:1px solid var(--line, rgba(0,0,0,.08));
}
.parto-cartao .parto-linha:last-child{border-bottom:none;}
.parto-cartao .parto-rotulo{font-size:var(--c-apoio);color:var(--ink-soft, #6b6b6b);}
.parto-cartao .parto-valor{font-size:var(--c-corpo);font-weight:600;text-align:right;flex:1 1 auto;}
.parto-cartao .parto-titulo-linha{margin:18px 0 8px;font-size:var(--c-corpo);}
.parto-cartao .parto-linha-do-tempo{list-style:none;margin:0;padding:0;}
.parto-cartao .parto-faixa{
display:flex;
flex-wrap:wrap;
gap:2px 10px;
justify-content:space-between;
align-items:baseline;
padding:7px 10px;
margin-bottom:4px;
border-radius:8px;
border-left:4px solid transparent;
background:rgba(0,0,0,.03);
font-size:var(--c-apoio);
}
/* A cor reforça a ordem, mas nunca a carrega sozinha: o nível vai escrito em toda faixa,
e o principal ganha peso de fonte além da cor — a hierarquia tem de sobreviver a quem
não distingue as duas pontas desta escala. */
.parto-cartao .parto-nivel-muito-alta{border-left-color:#C9527B;background:rgba(201,82,123,.10);}
.parto-cartao .parto-nivel-alta{border-left-color:#D98A3F;background:rgba(217,138,63,.09);}
.parto-cartao .parto-nivel-moderada{border-left-color:#7FA8C4;background:rgba(127,168,196,.09);}
.parto-cartao .parto-nivel-secundaria{border-left-color:rgba(0,0,0,.14);}
.parto-cartao .parto-faixa-principal{font-weight:700;}
.parto-cartao .parto-faixa-nivel{color:var(--ink-soft, #6b6b6b);text-align:right;}
.parto-cartao .parto-faixa-principal .parto-faixa-nivel{color:inherit;}
.parto-cartao .parto-modo,
.parto-cartao .parto-aviso{
margin:12px 0 0;
font-size:var(--c-nota);
line-height:1.6;
color:var(--ink-soft, #6b6b6b);
}
/* O formulário de atualizar a previsão vive DENTRO do cartão da leitura, e por isso herda
o da ficha da gestação — mesma aparência, mesma área de toque, mesmo sinal de
abrir. Duas caixas que fazem a mesma coisa e se parecem diferentes é como a pessoa
aprende a interface duas vezes. */
.parto-cartao .parto-atualizar{
margin-top:16px;
border:1px solid var(--line, rgba(0,0,0,.12));
border-radius:12px;
padding:0 14px;
background:rgba(255,255,255,.35);
}
.parto-cartao .parto-atualizar[open]{padding-bottom:14px;}
.parto-cartao .parto-atualizar > summary{
cursor:pointer;padding:14px 0;font-size:var(--c-corpo);line-height:1.45;font-weight:600;list-style:none;
}
.parto-cartao .parto-atualizar > summary::-webkit-details-marker{display:none;}
.parto-cartao .parto-atualizar > summary::before{content:"+";display:inline-block;width:1.2em;font-weight:700;}
.parto-cartao .parto-atualizar[open] > summary::before{content:"–";}
.parto-cartao .parto-atualizar .btn-primary{margin-top:14px;}
.parto-estado{margin:10px 0 0;font-size:var(--c-apoio);line-height:1.5;}
.parto-estado-erro{color:var(--rust, #a1442e);}
/* ==========================================================================
A ESTEIRA DE SUGESTÕES, DEPOIS DO FECHO — 08/09/2026
==========================================================================
Pedido da dona: "depois dela poderia ter uma esteira rotativa com mapas de sugestão para
o interesse que o cliente tem". Ela é a última seção da página, logo antes do rodapé, e
mora FORA da `.wrap` — o porquê está no `index.html`, no comentário da seção.
O QUE ESTA REGRA FAZ É SÓ O CONTÊINER: a prateleira, o cartão, o encaixe e as setas são os
da vitrine (`vitrine-e-carrossel.css`), sem uma linha nova. O teto é o mesmo 1.080 px que
a `.wrap` desta tela usa acima de 1000 px, e o respiro é o mesmo — a esteira fica na mesma
coluna do resto da página, e não numa tira mais estreita.
O `padding` DE BAIXO É ZERO porque a `.poster-row` já traz os 72 px dela (é onde a sombra
do cartão que sobe no `:hover` cabe). Somados, virariam um vão de página inteira embaixo
da prateleira.
ISSO NÃO MUDOU EM 09/09/2026, quando a esteira deixou de ser a última seção e a promessa
do mapa grátis passou a fechar a página — e vale escrito porque o argumento acima citava o
rodapé como vizinho de baixo. Os 72 px continuam sendo o respiro da prateleira, seja quem
for que venha depois: hoje a promessa, que traz os 36 px dela por cima. */
/* AS TRÊS TELAS QUE COBRAM CARTÃO DIVIDEM ESTA REGRA — 08/09/2026, na mesma tarde. Ela
nasceu com o `#p-combinam` das 32 páginas de leitura e ganhou o `#elo-combinam` (a página
de um objetivo eletivo) e o `#pp-combinam` (o parto programado) quando a dona precisou
repetir que os dois também são produtos.
UM SELETOR E NÃO TRÊS CÓPIAS: a `.el-wrap` das outras duas telas tem o mesmo teto de
1.080 px que a `.wrap` desta, e é isso que faz a mesma medida servir às três. Três blocos
iguais em três arquivos é como um deles fica para trás — e o que fica para trás é sempre
o da tela que menos gente abre. Esta regra mora aqui, e não em `eletiva-o-objetivo.css`,
porque é a esteira da página de PRODUTO: quem a mudar mexe nas três de uma vez, que é o
que se quer. */
#view-product > #p-combinam,
#view-eletiva-objetivo > #elo-combinam,
#view-parto > #pp-combinam{max-width:1080px; margin:0 auto; padding:56px 24px 0;}
#view-product > #p-combinam .group-head h3,
#view-eletiva-objetivo > #elo-combinam .group-head h3,
#view-parto > #pp-combinam .group-head h3{font-size:var(--t-bloco);}
@media (min-width:1000px){
#view-product > #p-combinam,
#view-eletiva-objetivo > #elo-combinam,
#view-parto > #pp-combinam{padding-inline:32px;}
}
@media (max-width:700px){
#view-product > #p-combinam,
#view-eletiva-objetivo > #elo-combinam,
#view-parto > #pp-combinam{padding-top:32px;}
}
/* ---------- telas de carregando / biblioteca / leitura ---------- */
.loading-screen{min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 24px; text-align:center; background:var(--bg);}
.loading-orb{position:relative; width:110px; height:110px; margin-bottom:30px; display:flex; align-items:center; justify-content:center;}
.loading-orb::before{content:""; position:absolute; inset:-16px; border-radius:50%; background:radial-gradient(circle, var(--brass-glow), rgba(171,124,59,0) 70%); animation:softPulse 2.6s ease-in-out infinite;}
.loading-ring{position:absolute; inset:0; border:3px solid var(--border); border-top-color:var(--brass); border-radius:50%; animation:loading-spin 1.4s linear infinite;}
.loading-glyph{font-size:40px; color:var(--brass-dark);}
@keyframes loading-spin{to{transform:rotate(360deg);}}
.loading-msg{font-family:var(--fonte-interface); font-size:var(--c-lede); color:var(--ink); max-width:320px; line-height:1.55; animation:fadeIn var(--dur-slow) ease both;}
.lib-wrap{max-width:900px;}
.lib-login-box{max-width:400px; margin:60px auto; padding:32px; animation:fadeInUp var(--dur-slow) var(--ease-soft) both;}
.lib-forgot-link{display:block; text-align:center; margin-top:16px; font-size:var(--c-apoio); color:var(--brass-dark); text-decoration:underline;}
.lib-forgot-desc{font-size:var(--c-apoio); color:var(--ink-soft); line-height:1.6; margin-bottom:18px;}
.status{text-align:center; margin-top:12px; font-size:var(--c-apoio); min-height:18px; color:var(--muted);}
.status.error{color:#B3462E;}
.status.success{color:#2E7D4F; font-weight:600;}
.lib-title{font-size:var(--t-bloco); text-align:center; margin-bottom:20px;}
.lib-login-form label{display:block; font-size:var(--c-apoio); font-weight:600; color:var(--ink); margin:14px 2px 6px;}
.lib-login-form label:first-child{margin-top:0;}
.lib-login-form input{width:100%; height:42px; padding:0 13px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:16px; background:#fff; color:var(--ink); box-sizing:border-box;}
.lib-login-form input:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 4px var(--brass-glow);}
.lib-login-btn{width:100%; margin-top:20px;}
/* ---------- ENTRAR COM GOOGLE — 13/09/2026 ----------
O botão vive nas duas caixas da biblioteca (entrar e criar conta), debaixo do formulário
de e-mail e senha.
ELE É BRANCO COM MOLDURA, e não da cor da casa: a marca do Google tem regra de uso, e a
forma que todo mundo reconhece — e que não se confunde com o botão principal desta tela —
é a de fundo branco com o "G" colorido à esquerda. Um botão de ação secundária que
parecesse o primário roubaria o clique de quem já tem senha.
O `hidden` PRECISA VENCER O `display:flex`, e esta é a mesma lição que a `.consent-row`
deixou escrita em 10/09: sem a linha de baixo, o bloco marcado como escondido pelo
`login-com-google.js` APARECERIA na tela enquanto o provedor não está ligado no painel —
sem dar erro, com o HTML dizendo `hidden` e quem lê acreditando. */
.entrar-com-google{margin-top:22px;}
.entrar-com-google[hidden]{display:none !important;}
.entrar-com-google-ou{
display:flex; align-items:center; gap:12px; margin-bottom:16px;
font-size:var(--c-apoio); color:var(--muted);
}
.entrar-com-google-ou::before, .entrar-com-google-ou::after{
content:""; flex:1; height:1px; background:var(--border);
}
.btn-google{
width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
height:44px; padding:0 16px; background:#fff; color:#3C4043;
border:1px solid var(--border); border-radius:var(--radius-sm);
font-family:var(--fonte-interface); font-size:var(--c-corpo); font-weight:600;
}
.btn-google:hover{background:#F7F7F7; border-color:var(--brass);}
.btn-google-marca{flex:0 0 auto;}
.lib-header{display:flex; align-items:center; justify-content:space-between; margin:36px 0 22px; flex-wrap:wrap; gap:12px;}
.lib-header-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
@media (max-width:520px){
.lib-header-actions{gap:6px;}
.pill-nav-link{font-size:var(--c-nota); padding:7px 12px;}
}
.lib-logout{background:none; border:1px solid var(--border); color:var(--ink-soft); padding:9px 16px; border-radius:var(--radius-sm); font-size:var(--c-apoio); font-weight:500;}
.lib-change-pass-link{background:none; border:none; color:var(--brass-dark); font-size:var(--c-apoio); text-decoration:underline; padding:9px 4px;}
/* Formulário de nascimento embutido nos horóscopos personalizados, no lugar
das telas que só diziam "falta o seu mapa" e mandavam a pessoa para outro lugar. */
.mapa-inline{max-width:460px; margin:0 auto; text-align:left;}
.mapa-inline h3{text-align:center; margin:0 0 6px;}
.mapa-inline > p.intro{text-align:center; color:var(--muted,#8B8172); font-size:var(--c-apoio); margin:0 0 18px;}
.mapa-inline label{display:block; font-size:var(--c-apoio); font-weight:600; color:var(--ink,#1B160F); margin:14px 2px 6px;}
/* 16 px, E NÃO 15 — 01/09/2026. Abaixo de 16 px o iOS DÁ ZOOM na página quando o dedo
toca o campo, e a pessoa fica com o formulário fora de enquadramento no meio do
preenchimento. Os outros formulários do site já estavam em 16 (o `.birth-form`, o da
sinastria, o do login, o da eletiva); este ficou para trás e é justamente o que abre
dentro da leitura. Este número não é gosto — é a diferença entre o teclado subir e a
página inteira pular. */
.mapa-inline input{width:100%; padding:12px 13px; border:1px solid var(--border,#E7DCBE); border-radius:var(--radius-sm,7px); font-size:16px; background:#fff; color:var(--ink,#1B160F); box-sizing:border-box; font-family:inherit;}
.mapa-inline input:focus{outline:none; border-color:var(--brass,#AB7C3B); box-shadow:0 0 0 4px var(--brass-glow,rgba(171,124,59,0.3));}
.mapa-inline .row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.mapa-inline .row2 > *{min-width:0;}
@media(max-width:520px){ .mapa-inline .row2{grid-template-columns:1fr;} }
.mapa-inline .conta-extra{border-bottom:1px solid var(--border-soft,#F0E9D6); padding-bottom:8px; margin-bottom:6px;}
.mapa-inline .ja-tenho{text-align:center; font-size:var(--c-apoio); color:var(--muted,#8B8172); margin-top:14px;}
.mapa-inline .ja-tenho a{color:var(--brass-dark,#7E5A28);}
/* ---------- PAINEL DE SAÚDE (admin) ---------- */
.painel-saude h4{margin-top:18px;}
.painel-saude h4:first-child{margin-top:0;}
.saude-erros{list-style:none; margin:10px 0 0; padding:0;}
.saude-erros li{display:flex; gap:10px; align-items:flex-start; padding:7px 0; border-bottom:1px solid var(--border-soft);}
.saude-erros li:last-child{border-bottom:none;}
.saude-contador{flex:0 0 auto; font-variant-numeric:tabular-nums; font-weight:700; font-size:var(--c-nota); color:var(--rust); background:#FDF6F3; border:1px solid #E3C4BB; border-radius:var(--radius-pill); padding:1px 8px; margin-top:1px;}
.saude-msg{min-width:0;}
.saude-msg b{display:block; font-size:var(--c-apoio); font-weight:600; color:var(--ink); line-height:1.4; word-break:break-word;}
.saude-funil{list-style:none; margin:10px 0 0; padding:0;}
.saude-funil li{display:grid; grid-template-columns:1fr 2fr auto; gap:10px; align-items:center; padding:5px 0; font-size:var(--c-apoio);}
.saude-passo{color:var(--ink-soft);}
.saude-barra{height:7px; border-radius:var(--radius-pill); background:var(--bg-deep); overflow:hidden;}
.saude-barra i{display:block; height:100%; border-radius:var(--radius-pill); background:var(--brass-dark);}
.saude-num{font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink); white-space:nowrap;}
.saude-num small{color:var(--muted); font-weight:400; margin-left:3px;}
@media(max-width:560px){ .saude-funil li{grid-template-columns:1fr auto; } .saude-barra{display:none;} }
/* Zona de risco: visualmente separada do resto para que ninguém caia nela sem querer. */
.lib-danger-box{
max-width:460px; background:#FDF6F3; border:1px solid #E3C4BB; border-left:3px solid var(--rust);
border-radius:var(--radius-md); padding:22px 24px; margin:0 auto 26px;
}
.lib-danger-box h4{font-family:var(--fonte-titulo); font-size:var(--t-cartao); color:var(--rust); margin-bottom:8px; font-weight:600;}
.lib-danger-box p{font-size:var(--c-apoio); color:var(--ink-soft); line-height:1.6; margin-bottom:14px;}
.lib-danger-box code{background:#fff; border:1px solid #E3C4BB; border-radius:4px; padding:1px 6px; font-size:var(--c-nota); color:var(--rust); font-weight:600;}
.lib-danger-box input{width:100%; padding:11px 13px; border:1px solid var(--border); border-radius:var(--radius-sm); font-family:inherit; font-size:14px; margin-bottom:14px;}
.lib-danger-acoes{display:flex; gap:10px; flex-wrap:wrap;}
.btn-danger{
background:var(--rust); color:#fff; font-weight:600; font-size:var(--c-apoio); padding:11px 20px;
border:none; border-radius:var(--radius-sm); cursor:pointer;
}
.btn-danger:hover{background:#7A3324;}
.btn-danger:disabled{opacity:0.55; cursor:not-allowed;}
.lib-change-pass-box{max-width:360px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); padding:24px; margin-bottom:24px; box-shadow:var(--shadow-1);}
.lib-logout:hover{background:var(--card-alt); border-color:#D8C79A;}
.lib-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:16px; padding-bottom:60px;}
.lib-card{cursor:pointer; border-radius:var(--radius-md); overflow:hidden; background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow-1); animation:fadeInUp var(--dur-base) var(--ease-soft) both;}
/* O CARTÃO DA BIBLIOTECA É CLICÁVEL, e por isso o realce de passagem dele mora dentro de
`@media (hover:hover)` desde 02/09/2026 — mesmo conserto do cartão da vitrine, que está
explicado por inteiro em `vitrine-e-carrossel.css`. Em resumo: num iPhone, o primeiro
toque sobre um elemento cujo `:hover` levanta o desenho é gasto aplicando o hover, e o
alvo ainda sai de debaixo do dedo — quem toca precisa tocar duas vezes para abrir. O
`:active` logo abaixo FICA FORA do media query de propósito: ele é a resposta ao toque,
e é justamente o que deve continuar valendo no celular. */
@media (hover:hover) and (pointer:fine){
.lib-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-3); border-color:#DCCB9C;}
}
.lib-card:active{transform:translateY(-2px);}
.lib-card-cover{aspect-ratio:2/3; display:flex; align-items:center; justify-content:center; font-size:38px; color:#fff; position:relative; overflow:hidden;}
.lib-card-badge{position:absolute; top:8px; right:8px; font-size:var(--c-micro); font-weight:700; text-transform:uppercase; padding:3px 8px; border-radius:var(--radius-pill); background:rgba(0,0,0,0.55); color:#fff; letter-spacing:0.05em;}
/* ---------- estado "produzindo" do card da biblioteca — capa desfocada + termômetro astral ---------- */
.lib-card-cover.is-producing .lib-card-glyph{filter:blur(7px); opacity:0.55; transform:scale(1.08); transition:filter 1.1s ease, opacity 1.1s ease, transform 1.1s ease;}
.lib-card-cover .lib-card-glyph{transition:filter 1.1s ease, opacity 1.1s ease, transform 1.1s ease;}
.lib-card-timer-overlay{
position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
text-align:center; gap:9px; padding:14px 12px; background:rgba(17,14,9,0.58); backdrop-filter:blur(1px); -webkit-backdrop-filter:blur(1px);
}
.lib-producing-orbit{position:relative; width:34px; height:34px; margin-bottom:2px;}
.lib-producing-orbit::before{
content:""; position:absolute; inset:0; border-radius:50%;
border:2px solid rgba(255,255,255,0.22); border-top-color:#fff;
animation:lib-orbit-spin 2.2s linear infinite;
}
.lib-producing-orbit::after{content:"☉"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:var(--c-apoio); color:#fff; animation:lib-orbit-twinkle 1.8s ease-in-out infinite;}
@keyframes lib-orbit-spin{to{transform:rotate(360deg);}}
@keyframes lib-orbit-twinkle{0%,100%{opacity:0.55;} 50%{opacity:1;}}
.lib-timer-label{font-size:var(--c-etiqueta); font-weight:600; color:#fff; line-height:1.4; letter-spacing:0.01em; max-width:132px;}
.lib-thermometer{width:78%; max-width:120px; height:5px; border-radius:6px; background:rgba(255,255,255,0.22); overflow:hidden;}
.lib-thermometer-fill{height:100%; width:4%; border-radius:6px; background:linear-gradient(90deg, var(--brass,#D8AE68), #F1E4C8); transition:width 4s linear;}
.lib-timer{font-size:var(--c-etiqueta); font-weight:600; color:rgba(255,255,255,0.78); letter-spacing:0.01em;}
.lib-card-body{padding:10px 12px;}
.lib-card-title{font-size:var(--c-apoio); font-weight:600; color:var(--ink); line-height:1.3;}
.lib-empty{grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--muted); font-size:var(--c-corpo); line-height:1.6;}
/* ==========================================================================
A TELA DA LEITURA TEM UMA FAIXA SÓ — 07/09/2026, fim do dia
==========================================================================
Pedido da dona, com prints do tablet: "muito espaço em branco; cards centralizados e
concentrados no meio; versão tablet e notebook precisam ser harmoniosos visualmente
também".
O QUE ELA VIU, medido num tablet deitado de 1180: a faixa das fichas do mapa com 1016 px
e, logo abaixo, os cartões dos capítulos com 576 — uma tira estreita no meio de uma
página larga, com 220 px de branco de cada lado e um degrau visível entre as duas
metades da mesma tela. Eram DUAS larguras na mesma rolagem, e é isso que faz a tela
parecer duas telas coladas.
AGORA É UMA SÓ, e vale para tudo: cabeçalho, "o que você vai compreender", as fichas do
mapa, os capítulos e o botão do PDF. É a mesma decisão que o painel do astromapa recebeu
hoje de manhã, aplicada ao resto da tela em vez de a mais um cartão.
E O TEXTO NÃO ESTICA JUNTO, que era a razão pela qual os 640 existiam. O que guarda a
leitura passa a ser uma MEDIDA no próprio texto (`--medida-de-leitura`), e não a largura
da coluna inteira: o cartão acompanha a faixa, a linha continua com o comprimento em que
se lê. Linha de mil píxeis não se lê — mas quem precisava ser estreito era a LINHA, e
nunca o cartão em volta dela.
OS 640 CONTINUAM VALENDO ONDE A TELA É ESTREITA: abaixo de 900 px o `.wrap` já entrega
menos que isso, e a conta do respiro é dele. */
.reading-wrap{max-width:1080px;}
/* A MEDIDA DE LEITURA, em `ch` e não em píxeis: `ch` é a largura do algarismo zero na fonte
em uso, então a conta acompanha o corpo do texto se ele mudar. Os 68 são a faixa clássica
de 65-75 caracteres por linha — abaixo disso o olho quebra demais, acima ele perde a volta
para o começo da linha seguinte. */
#view-reading{--medida-de-leitura:68ch;}
#view-reading .reading-subtitle,
#view-reading .reading-intro-desc,
#view-reading .reading-answers-list,
#view-reading .reading-chapters .chapter p,
#view-reading .reading-chapters .chapter li,
#view-reading .reading-pdf-caption{max-width:var(--medida-de-leitura);}
/* O que é centrado por desenho continua centrado — o cabeçalho e a nota do PDF são as duas
peças que já eram, e a medida não pode transformá-las em texto encostado à esquerda. */
#view-reading .reading-subtitle,
#view-reading .reading-pdf-caption{margin-left:auto; margin-right:auto;}
/* O MAPA-MÚNDI SAI DA COLUNA DE LEITURA, e a regra que o tira mudou de lugar em
07/09/2026 — ela mora agora na `pagina-inicial-e-formulario.css`, junto da faixa das
fichas do mapa, porque passou a ser A MESMA faixa.
O que estava aqui era um par de margens negativas de 100 px, que dava 840 px a partir
de uma janela de 940. Era a conta certa enquanto ele era o ÚNICO cartão desta tela a
sair da coluna; no dia em que as fichas do mapa saíram também, virou uma segunda
largura para o mesmo tipo de coisa — 776 px de mapa-múndi ao lado de 1016 px de
tabelas, três larguras na mesma rolagem.
Duas contas para a mesma decisão é como uma delas fica para trás. A regra viajou para
onde a faixa é definida uma vez só. */
/* ---------- MAPA DE ASTROCARTOGRAFIA (zoom e arrasto) ----------
O quadro rolava na horizontal para caber num celular. Rolar não é aproximar: a
pessoa via o mesmo mapa minúsculo, só que aos pedaços. Agora ele cabe inteiro e
quem quiser detalhe chega perto — e aí os nomes aparecem no tamanho de leitura. */
.astromapa-caixa{position:relative;}
.astromapa-caixa svg{user-select:none; -webkit-user-select:none;}
/* Canto de baixo à ESQUERDA: à direita ficam a Austrália e a Nova Zelândia, e os botões
cobriam justamente elas. Aqui embaixo é Pacífico vazio na visão do mundo inteiro. */
.astromapa-zoom{position:absolute; left:9px; bottom:9px; display:flex; flex-direction:column; gap:5px;}
.astromapa-zoom button{
width:32px; height:32px; border-radius:8px; border:1px solid var(--border,#E7DCBE);
background:rgba(255,255,255,0.94); color:var(--ink,#1B160F);
font-size:17px; font-weight:600; line-height:1; cursor:pointer;
display:flex; align-items:center; justify-content:center;
box-shadow:0 2px 6px rgba(36,29,18,0.14);
}
.astromapa-zoom button:hover{background:var(--brass-light,#F1E4C8); border-color:var(--brass,#AB7C3B); color:var(--brass-dark,#7E5A28);}
.astromapa-zoom button:active{transform:translateY(1px);}
/* Atalhos para os destinos analisados: o mapa já abre neles, e estes botões existem
para voltar depois de a pessoa ter arrastado para outro canto do mundo. */
.astromapa-atalhos{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px;}
.astromapa-atalhos:empty{display:none;}
.astromapa-atalhos-rot{font-size:var(--c-etiqueta); text-transform:uppercase; letter-spacing:0.07em; color:var(--muted,#6F6659); font-weight:700; margin-right:2px;}
.astromapa-atalhos button{
font-family:inherit; font-size:var(--c-apoio); font-weight:600; cursor:pointer;
color:var(--brass-dark,#7E5A28); background:var(--brass-light,#F1E4C8);
border:1px solid rgba(171,124,59,0.34); border-radius:999px; padding:5px 12px;
}
.astromapa-atalhos button:hover{background:var(--brass,#AB7C3B); color:#fff; border-color:var(--brass,#AB7C3B);}
/* ==========================================================================
O TÍTULO DA LEITURA COMPRADA É A ABERTURA DA TELA, E RESPIRA COMO UMA — 07/09/2026
==========================================================================
Pedido da dona, com o print da tela aberta: "aumente o título; traga mais espaçamento:
exemplo, o que vai compreender tá muito grudado com as infos pessoais".
O TAMANHO: ele estava em `--t-secao`, o degrau de "título de seção DENTRO de uma tela".
Só que ele não é isso — é o `h1` desta tela, o único, e o nome da leitura que a pessoa
comprou. `--t-display` é o degrau que a escala descreve como "abertura de tela, um por
tela no máximo", e é o mesmo em que o nome da pessoa aparece no alto do mapa grátis. Duas
telas que abrem do mesmo jeito, escritas no mesmo degrau — e nenhum número novo.
O ESPAÇO: os 12 px de baixo eram o cabeçalho inteiro se despedindo. Abaixo dele vem "O que
você vai compreender", que é outro assunto — o nome, a data e a cidade acabavam colados no
título do bloco seguinte, e foi isso que ela viu. O respiro agora é do tamanho do que
separa duas fichas do mapa (34 px), com folga: cabeçalho é a maior divisão desta tela, e
não pode se soltar MENOS do que se soltam duas tabelas irmãs. É essa a régua, e não o
número — quem mudar o respiro das fichas mexe neste também. */
.reading-head{text-align:center; padding:44px 0 0; margin-bottom:46px; animation:fadeInUp var(--dur-slow) var(--ease-soft) both;}
.reading-title{font-size:var(--t-display); line-height:1.14; text-wrap:balance; margin:14px 0 14px;}
.reading-subtitle{font-size:var(--c-apoio); color:var(--muted); line-height:1.6;}
.reading-chapters{padding:20px 0 60px;}
/* O SUMÁRIO DA LEITURA — 11/09/2026.
-------------------------------------------------------------------------------------
Ele é irmão do sumário do PDF, e não uma coisa nova: mesma ideia, mesmo rótulo em caixa
alta pequena ("Neste documento"), e a mesma função de deixar a pessoa escolher por onde
entrar numa leitura de vinte e cinco capítulos.
O NÚMERO É DESENHO, e não tipografia — por isso ele pode ter tamanho próprio sem furar a
escala de nove degraus: é o mesmo caso do placar da sinastria e do glifo na capa, escrito
no `tokens-e-base.css`. O TÍTULO da entrada é texto, e usa o degrau `--c-apoio`. */
.reading-sumario{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md);
margin-bottom:18px; padding:18px 20px 10px; box-shadow:var(--shadow-1);}
.reading-sumario-rotulo{font-family:var(--fonte-interface); font-size:var(--c-etiqueta); letter-spacing:.14em;
text-transform:uppercase; color:var(--brass); margin-bottom:12px;}
.reading-sumario-lista{list-style:none; margin:0; padding:0;}
.reading-sumario-lista li{margin:0;}
.reading-sumario-item{display:flex; align-items:baseline; gap:12px; width:100%; text-align:left;
background:none; border:0; padding:9px 2px; cursor:pointer; border-bottom:1px solid var(--border-soft);
transition:color var(--dur-base) var(--ease);}
.reading-sumario-lista li:last-child .reading-sumario-item{border-bottom:0;}
.reading-sumario-item:hover .reading-sumario-titulo{color:var(--brass-dark);}
.reading-sumario-num{font-family:var(--fonte-interface); font-size:12px; font-weight:700; color:var(--brass);
flex-shrink:0; min-width:1.6em;}
.reading-sumario-titulo{font-family:var(--fonte-interface); font-size:var(--c-apoio); line-height:1.45;
color:var(--ink); transition:color var(--dur-base) var(--ease);}
.reading-chapters .chapter{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:10px; overflow:hidden; box-shadow:var(--shadow-1);}
.reading-chapters .chapter summary{list-style:none; cursor:pointer; padding:18px 20px; font-family:var(--fonte-interface); font-weight:700; font-size:var(--c-lede); line-height:1.4; letter-spacing:-0.01em; color:var(--brass-dark); display:flex; justify-content:space-between; align-items:center; gap:12px;}
.reading-chapters .chapter summary:hover{background:var(--card-alt);}
.reading-chapters .chapter summary::-webkit-details-marker{display:none;}
.reading-chapters .chapter summary::after{content:"+"; font-family:var(--fonte-interface); font-size:22px; font-weight:400; color:var(--brass); flex-shrink:0; transition:transform var(--dur-base) var(--ease);}
.reading-chapters .chapter[open] summary::after{content:"–";}
.reading-chapters .chapter[open] summary{border-bottom:1px solid var(--border-soft);}
.reading-chapters .chapter .chapter-body{padding:18px 20px 22px; animation:fadeIn var(--dur-base) ease both;}
.reading-chapters .chapter p{font-size:var(--c-lede); line-height:1.75; color:var(--ink); margin:0 0 16px;}
.reading-chapters .chapter strong{color:var(--ink); font-weight:700;}
.reading-pdf-block{text-align:center; padding:8px 0 40px;}
.reading-pdf-btn{max-width:280px; margin:0 auto;}
/* O BLOCO DE GERAR O LINK — 05/09/2026, e só a dona o vê (ver o `index.html`).
ELE É DELIBERADAMENTE DISCRETO: contorno em vez de preenchimento, e abaixo do botão que a
cliente usa. Os dois fazem o mesmo PDF, mas um é o produto e o outro é ferramenta de quem
atende — dar a mesma força visual aos dois faria a tela da cliente parecer um painel.
O `--brass` é o mesmo latão do resto do site: ferramenta discreta não quer dizer estranha. */
.reading-link-block{margin-top:18px; padding-top:18px; border-top:1px solid var(--border-soft);}
.reading-link-btn{
display:block; max-width:280px; margin:0 auto 8px; padding:12px 18px;
font-size:var(--c-apoio); font-weight:600; color:var(--brass-dark);
background:transparent; border:1px solid var(--brass); border-radius:var(--radius-sm);
cursor:pointer;
}
.reading-link-btn:hover{background:var(--brass-glow);}
.reading-link-btn:disabled{opacity:0.6; cursor:default;}
.reading-link-recado{margin-top:12px; font-size:var(--c-apoio); color:var(--muted);}
/* O CAMPO É `readonly` E NÃO `disabled`: campo desligado não deixa selecionar o texto, e
selecionar é justamente a saída quando a área de transferência do navegador falha. */
.reading-link-campo{
width:100%; max-width:560px; height:44px; padding:0 12px; margin:0 auto;
display:block; font-size:16px; color:var(--ink); background:#fff;
border:1px solid var(--border); border-radius:var(--radius-sm); box-sizing:border-box;
}
.reading-link-acoes{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:10px;}
.reading-link-copiar,
.reading-link-zap{
padding:10px 16px; font-size:var(--c-apoio); font-weight:600; border-radius:var(--radius-sm);
border:1px solid var(--brass); background:transparent; color:var(--brass-dark); cursor:pointer;
text-decoration:none;
}
.reading-link-copiar:hover,
.reading-link-zap:hover{background:var(--brass-glow);}
.reading-pdf-caption{font-size:var(--c-nota); color:var(--muted); line-height:1.6; max-width:320px; margin:14px auto 0;}
/* ================= O ZOOM DA RODA — 02/09/2026 =================
A caixa que passa a ser dona do gesto de beliscar. O porquê está no
`app/nucleo/o-zoom-da-roda.js`; aqui ficam só as três decisões visuais.
1. `touch-action:pan-y` NO REPOUSO. É esta linha que separa "a roda tem zoom" de "a
roda engoliu a rolagem": com ela o dedo continua descendo a página em cima do
desenho, e o navegador entrega a nós apenas o gesto de DOIS dedos. Quando a roda
está aproximada (`.perto`), ela vira `none` — aí um dedo arrasta o mapa, que é o
que se espera de um desenho que não cabe mais na caixa.
2. A TRANSFORMAÇÃO MORA NO PALCO, e não no ``. O SVG é serializado como está
pela exportação em PNG e SVG da bancada e pelos dois PDFs; um `transform` escrito
nele sairia junto e viraria um mapa torto no arquivo salvo.
3. ELES MORAM À ESQUERDA, e não à direita: o canto de baixo à direita da janela é do
botão flutuante do WhatsApp, que é `position:fixed` e passa por cima de qualquer
coisa que caia embaixo dele. É o mesmo lado em que o astromapa já põe os dele.
4. OS BOTÕES SÃO DISCRETOS ATÉ SEREM PRECISOS — 55% de opacidade no repouso, cheios
quando o ponteiro chega ou quando a roda já está aproximada. Eles ficam POR CIMA de
um gráfico, e um controle opaco em cima de um gráfico é um pedaço do gráfico que
não se vê. */
.roda-zoom{position:relative; width:100%; overflow:hidden; touch-action:pan-y; border-radius:var(--radius-md);}
/* A PROMOÇÃO A CAMADA É SÓ DURANTE O GESTO — 03/09/2026, e é o conserto do "quero que o
zoom máximo tenha a mesma qualidade": no aumento grande o desenho saía borrado, com o
traço da roda e os glifos com a borda mole.
POR QUE UM VETOR BORRA. O `will-change:transform` é um pedido ao navegador: "esta caixa
vai se mover, guarde-a numa camada própria da placa de vídeo". O navegador atende, e para
atender ele RASTERIZA o conteúdo uma vez, na escala em que ele está, e passa a mover esse
retrato. É isso que faz um arrasto correr liso — e é isso que estraga um ZOOM: ampliar
seis vezes um retrato tirado em 1× é ampliar píxeis, e não redesenhar o vetor. O SVG não
tem resolução; a camada que o guarda tem.
O PEDIDO PASSA A SER TEMPORÁRIO. Enquanto o dedo (ou o botão, ou a roda do mouse) está
mexendo, a classe `a-mexer` está na caixa e a camada existe — o gesto continua tão liso
quanto era. Uns dois décimos de segundo depois do último movimento a classe sai, a camada
se desfaz e o navegador REDESENHA o vetor na escala em que ele parou. Quem olha vê o
desenho ficar nítido no instante em que para de mexer, que é justamente quando ele começa
a ser olhado.
NÃO TROQUE ISTO POR MEXER NA `viewBox` do SVG: o desenho é serializado como está pela
exportação em PNG e SVG da bancada e pelos dois PDFs, e uma `viewBox` de zoom sairia
junto — um mapa recortado no arquivo salvo. A transformação mora no palco por esse
motivo, e ele continua valendo. */
.roda-zoom-palco{transform-origin:0 0;}
.roda-zoom.a-mexer .roda-zoom-palco{will-change:transform;}
.roda-zoom svg{user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;}
.roda-zoom.perto{touch-action:none; cursor:grab;}
.roda-zoom.perto:active{cursor:grabbing;}
.roda-zoom-botoes{position:absolute; left:8px; bottom:8px; display:flex; flex-direction:column; gap:5px; opacity:0.55; transition:opacity var(--dur-base) var(--ease);}
.roda-zoom:hover .roda-zoom-botoes, .roda-zoom.perto .roda-zoom-botoes, .roda-zoom.em-tela-cheia .roda-zoom-botoes{opacity:1;}
.roda-zoom-botoes button{
width:34px; height:34px; display:grid; place-items:center; padding:0;
border:1px solid var(--border); border-radius:9px; background:var(--card); color:var(--ink);
font-size:var(--c-apoio); line-height:1; box-shadow:var(--shadow-1);
}
.roda-zoom-botoes button:hover{background:var(--brass-light,#F1E4C8); border-color:var(--brass,#AB7C3B); color:var(--brass-dark,#7E5A28);}
.roda-zoom-botoes button:active{transform:translateY(1px);}
/* A TELA CHEIA. Ela existe para GRAVAR: a roda sozinha sobre o papel, sem cabeçalho, sem
tabela e sem rodapé, no maior quadrado que couber na tela — que é `min(100vw, 100vh)`,
porque a roda é quadrada e o que sobra em qualquer um dos dois lados é margem, não
desenho. O `100dvh` é o que impede a barra do navegador do celular de comer um pedaço
da roda quando ela aparece e some durante a gravação. */
.roda-zoom.em-tela-cheia{
position:fixed; inset:0; z-index:600; width:100%; height:100dvh;
display:grid; place-items:center; background:var(--card); border-radius:0; padding:0;
}
/* O QUADRADO PERDE 32 PX PARA NÃO ENCOSTAR NA BORDA — 03/09/2026, com o pedido do zoom em
tela cheia. A dona mandou o exemplo de outro site com a observação: "o dela ainda corta o
topo, não quero que corte no tablet". Um quadrado de lado `100dvh` cabe na altura por
definição — e encosta nas duas bordas ao mesmo tempo, sem um pixel de folga. Aí basta a
barra do navegador aparecer, ou o aparelho arredondar a conta da altura, para o alto do
desenho ficar por baixo de alguma coisa. Os 32 px são 16 de cada lado, e são também o que
tira os botões de cima do traço da roda.
OS 32 PX SÃO SÓ DA ALTURA, e isto é medida, não gosto: no celular a roda já ocupa a
largura inteira da página parada (390 px numa tela de 390), e descontar o respiro dos DOIS
lados fazia a tela cheia entregar 358 — ou seja, aproximar ENCOLHIA o desenho. Na
horizontal não há barra de navegador para invadir nada; na vertical há, e é lá que a
folga serve. */
.roda-zoom.em-tela-cheia .roda-zoom-palco{width:min(100vw, calc(100dvh - 32px)); max-width:100%;}
.roda-zoom.em-tela-cheia .roda-zoom-botoes{left:14px; bottom:14px;}
body.com-roda-em-tela-cheia{overflow:hidden;}
/* Nada de botão flutuante por cima de um mapa que está sendo gravado. Eles são fixos na
janela, e a tela cheia é justamente a tela em que a janela some. */
body.com-roda-em-tela-cheia .botao-flutuante{display:none;}
/* Impresso, o controle não é controle: é um borrão de tinta em cima do gráfico. */
@media print{ .roda-zoom-botoes{display:none;} .roda-zoom{overflow:visible;} }
/* ---------- conteúdo instantâneo (sem IA) enquanto os capítulos carregam em segundo plano ---------- */
.reading-intro-desc{font-size:var(--c-corpo); color:var(--ink-soft); line-height:1.7; margin-bottom:14px;}
/* O MARCADOR É UM PONTO, E NÃO UMA ESTRELA — 26/08/2026.
Todas as listas do site marcavam o item com ✦ (U+2726), e as três marcas de "está
acontecendo alguma coisa" — o selo de compra encomendada, o orbe da leitura sendo
escrita e o giro do cartão da biblioteca — eram a mesma estrela piscando. É o
desenho que virou assinatura de texto feito por IA no ano passado, e num produto
que já é escrito por modelo ele diz em voz alta justamente o que o texto passa a
leitura inteira tentando não parecer. O marcador virou ponto; as três marcas
viraram ☉, que é o glifo que a tela de carregamento já usava. */
.reading-answers-list{list-style:none;}
/* O MARCADOR POSICIONADO, e não um item de flex — 04/09/2026, e AQUI ELE ERA O MAIS
PERIGOSO DOS TRÊS: esta é a lista do TEXTO ENTREGUE, escrita por modelo. Num `` que é
contêiner flex todo elemento inline vira coluna, e uma frase com um `` no meio se parte
em três — bastava o texto gerado trazer um negrito ou um link para a leitura comprada sair
torta, sem erro nenhum em lugar nenhum. O porquê medido está no `eletiva-o-objetivo.css`. */
.reading-answers-list li{font-size:var(--c-apoio); color:var(--ink-soft); line-height:1.6; padding:8px 0 8px 17px; border-bottom:1px solid var(--border); position:relative;}
.reading-answers-list li:last-child{border-bottom:none;}
.reading-answers-list li::before{content:"•"; color:var(--brass); position:absolute; left:0; top:8px; font-size:var(--c-nota); line-height:1.6;}
/* ===========================================================================
A ABA DE INTRODUÇÃO DA LEITURA — 10/09/2026
===========================================================================
A moldura, o `+`/`–`, o respiro e a medida de leitura NÃO ESTÃO AQUI: ela é um `.chapter`
dentro de um `.reading-chapters`, e herda tudo do capítulo (ver `mapa-de-astrocartografia.css`).
O porquê está no `index.html`, em cima da marcação — e é a decisão que este arquivo mais
evita: uma segunda cópia do desenho do capítulo envelheceria sozinha no dia em que alguém
mudasse o raio, a sombra ou o sinal de abrir.
O que sobra aqui é só o que a introdução tem e o capítulo não: os rótulos das partes e a
linha que separa o texto do catálogo do texto do mapa desta pessoa. */
/* O INVÓLUCRO DA INTRODUÇÃO NÃO CARREGA O PÉ DA LEITURA. O `.reading-chapters` tem
`padding:20px 0 60px` — e aqueles 60 px de baixo são o respiro que separa o ÚLTIMO capítulo
do botão do PDF. Herdados aqui, eles somavam com os 20 px do alto do `#readingChapters` e
abriam 80 px de vão entre a introdução e o primeiro capítulo: um buraco que fazia os dois
parecerem de seções diferentes, e que aparecia justo quando a introdução era fechada. */
#readingIntroWrap{padding-bottom:0;}
/* O RÓTULO DE CADA PARTE. É a mesma arrumação da introdução do PDF — rótulo pequeno em
latão, texto embaixo —, e é de propósito: o PDF e a tela mostram a mesma introdução, e
duas aparências para o mesmo texto fazem quem baixa o arquivo achar que baixou outro.
OS TRÊS SELETORES DE CLASSE SÃO NECESSÁRIOS AQUI E NA LINHA DE BAIXO, e não são zelo: o
`.reading-chapters .chapter p` que vem do capítulo pesa duas classes mais um elemento, e
venceria um `.intro-da-leitura .intro-rotulo` sozinho — o rótulo sairia no corpo do texto. */
.reading-chapters .chapter .intro-rotulo{font-family:var(--fonte-interface); font-size:var(--c-etiqueta);
font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--brass); margin:0 0 8px;}
.reading-chapters .chapter .reading-intro-desc{font-size:var(--c-corpo); color:var(--ink-soft);
line-height:1.7; margin:0 0 18px;}
.intro-da-leitura .reading-answers-list{margin-bottom:0;}
/* O PARÁGRAFO DA PRÓPRIA ANÁLISE, separado por uma linha do que vem de cima: o que está
acima é igual para todo mundo que comprou este produto, e o que está abaixo saiu do mapa
desta pessoa. A linha é o que diz isso sem precisar de mais um rótulo. */
.intro-da-leitura .intro-preambulo{margin-top:22px; padding-top:20px; border-top:1px solid var(--border-soft);}
.intro-da-leitura .intro-preambulo:empty{display:none;}
.intro-da-leitura .intro-preambulo p:last-child{margin-bottom:0;}
.element-bars{display:flex; flex-direction:column; gap:10px; margin-bottom:20px;}
.element-bar-row{display:flex; align-items:center; gap:10px;}
.element-bar-label{font-size:var(--c-apoio); color:var(--ink-soft); width:78px; flex-shrink:0; display:flex; align-items:center; gap:5px;}
.element-symbol{font-size:var(--c-corpo); line-height:1;}
.element-bar-track{flex:1; height:8px; border-radius:var(--radius-pill); background:var(--bg-deep); overflow:hidden;}
.element-bar-fill{height:100%; border-radius:var(--radius-pill); background:var(--brass); transition:width 1.1s var(--ease-soft);}
.element-bar-pct{font-size:var(--c-nota); color:var(--muted); width:36px; text-align:right; flex-shrink:0; font-variant-numeric:tabular-nums;}
.keyword-block{margin-top:16px;}
.keyword-label{font-size:var(--c-apoio); color:var(--brass-dark); text-transform:uppercase; letter-spacing:0.05em; font-weight:700; margin-bottom:8px;}
.keyword-chips{display:flex; flex-wrap:wrap; gap:8px;}
.keyword-chip{font-size:var(--c-apoio); padding:6px 13px; border-radius:var(--radius-pill); background:var(--card-alt); border:1px solid var(--border); color:var(--ink);}
.keyword-chip:hover{border-color:var(--brass); transform:translateY(-1px);}
.keyword-chip.desafio{background:#F7EDE6; border-color:#E9D2C0;}
.reading-chapters-placeholder{display:flex; flex-direction:column; align-items:center; gap:14px; padding:34px 24px; text-align:center; color:var(--muted); font-size:var(--c-apoio); line-height:1.6;}
.reading-chapters-placeholder-spinner{width:26px; height:26px; border-radius:50%; border:2.5px solid var(--border); border-top-color:var(--brass); animation:spin 0.9s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
/* ---------- AS DUAS GRADES DO MAPA — 02/09/2026 ----------
A grade de aspectos (triangular, com o glifo de cada ponto na diagonal) e a de
elementos × modalidades. As duas nascem do mesmo pedido, e por isso dividem o
arquivo, a rolagem e a nota de rodapé.
ELAS APARECEM EM TRÊS TELAS — o mapa salvo, a leitura comprada e a bancada do
astrólogo —, e é por isso que o seletor não é preso a nenhuma view: um `#view-mymap`
aqui obrigaria a copiar o bloco inteiro para a bancada, e cópia de CSS é como duas
telas do mesmo app passam a desenhar a mesma tabela de dois jeitos.
A ROLAGEM HORIZONTAL É DA CAIXA, E NUNCA DA PÁGINA. Catorze colunas não cabem num
telefone em pé, e a saída fácil — deixar a tabela empurrar a largura do corpo — faz
a página inteira deslizar de lado, inclusive o texto que nada tem com a tabela. */
.ga-rolagem{overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px;
/* A SOMBRA QUE DIZ "TEM MAIS PARA O LADO" — e ela só aparece quando tem. As duas primeiras
camadas são o papel (opacas, presas ao conteúdo com `local`); as duas de baixo são a
sombra (presas à caixa com `scroll`). Enquanto houver conteúdo escondido de um lado, o
papel daquele lado saiu de vista e a sombra aparece; ao chegar no fim, o papel cobre a
sombra de novo. Sem isto, no celular a grade acaba na borda do cartão e parece cortada
— e tabela que parece cortada é tabela que ninguém arrasta. Nada de JavaScript: quem
mede é o próprio navegador, a cada rolagem. */
background-image:
linear-gradient(to right, var(--card) 60%, rgba(255,255,255,0)),
linear-gradient(to left, var(--card) 60%, rgba(255,255,255,0)),
linear-gradient(to right, rgba(31,26,18,0.13), rgba(31,26,18,0)),
linear-gradient(to left, rgba(31,26,18,0.13), rgba(31,26,18,0));
background-position:left center, right center, left center, right center;
background-repeat:no-repeat;
background-size:26px 100%, 26px 100%, 11px 100%, 11px 100%;
background-attachment:local, local, scroll, scroll;}
.ga-tabela{border-collapse:collapse; margin:0 auto; font-variant-numeric:tabular-nums;}
.ga-tabela th, .ga-tabela td{width:34px; min-width:34px; height:34px; padding:0; text-align:center;
vertical-align:middle; border:1px solid var(--border-soft);}
/* A DIAGONAL É O RÓTULO. Numa grade triangular ela é o único lugar onde o nome do ponto
cabe sem dobrar a tabela de tamanho — é o que as efemérides impressas fazem, e é o que
faz a linha e a coluna de um planeta se encontrarem num lugar visível. */
.ga-tabela .ga-diagonal{background:var(--card-alt); border-color:var(--border);}
.ga-tabela .ga-topo, .ga-tabela .ga-lado{background:var(--card-alt); border-color:var(--border);}
.ga-tabela .ga-canto{border:none; background:transparent;}
.ga-glifo, .ga-simbolo, .ge-glifo, .ge-simbolo{
font-family:'Noto Sans Symbols','Noto Sans Symbols 2','Segoe UI Symbol','Inter',sans-serif;
font-variant-emoji:text; -webkit-font-variant-emoji:text; line-height:1;}
.ga-glifo{font-size:var(--c-corpo); color:var(--brass-dark);}
.ga-simbolo{display:block; font-size:var(--c-apoio);}
/* A ORBE MORA EMBAIXO DO SÍMBOLO, e é ela que distingue um trígono exato de um que só
existe no papel. Sem o número a grade diz "há um trígono aqui" e cala o quanto ele
vale — que é a primeira pergunta de quem lê a grade depois de achar o aspecto. */
.ga-orbe{display:block; font-size:var(--c-micro); color:var(--muted); line-height:1; margin-top:1px;}
.ga-vazia{background:transparent;}
.ga-legenda{display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:12px; font-size:var(--c-etiqueta);
color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.05em;}
.ga-legenda-item{display:inline-flex; align-items:center; gap:5px;}
.ga-legenda .ga-simbolo{display:inline; font-size:var(--c-apoio);}
.ga-nota, .ga-quem, .ga-nada{font-size:var(--c-nota); color:var(--muted); line-height:1.6; margin-top:8px;}
.ga-quem{margin:0 0 10px;}
/* ---------- elementos × modalidades ---------- */
.ge-tabela{border-collapse:collapse; width:100%; font-size:var(--c-apoio);}
.ge-tabela th, .ge-tabela td{border:1px solid var(--border-soft); padding:8px 10px; text-align:center;
vertical-align:middle; color:var(--ink);}
.ge-tabela thead th, .ge-tabela tr:first-child th{font-size:var(--c-etiqueta); color:var(--muted);
text-transform:uppercase; letter-spacing:0.07em; font-weight:600;}
.ge-tabela .ge-lado{text-align:left; white-space:nowrap; font-weight:600; color:var(--ink-soft);}
.ge-tabela .ge-canto{border:none; background:transparent;}
.ge-simbolo{font-size:var(--c-corpo); margin-right:5px;}
.ge-glifo{font-size:var(--c-corpo); color:var(--brass-dark); margin:0 2px;}
.ge-tabela .ge-total{font-weight:700; color:var(--brass-dark); font-variant-numeric:tabular-nums;}
.ge-tabela .ge-rodape td, .ge-tabela .ge-rodape th{background:var(--card-alt); font-weight:700;
color:var(--ink-soft); font-variant-numeric:tabular-nums;}
@media(max-width:560px){
.ga-tabela th, .ga-tabela td{width:29px; min-width:29px; height:29px;}
.ga-glifo{font-size:var(--c-apoio);}
.ga-simbolo{font-size:var(--c-nota);}
/* NO CELULAR A TABELA DOS ELEMENTOS TEM DE CABER INTEIRA, e a coluna que não pode ficar
de fora é a do TOTAL: é ela que responde a pergunta "de que elemento eu sou mais?".
Uma tabela de cinco colunas que rola de lado esconde justamente a última. Por isso
aqui ela encolhe em vez de rolar — a grade de aspectos, essa sim, rola: catorze
colunas não cabem em tela de telefone por encolhimento nenhum. */
.ge-tabela{font-size:var(--c-nota);}
.ge-tabela th, .ge-tabela td{padding:6px 3px;}
.ge-tabela .ge-lado{font-size:var(--c-etiqueta);}
.ge-glifo{font-size:var(--c-apoio); margin:0 1px;}
.ge-simbolo{font-size:var(--c-apoio); margin-right:3px;}
}
/* NA IMPRESSÃO A GRADE NÃO PODE SER CORTADA AO MEIO. A bancada do astrólogo imprime pelo
navegador (o botão "Imprimir / PDF"), e uma caixa com rolagem impressa mostra só o
pedaço visível — o resto some sem aviso, que é o defeito clássico de tabela larga em
papel. Aqui a rolagem é desligada e a grade é mantida inteira numa página. */
@media print{
.ga-rolagem{overflow:visible;}
.ga-tabela, .ge-tabela{break-inside:avoid; page-break-inside:avoid;}
}
/* ---------- espera de página inteira na tela de leitura (quando a compra ainda está "producing") ---------- */
.reading-producing{min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 24px; text-align:center; animation:fadeIn var(--dur-slow) ease both;}
.reading-producing-orb{position:relative; width:96px; height:96px; margin-bottom:30px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:radial-gradient(circle at 32% 28%, var(--brass-light), var(--brass) 70%, var(--brass-dark) 100%); box-shadow:var(--shadow-brass-lg);}
.reading-producing-orb::before{content:""; position:absolute; inset:-8px; border-radius:50%; border:2px solid var(--border); border-top-color:var(--brass-dark); animation:lib-orbit-spin 2.6s linear infinite;}
.reading-producing-orb::after{content:""; position:absolute; inset:-22px; border-radius:50%; background:radial-gradient(circle, var(--brass-glow), rgba(171,124,59,0) 72%); animation:softPulse 3.2s ease-in-out infinite; z-index:-1;}
.reading-producing-glyph{font-size:34px; color:#fff; animation:lib-orbit-twinkle 2.2s ease-in-out infinite;}
.reading-producing-msg{font-family:var(--fonte-interface); font-size:var(--t-cartao); color:var(--ink); max-width:360px; line-height:1.5; margin-bottom:10px;}
.reading-producing-sub{font-size:var(--c-apoio); color:var(--muted); max-width:340px; line-height:1.6; margin-bottom:26px;}
.reading-producing-thermo{width:100%; max-width:280px; height:7px; border-radius:var(--radius-pill); background:var(--bg-deep); border:1px solid var(--border); overflow:hidden; margin-bottom:10px;}
.reading-producing-thermo-fill{height:100%; width:4%; border-radius:var(--radius-pill); background:linear-gradient(90deg, var(--brass-dark), var(--brass)); transition:width 4s linear;}
.reading-producing-eta{font-size:var(--c-nota); color:var(--muted); letter-spacing:0.01em;}
/* ==========================================================================
O PEDIDO DE DEPOIMENTO — 21/09/2026
==========================================================================
O cartão que fica ao lado do "Baixar em PDF" nas três telas que ENTREGAM: a leitura
comprada, o relatório da eleição e o do parto programado. O porquê de cada decisão de
conteúdo está no `app/mapas/o-pedido-de-depoimento.js`; aqui mora só o desenho.
ELE USA O CARTÃO DA CASA, e não um segundo desenho de cartão: fundo, borda, raio e
elevação vêm do `.card-prominent` do `componentes-reutilizaveis.css`, e o que está escrito
abaixo é só o que é específico deste bloco. Superfície flutuante que redeclara o próprio
fundo é como dois cartões do mesmo site começam a divergir.
E ELE NÃO PUXA COR DE PRODUTO. As telas de leitura são tingidas pela cor da capa; este
cartão fica no pergaminho de sempre, de propósito — ele não fala do produto que a pessoa
comprou, fala do Google. Um cartão que mudasse de cor a cada leitura pareceria mais uma
seção da análise, e é justamente o que ele não é.
OS TAMANHOS SAEM DA ESCALA, nunca de um número escrito à mão — a única exceção é a caixa
de texto, que fica em `--c-lede` (16 px) porque abaixo disso o iOS dá zoom na página no
instante em que o dedo toca o campo. É a exceção que o `tokens-e-base.css` já abre para
campo de formulário, e ela vale aqui.
========================================================================== */
.pedido-de-depoimento{margin:0 0 40px;}
.dep-cartao{
background:var(--card); border:1px solid var(--border);
border-radius:var(--radius-lg); box-shadow:var(--shadow-2);
padding:28px 24px; text-align:center;
}
/* AS CINCO ESTRELAS SÃO NOTA, E NÃO ENFEITE — é a mesma razão pela qual elas ficaram na
fileira de depoimentos quando a estrela de quatro pontas saiu do site inteiro. Cor de
desenho (`--estrela-forte`), o amarelo que o próprio Google usa; quem não vê a tela ouve
"Cinco estrelas" pelo `aria-label`, e não depende da cor para nada. */
.dep-estrelas{color:var(--estrela-forte); font-size:22px; letter-spacing:4px; line-height:1;}
.dep-titulo{font-size:var(--t-bloco); color:var(--ink); margin:14px 0 10px; line-height:1.35;}
.dep-corpo{font-size:var(--c-corpo); color:var(--ink-soft); line-height:1.7; margin:0 auto; max-width:46ch;}
/* A ASSINATURA É O QUE FAZ O PEDIDO SER DE UMA PESSOA, e por isso ela é em serifa itálica —
a mesma letra das citações do site. Sem ela o bloco volta a ser "avalie-nos". */
.dep-assinatura{font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:var(--c-lede); color:var(--brass-dark); margin:12px 0 0;}
.dep-rotulo{font-size:var(--c-etiqueta); text-transform:uppercase; letter-spacing:0.09em; color:var(--muted); margin:26px 0 10px;}
/* AS TRÊS PERGUNTAS SÃO PARA SEREM LIDAS ENQUANTO SE ESCREVE, e é por isso que elas ficam
ACIMA da caixa e alinhadas à esquerda: uma lista centralizada obriga o olho a procurar o
começo de cada linha, e quem está pensando no que dizer não procura nada. */
.dep-perguntas{list-style:none; margin:0 0 20px; padding:0; text-align:left; display:grid; gap:8px;}
.dep-perguntas li{
font-size:var(--c-apoio); color:var(--ink-soft); line-height:1.55;
background:var(--card-alt); border:1px solid var(--border-soft);
border-radius:var(--radius-sm); padding:10px 14px;
}
.dep-label{display:block; text-align:left; font-size:var(--c-etiqueta); text-transform:uppercase; letter-spacing:0.09em; color:var(--muted);}
.dep-texto{
display:block; width:100%; margin:8px 0 0; box-sizing:border-box;
font-family:inherit; font-size:var(--c-lede); color:var(--ink); line-height:1.6;
background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm);
padding:12px 14px; resize:vertical;
}
.dep-texto:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px var(--brass-glow);}
/* O BOTÃO É LARGO O BASTANTE PARA O RÓTULO CABER NUMA LINHA, e a medida saiu de uma
fotografia: com os 340 px e os 30 px de respiro lateral do `.btn-primary`, "Escrever a
minha avaliação no Google" quebrava em duas linhas nos dois tamanhos de tela. Rótulo
partido no meio de um botão é o detalhe pequeno que faz a tela parecer montada às pressas
— e este é o botão que a página inteira existe para ser tocado.
O respiro de dentro é reduzido AQUI, e não no `.btn-primary`: o botão de sempre continua
como está, e o que muda é este, que tem o rótulo mais comprido do app. */
.dep-botao{margin:18px auto 0; display:block; width:100%; max-width:400px; padding-left:18px; padding-right:18px;}
.dep-legenda{font-size:var(--c-nota); color:var(--muted); margin:10px 0 0; line-height:1.6;}
/* AS DUAS PORTAS TÊM O MESMO PESO, e isso é uma decisão e não um descuido de estilo: dar à
do Google um botão e à outra um link miúdo seria o funil que o `o-pedido-de-depoimento.js`
se recusa a montar. Nenhuma das duas compete com o botão de cima — as duas são texto. */
.dep-portas{display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:center; margin:22px 0 0;}
.dep-porta{
background:none; border:none; padding:0; cursor:pointer;
font-family:inherit; font-size:var(--c-nota); color:var(--muted);
text-decoration:underline; text-underline-offset:3px;
}
.dep-porta:hover{color:var(--brass-dark);}
.dep-obrigada{font-size:var(--c-apoio); color:var(--muted); text-align:center; margin:0; padding:18px 0;}
/* NO CELULAR O CARTÃO RESPIRA MENOS PELOS LADOS, e a caixa de texto continua nos 16 px: o
zoom do iOS não negocia. */
@media(max-width:480px){
.dep-cartao{padding:22px 16px;}
}
/* ==========================================================================
A LISTA DO PAINEL — 21/09/2026
==========================================================================
"Quem respondeu" mora no painel da dona, e o desenho dele é o do painel: a `.adm-lista`
e os `.adm-nome`/`.adm-quando` vêm de lá. O que é próprio daqui são duas coisas — a
linha que diz de qual entrega veio, e a citação do que a pessoa escreveu.
O TEXTO VEM INTEIRO, sem corte nem reticência: o motivo de a dona ter escolhido guardá-lo
foi poder LER o depoimento. Uma caixa que o corta na terceira linha devolve o contador de
que ela quis fugir. */
.adm-depoimentos li{display:block; padding:12px 0;}
/* O NOME E A DATA NUMA LINHA SÓ, E SEPARADOS — a lista do painel deita os filhos do `li`
em fila, e este `li` tem quatro (nome, data, produto, citação). Sem um invólucro para os
dois primeiros, o nome e a hora saem COLADOS: "Marina Alencarhoje, 19:42". Visto na
primeira fotografia da lista, antes de ela subir. */
.adm-dep-topo{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px;}
.adm-dep-produto{display:block; font-size:var(--c-nota); color:var(--muted); margin-top:2px;}
.adm-dep-texto{
margin:8px 0 0; padding:10px 14px;
border-left:3px solid var(--brass); background:var(--bg);
border-radius:0 var(--radius-sm) var(--radius-sm) 0;
font-size:var(--c-apoio); color:var(--ink-soft); line-height:1.65; white-space:pre-wrap;
}
.adm-dep-vazio{display:block; margin-top:6px; font-size:var(--c-nota); color:var(--muted); font-style:italic;}
/* correções de colisão entre classes compartilhadas do catálogo e da tela de produto */
#view-product .hero:not(.de-sempre) .eyebrow{display:block; text-align:center; margin-bottom:10px; letter-spacing:0.16em; font-weight:600;}
/* E ELE DEIXA DE SER CENTRADO QUANDO A PÁGINA VIRA DUAS COLUNAS — 04/09/2026, a pedido da
dona ("a capa, o título… muita coisa torta ainda; centraliza com o restante"). Acima de
1000 px a capa é a coluna da ESQUERDA, com o emblema, o título e a descrição todos partindo
da mesma vertical; um sobretítulo centrado no meio deles é a única peça fora do prumo.
ESTA CORREÇÃO MORA AQUI, e não no `tela-de-produto.css`, porque foi lá que a primeira
tentativa falhou: os dois seletores pesam igual, este arquivo é colado depois, e entre
iguais vence o último. Regra de correção de colisão se corrige na própria colisão. */
@media (min-width:1000px){
#view-product .hero:not(.de-sempre) .eyebrow{text-align:left;}
}
#view-product .hero:not(.de-sempre) h1{line-height:1.18; letter-spacing:-0.015em;}
#view-product .birth-form{max-width:none; margin:0; overflow:visible;}
/* A SOMBRA DAQUI GANHA DA DE LÁ, e por isso ela também teve de virar a cor da capa em
31/08/2026: este arquivo é colado DEPOIS do `tela-de-produto.css` (ver `design/ordem.txt`)
e o `box-shadow` escrito aqui vencia o de lá em toda a página do produto. Sem esta linha,
o botão sairia turquesa com uma sombra de latão embaixo — e a queixa voltaria como
"ficou sujo", que é a mais difícil de rastrear até uma regra de correção de colisão. */
/* E ELA TAMBÉM PASSOU A DIZER `.birth-form` — 04/09/2026, pelo mesmo motivo do gêmeo dela
no `tela-de-produto.css`: o formulário não tem mais botão principal (o pagamento é o bloco
do Mercado Pago), e o único `.btn-primary` dentro da tela de produto é o da capa CLONADA
no pé da página. Sem o `.birth-form`, esta linha dava ao botão do fecho uma sombra de
latão e apagava o `letter-spacing` dele — o mesmo botão saía diferente do original da tela
de início por sete propriedades. */
#view-product .birth-form .btn-primary{letter-spacing:normal; box-shadow:0 8px 20px var(--capa-sombra, rgba(138,101,48,0.28));}
#view-product .wrap{position:static;}
/* ==========================================================================
A METODOLOGIA E AS PERGUNTAS FREQUENTES DENTRO DE UMA TELA DE VENDA — 03/09/2026
==========================================================================
ESTAS REGRAS ERAM `#view-product ...`, E O ID ERA O PROBLEMA. Elas adaptam os dois
blocos ao contexto de uma tela de venda — coluna estreita, página já tingida pela cor da
leitura, sem a faixa de arte que abre a seção na tela de início — e todas as razões
abaixo continuam valendo palavra por palavra. O que mudou é a QUEM elas alcançam.
Desde hoje o mesmo bloco é copiado para quatro telas (as 33 de produto, o parto
programado, a vitrine da Eletiva e a página de um objetivo eletivo), e um seletor com id
só arrumaria a primeira: as outras três receberiam a faixa de arte de 320 px, o fundo
azul e a `.wrap` de 1080 px dentro de uma coluna estreita. Seriam quatro telas de venda
com dois desenhos — o "parece remendo" outra vez, agora causado pelo conserto.
O gancho é a `.secoes-de-sempre`, que é o próprio endereço onde a cópia entra. Ela
alcança as quatro e NÃO alcança a tela de início, que é onde o bloco original mora com a
faixa e a largura inteira. Uma tela de venda nova nasce certa sem passar por aqui.
A FAIXA DE ARTE NÃO ENTRA NUMA TELA DE VENDA — 02/09/2026, e ela estava ENTRANDO POR
CIMA do cartão. A dona mandou o print: o relógio aparecia atravessado no topo da
Metodologia, com o sobretítulo e o título por cima da fotografia.
A CAUSA É A LINHA `#view-product .wrap{position:static}`, aqui em cima. O empilhamento
da faixa depende de o `.wrap` ser posicionado — `z-index` não faz nada num elemento
`static` —, e ali ele é forçado a static. Resultado: a faixa, que é `position:absolute`,
passa a ser pintada DEPOIS do cartão em vez de antes.
E o conserto certo não é reordenar: é a faixa não existir aqui. Ela é a abertura de uma
seção que ocupa a largura da tela; dentro da coluna estreita de uma página de venda, a
Metodologia é um bloco entre outros, e uma fotografia de 320 px de altura na frente dele
seria capa de uma seção que não existe. Some junto o azul, pelo mesmo motivo: a página
já é tingida pela cor da leitura.
OS DOIS PARÁGRAFOS ACIMA SÃO HISTÓRIA, E NÃO O QUE ESTÁ NO AR — leia-os até o fim antes
de agir por eles. A faixa VOLTOU: primeiro acima de 1.000 px, em 04/09, e em toda largura
desde 07/09. A premissa que os sustentava ("dentro da coluna estreita de uma página de
venda") caiu em 03/09, quando a página passou de 640 para 1.080, e de vez em 05/09,
quando as seções de fecho saíram de dentro da `.wrap` e passaram a ir de ponta a ponta em
qualquer janela. O que sobreviveu inteiro deles é a CAUSA do defeito de 02/09 — o
`position:static` da `.wrap` —, e é por isso que a regra do `position` vai junto com a
faixa, no bloco marcado "A FAIXA DE ARTE E O CHÃO DA METODOLOGIA NÃO DEPENDEM DA
LARGURA". */
/* AS QUATRO PEÇAS SEGUIAM A MESMA REGRA — 03/09/2026, de tarde, quando os depoimentos e a
promessa ("O céu no exato momento do seu nascimento…") entraram no fecho a pedido da
dona. Elas chegam aqui pelo mesmo caminho das duas primeiras, então vestiam a mesma
adaptação: sem a faixa de arte, sem fundo próprio e sem o `.wrap` de dentro. O que valia
para a Metodologia numa coluna estreita valia igual para as outras três.
A METODOLOGIA E AS PERGUNTAS SAÍRAM DESTA LISTA EM 07/09/2026 — o porquê está no bloco
logo abaixo. Os depoimentos e a capa clonada continuam aqui: eles nunca tiveram faixa de
arte nem chão próprio na tela de início, então não há o que devolver. */
.secoes-de-sempre .testimonials,
.secoes-de-sempre .hero{padding:36px 0; background:transparent;}
.secoes-de-sempre .testimonials::before,
.secoes-de-sempre .hero::before{display:none;}
/* ==========================================================================
A FAIXA DE ARTE E O CHÃO DA METODOLOGIA NÃO DEPENDEM DA LARGURA — 07/09/2026
==========================================================================
Queixa da dona, com a foto do tablet junto: "no formato tablet de pé as configurações de
design de página somem" — e, quando perguntei qual peça, ela nomeou as duas:
"metodologia/perguntas freq".
ESTAS QUATRO REGRAS MORAVAM DENTRO DO `@media (min-width:1000px)` daqui de baixo, e o
comentário de 04/09 que as pôs lá dizia, com todas as letras, por quê:
"A FAIXA DE ARTE VOLTA, e o argumento que a tirou é o que a traz: 'ela é a abertura de
uma seção que ocupa a largura da tela'. Acima de 1000 px a seção VOLTOU a ocupar a
largura da tela. Abaixo, nada disto acontece."
ERA VERDADE NAQUELE DIA E DEIXOU DE SER NO SEGUINTE. Em 05/09 as seções de fecho saíram
de dentro da `.wrap` — está escrito no fim do bloco de baixo, "os dois clones passaram a
morar FORA da faixa, no HTML" —, e desde então elas vão de ponta a ponta em TODA largura.
Medido na tela do produto, antes desta correção: a Metodologia sai em `left:0` com a
largura inteira da janela em 390, 768, 834 e 999 px, exatamente como em 1024 e 1280.
Ou seja: a régua cobrava um VALOR (mil píxeis) que era, na véspera, um bom sinal do que
ela queria saber — se a seção ocupa a largura da tela. A condição virou verdade em todo
lugar; o número ficou. É a armadilha que o `CLAUDE.md` descreve em "Régua guarda
invariante, não valor", e a conta chegou num tablet de pé: deitado ele tem 1.365 px e a
Metodologia abre com a fotografia do relógio e o chão azul; de pé ele tem menos de mil, e
as duas seções perdem a arte e o chão — o mesmo bloco com dois desenhos, separados por
uma medida que já não decide nada.
O TELEFONE NÃO ENTRA, E ISSO É DECISÃO ESCRITA — não esquecimento. A régua "o fecho da
tela de venda ganha a faixa e o chão no computador, e não no celular", em
`conferir_a_tela.js`, guarda as duas metades desde 03/09 e diz por quê: "uma faixa de arte
de 200 px na frente de um bloco de 342 é capa de uma seção que não existe". Num aparelho de
390 px o cartão ocupa 88% da seção — não sobra chão em volta dele para a fotografia ser o
céu da seção em vez de um chapéu no cartão. Num tablet de pé de 800 o cartão ocupa 71%, e
num computador 59%.
O CORTE É 700 px, E O NÚMERO NÃO É NOVO: é a mesma linha que a PRÓPRIA faixa já traça para
si no `metodo-testemunhos-faq-e-rodape.css`, onde um `@media (max-width:700px)` alonga a
rampa da máscara porque "a emenda que a dona fotografou aparece no celular e quase não
aparece na tela grande". Ou seja: este componente já tinha um lugar onde ele diz "aqui é
telefone". Reusar essa linha é uma decisão a menos para envelhecer; inventar um segundo
número seria repetir hoje o erro que este bloco conserta.
O QUE CADA UMA FAZ (as três primeiras são o que o id da tela de venda rouba de volta):
· o respiro de cima, porque `#view-product section{padding:36px 0}` (um id e um tipo)
vence `.method` (um tipo) — sem ele a fotografia sai por cima do título;
· o `position` do `.wrap` de dentro, porque `#view-product .wrap{position:static}` vence
`.method > .wrap{position:relative}` — e `z-index` não faz nada num elemento estático,
que é a causa exata do defeito de 02/09 que tirou a faixa daqui;
· o chão da Metodologia na cor da capa, com o azul da seção como reserva.
========================================================================== */
.secoes-de-sempre .method,
#view-product .secoes-de-sempre .method{padding:calc(var(--faixa-de-arte) + 18px) 0 80px;}
.secoes-de-sempre .faq,
#view-product .secoes-de-sempre .faq{padding:calc(var(--faixa-de-arte) + 10px) 0 88px;}
.secoes-de-sempre .method > .wrap,
.secoes-de-sempre .faq > .wrap,
#view-product .secoes-de-sempre .method > .wrap,
#view-product .secoes-de-sempre .faq > .wrap{position:relative; z-index:1;}
.secoes-de-sempre .method{
background:linear-gradient(180deg,
var(--capa-fundo, var(--bg)) 0,
var(--capa-funda, var(--azul-metodo)) 200px,
var(--capa-funda, var(--azul-metodo)) calc(100% - 260px),
var(--capa-fundo, var(--bg)) 100%);
}
/* A EXCEÇÃO DO TELEFONE SAIU — 08/09/2026, e ela desfaz a decisão de 03/09 que o parágrafo
"O TELEFONE NÃO ENTRA", logo acima, defende. Fica lá escrita de propósito: o argumento
dela não era ruim, e quem vier depois merece saber que ele foi pesado e perdeu.
O QUE ELA FAZIA: abaixo de 700 px, a Metodologia e as Perguntas frequentes CLONADAS
perdiam a faixa de arte e o chão azul, e viravam um cartão branco no pergaminho. O
argumento era de proporção — "uma faixa de 200 px na frente de um bloco de 342 é capa de
uma seção que não existe", já que num aparelho de 390 px o cartão ocupa 88% da seção.
O QUE DERRUBOU O ARGUMENTO foi uma foto da dona, do telefone dela, com uma frase de quatro
palavras: "as abas dúvidas e metodologia perderam a imagem/design". E ela estava olhando a
página de um produto — porque na TELA DE INÍCIO, no mesmo telefone, as duas seções sempre
tiveram a faixa e o chão. A regra de 03/09 nunca alcançou a tela de início: ela mira o
`.secoes-de-sempre`, que é o clone.
Ou seja: a mesma seção, no mesmo aparelho, com dois desenhos — decidido por em qual tela
ela está. É exatamente a queixa que criou este arquivo, e ela é da própria dona: "a aba
forma de pagamento, metodologia, perguntas freq, rodapé deve ser igual em todos os
produtos e abas; tem muita diferença de um p outro hoje, parece remendo e serviço amador".
ENTRE OS DOIS ARGUMENTOS, GANHA O DELA. Proporção é uma opinião de desenho que se discute;
"o mesmo bloco tem de ser o mesmo bloco" é a regra que ela escreveu para esta casa. E o
remédio de 03/09 era pior que a doença: em vez de igualar, criou um segundo desenho.
A RÉGUA MUDOU NO MESMO EMPURRÃO: "o fecho da tela de venda ganha a faixa e o chão em tudo
menos no celular" passou a medir as três telas do mesmo jeito. */
/* O PIN DE ESTRELAS SAIU DO SITE EM 11/09/2026, e esta linha saiu com ele. Ela escondia o
ornamento dentro da cópia das seções; sem ornamento, o que sobraria era um seletor
guardando um nome de classe que já não existe em lugar nenhum — e classe fantasma numa
folha de estilo é o que faz a próxima pessoa procurar meia hora por uma peça apagada. */
/* A capa clonada é a promessa, e não a abertura de uma tela: a roda encolhe para não
empurrar o texto dela para fora da dobra de quem rolou até aqui.
QUEM MANDA NO TAMANHO É A VARIÁVEL `--roda`, e não um `max-width` na caixa: o halo do
`::before` e o disco do `` são DERIVADOS dela (ver `hero-emblem`, no
`pagina-inicial-e-formulario.css`). Apertando a caixa por fora, o disco continuava com os
560 px e a roda saía oval, transbordando a seção — foi o que a primeira tentativa fez. */
.secoes-de-sempre .hero-emblem{--roda:min(72vw, 360px); margin-bottom:26px;}
/* O `.wrap` DE DENTRO DA CÓPIA NÃO IMPÕE TETO, porque quem impõe o teto do texto é cada
seção — `.method-grid` tem o seu, `.faq-list` tem o seu, e eles são os mesmos da tela de
início. O par com `#view-product` na frente não é preciosismo: o
`#view-product .wrap{max-width:640px; padding:0 24px}` é um seletor com id e vence três
classes, e sem esta segunda linha a caixa das perguntas saía apertada em 640 só na tela do
produto.
MAS O RESPIRO LATERAL FICA AQUI, e não no contêiner — 05/09/2026. Ele estava no
`.secoes-de-sempre`, e o contêiner é justamente quem carrega os FUNDOS: a faixa de arte e o
azul da Metodologia, o degradê das Perguntas frequentes. Respiro no contêiner encolhe o
fundo junto com o texto, e o fundo saía numa faixa central com creme sobrando dos dois
lados — a dona fotografou e descreveu certo: "é como se estivesse seguindo uma régua só no
meio limitado".
RESPIRO É DO TEXTO; FUNDO É DA SEÇÃO. Com os 24 px aqui dentro, o texto fica onde estava —
medido nas três larguras, píxel por píxel: 24..366 em 390, 121..713 em 834, 303..1063 em
1.365 — e o fundo passa a ir de ponta a ponta, como sempre foi na tela de início. */
.secoes-de-sempre .method .wrap,
.secoes-de-sempre .faq .wrap,
.secoes-de-sempre .testimonials .wrap,
.secoes-de-sempre .hero .wrap,
#view-product .secoes-de-sempre .method .wrap,
#view-product .secoes-de-sempre .faq .wrap,
#view-product .secoes-de-sempre .testimonials .wrap,
#view-product .secoes-de-sempre .hero .wrap{max-width:none; padding:0 24px;}
.secoes-de-sempre .method-grid{border-radius:16px; overflow:hidden;}
.secoes-de-sempre .method-content{padding:28px 24px;}
.secoes-de-sempre .method h2,
.secoes-de-sempre .faq h2{font-size:var(--t-secao);}
.secoes-de-sempre .method .eyebrow{margin-bottom:14px;}
.secoes-de-sempre .method-lede{font-size:var(--c-corpo); margin-bottom:26px;}
.secoes-de-sempre .method-feature{gap:16px; margin-bottom:22px;}
.secoes-de-sempre .method-feature p{font-size:var(--c-corpo);}
.secoes-de-sempre .feature-num{font-size:22px; width:28px;}
.secoes-de-sempre .method-divider{margin:16px 0 22px;}
.secoes-de-sempre .method-credibility{margin-top:24px;}
.secoes-de-sempre .method-more-inner{padding-top:20px;}
/* A caixa das perguntas perde o teto de 720 px: dentro de uma coluna que já é estreita,
um segundo teto só a afastaria da margem do texto que ela acompanha. */
.secoes-de-sempre .faq-list{max-width:none;}
/* padronizar tipografia da tela de produto com a página inicial (mesma família, mesma escala) */
/* O PESO VOLTOU PARA 600 — 01/09/2026. Este `h2` era o único título do app a sair em 500,
e a diferença aparecia lado a lado com os outros da mesma tela: um título mais magro
que os vizinhos lê-se como outra fonte, que foi a queixa que abriu esta passada. A
régua da base (`tokens-e-base.css`) já dizia 600 para h1..h4; esta linha a desfazia. */
#view-product .section-title{font-size:var(--t-bloco); font-weight:600; letter-spacing:-0.015em; line-height:1.2;}
/* (a linha do `.method-explain` saiu com o bloco, em 03/09 — ver `tela-de-produto.css`) */
.secoes-de-sempre .faq-item summary, #view-product .faq-item summary{font-family:var(--fonte-interface); font-size:var(--c-corpo); font-weight:600; letter-spacing:-0.005em;}
/* ==========================================================================
OS TÍTULOS DO FECHO SÃO OS DA TELA DE INÍCIO — 04/09/2026
==========================================================================
O `tela-de-produto.css` abre com uma regra GUARDA-CHUVA:
#view-product h1, #view-product h2, #view-product h3, #view-product h4
{ font-family:…; font-weight:600; letter-spacing:-0.015em; line-height:1.18; }
Um id mais um tipo (1-0-1) ganha de `.hero h1` (0-1-1) e de `.method h2` — então TODO
título dentro da tela de produto saía com a entrelinha e o espacejamento da página de
venda, inclusive os das seções COPIADAS da tela de início, no pé da página.
MEDIDO em 1365x640, o mesmo título nas duas telas: 198 px de altura na tela de início
contra 189 no clone (entrelinha 1,24 contra 1,18). Nove píxeis não chamam atenção
sozinhos — o que chama é a soma, e esta foi a QUINTA regra da tela de venda encontrada
hoje vazando no fecho: o botão (sete propriedades diferentes), a sombra dele, o
sobretítulo da Metodologia (dourado onde devia ser azul), a frase da capa (colada no
título, sem os 20 px de vão) e agora a entrelinha dos títulos.
OS NÚMEROS SÃO OS DAS REGRAS DE ORIGEM — `.hero h1` no `pagina-inicial-e-formulario.css`
e a base do `tokens-e-base.css`. Cópia de valor é como duas coisas divergem, e é por isso
que a régua "as seções de fecho medem o mesmo que as da tela de início" passou a comparar
também o TAMANHO RENDERIZADO destes títulos: se a tela de início mudar e esta linha não,
a conferência acusa antes de alguém ver. */
.secoes-de-sempre .hero h1,
#view-product .secoes-de-sempre .hero h1{line-height:1.24; letter-spacing:-0.018em;}
/* E A FRASE DA CAPA CLONADA — mesmo dia, mesma família. O `tela-de-produto.css` veste a
frase da capa DELE com `margin:0 auto 4px` e entrelinha 1,7; a capa da tela de início usa
`margin:20px 0 0` e 1,65. Sem esta linha, o clone perdia os 20 px de vão entre o título e
a frase — ela ficava colada no título — e ganhava 40 px de largura a mais.
Os números são os do `.hero p.lede` no `pagina-inicial-e-formulario.css`, e a régua "as
seções de fecho medem o mesmo que as da tela de início" compara os dois lados a cada
execução: se lá mudar e aqui não, ela acusa antes de alguém ver. */
.secoes-de-sempre .hero p.lede,
#view-product .secoes-de-sempre .hero p.lede{margin:20px 0 0; max-width:460px; line-height:1.65;}
/* AQUI MORAVA `[id^="view-"] > .secoes-de-sempre{padding-inline:24px}` — tirado em
05/09/2026, e o respiro que ele dava foi para o `.wrap` de dentro de cada seção, umas
oitenta linhas acima.
A REGRA ESTAVA CERTA NO QUE QUERIA E ERRADA NO ONDE. Ela nasceu em 03/09 para que a caixa
branca das perguntas não encostasse nas bordas do telefone, e isso continua valendo. Só que
o `.secoes-de-sempre` é o contêiner das seções que DESENHAM O PRÓPRIO FUNDO, e respiro no
contêiner encolhe o fundo junto: a faixa de arte e o azul paravam 24 px antes da borda, e
dentro de uma `.wrap` paravam no teto de 1.080 px, com 143 px de creme de cada lado numa
janela de 1.365.
AGORA TODAS AS CINCO TELAS SÃO IGUAIS NISTO, ancoradas onde forem: o contêiner é
transparente e da largura da janela, o fundo de cada seção vai de ponta a ponta, e o
respiro é do texto, dentro da seção. Não é preciso nenhuma regra que pergunte onde a tela
ancorou o clone — que era o que esta fazia, e era o sintoma de o respiro estar na peça
errada. */
/* E A COLUNA É A MESMA NAS QUATRO — 640 px, centrada.
No celular isso não muda nada (a tela é mais estreita que o teto), e é no MONITOR que ele
existe: medido em 1440 px antes desta linha, a caixa das perguntas saía com 592 px na
tela do produto, 1016 na vitrine da Eletiva e 1392 no parto programado e na página de um
objetivo — porque cada tela ancorava as seções numa caixa de largura diferente, e duas
delas em caixa nenhuma. Um cartão de perguntas de mil e quatrocentos píxeis não é o mesmo
componente numa tela mais larga: é outro desenho.
640 é a coluna da página de produto, que é a mais estreita das quatro e a que manda —
subir as outras três até ela é possível; descer a dela seria estreitar uma página de
venda inteira para caber um bloco. */
/* O TETO É NO CONTEÚDO, e não no invólucro, e isso foi a segunda tentativa: com o teto na
`.secoes-de-sempre`, a vitrine da Eletiva ainda saía 48 px mais larga que as outras três,
porque ela ancora dentro de um `.wrap` que já tem margem e as outras não. Teto no invólucro
soma com a margem de quem o hospeda; teto no cartão, não. Medido em 1440 px: 592 nas
quatro, com o número saindo do mesmo lugar. */
.secoes-de-sempre .faq-list,
.secoes-de-sempre .method-grid{max-width:592px; margin-inline:auto;}
/* E A PROMESSA CLONADA FICOU DE FORA DESSE TETO — 03/09/2026, e é o mesmo defeito que as
três linhas acima descrevem, na quarta peça do fecho.
MEDIDO NA TELA DO PARTO PROGRAMADO, a 1280 px: o bloco "O céu no exato momento do seu
nascimento revela…" saía com 1232 px de linha. Mil duzentos e trinta e dois píxeis é
quase o dobro do que um olho lê sem se perder no retorno, e ali é justamente a frase que
convida a gerar o mapa — a última coisa que a pessoa lê antes de decidir.
POR QUE ELE ESCAPOU: a `.faq-list` e a `.method-grid` são caixas DENTRO do `.wrap`, então
um teto nelas não briga com nada. Na promessa, a caixa do texto é o PRÓPRIO `.wrap`
(``), e é ele que a regra de cima zera para a cópia não
somar respiro sobre respiro. Um teto na mesma caixa que acabou de ser zerada precisa vir
DEPOIS e com o mesmo peso — daí este bloco estar no fim do arquivo e ter as duas linhas,
com e sem o `#view-product` na frente, exatamente como o par que ele corrige.
E 592 PX É O MESMO NÚMERO das outras três, de propósito: as quatro peças do fecho são
vizinhas na mesma tela, e o desalinho de larguras diferentes para o mesmo papel é o que
aquele bloco chama de "o tipo de coisa que ninguém sabe nomear e todo mundo sente". */
.secoes-de-sempre .hero .hero-content,
#view-product .secoes-de-sempre .hero .hero-content{max-width:592px; margin-inline:auto;}
/* ==========================================================================
AS QUATRO PEÇAS DO FECHO NUMA TELA LARGA — 03/09/2026, de noite
==========================================================================
Queixa da dona, com a foto do tablet deitado: "a Metodologia está CRUA, sem as mudanças
de design que fizemos — ou seja, a página de produto também precisa atualizar esses
detalhes".
ELA ESTÁ APONTANDO PARA UMA PREMISSA QUE EU MESMO DERRUBEI HORAS ANTES. Tudo o que este
arquivo escreve acima é a adaptação das quatro peças a uma COLUNA ESTREITA — sem faixa
de arte, sem fundo próprio, com o cartão travado em 592 px. As razões continuam certas no
telefone. O que mudou é que, na tela larga, a coluna estreita não existe mais: a página
de produto passou a 1.080 px hoje, e as quatro peças ocupam a largura inteira dela.
MEDIDO NUMA JANELA DE 1280, ANTES DESTE BLOCO — e não é só a página de produto:
tela a faixa do fecho o cartão dentro dela
produto 1.016 px 592 px
parto programado 1.280 px 592 px
vitrine da Eletiva 1.016 px 592 px
objetivo eletivo 1.280 px 592 px
Ou seja: um cartão do tamanho de um telefone no meio de uma faixa de mil píxeis, com
212 px de creme vazio de cada lado, sem a fotografia que abre a seção e sem o chão que a
segura. É o que a palavra "crua" descreve — e as quatro estão iguais no defeito, que é a
única coisa boa desta medida.
O 592 SAÍA DA COLUNA DE 640 DA PÁGINA DE PRODUTO ("a mais estreita das quatro e a que
manda", escrito acima). Com ela em 1.080, quem passa a mandar é a largura de leitura da
tela de início: 760 px, o `max-width` da `.method-grid` de lá. As quatro continuam com o
MESMO número entre si, que é a regra que aquele bloco defende — só que agora é o número
certo para a tela em que elas estão.
A FAIXA DE ARTE VOLTA, e o argumento que a tirou é o que a traz: "ela é a abertura de uma
seção que ocupa a largura da tela; dentro da coluna estreita de uma página de venda, a
Metodologia é um bloco entre outros". Acima de 1000 px a seção VOLTOU a ocupar a largura
da tela. Abaixo, nada disto acontece e a adaptação de cima vale palavra por palavra.
O CHÃO DA METODOLOGIA É A COR DA LEITURA, e não o azul. O azul da tela de início é a cor
média da fotografia do relógio e está preso a `#view-catalog` de propósito — numa página
violeta, um bloco azul seria o defeito oposto. Aqui o chão sai de `--capa-funda`, o tom
fundo da mesma capa que já tinge o botão, o sobretítulo e os números da página. Quem não
tem capa (a vitrine da Eletiva e o objetivo eletivo) cai no azul, que é o padrão da seção.
OS SELETORES LEVAM O ID DA TELA, e isto não é preciosismo — é a mesma armadilha que o
`metodo-testemunhos-faq-e-rodape.css` já documenta na faixa dos depoimentos. Duas regras
da página de produto ganham de qualquer seletor de classe:
· `#view-product section{padding:36px 0}` (um id e um tipo) vence `.secoes-de-sempre
.method` (duas classes). Sem o prefixo, o respiro da faixa não entra — MEDIDO na
primeira tentativa deste bloco: `36px 0px` computado, com a fotografia atravessada
por cima do título e do cartão;
· `#view-product .wrap{position:static}` vence `.method > .wrap{position:relative}`, e
é ESSA a causa do defeito de 02/09 que tirou a faixa daqui: `z-index` não faz nada
num elemento `static`, então a faixa (`position:absolute`) passa a ser pintada DEPOIS
do cartão. A faixa só pode voltar com a linha do `position` junto.
E A SEÇÃO ESTOURA O RESPIRO DE QUEM A HOSPEDA, pelo mesmo motivo e com a mesma medida da
`.prova-faixa`: um chão colorido que parasse 32 px antes da borda seria mais um cartão, e
não o chão de uma seção. São −32 px em quem ancora dentro de um `.wrap` (produto e
vitrine da Eletiva) e −24 px em quem ancora direto na tela (parto e objetivo eletivo), que
são exatamente os dois respiros escritos acima neste arquivo. */
@media (min-width:1000px){
/* CADA UMA COM A LARGURA QUE ELA TEM NA TELA DE INÍCIO — corrigido em 04/09/2026, com
as fotos do tablet junto. Os três estavam presos em 760 px, que era a medida da página
de produto ANTES de ela virar 1.080 em 03/09. Depois disso a faixa alargou e o miolo
não, e o clone passou a ser mais alto que o original: numa janela de 1365x640 a lista
de perguntas ficava com 760 px (duas colunas de 380, quebrando quase toda linha em
duas) contra 980 na tela de início — 539 px de altura contra 421. A capa clonada,
presa em 760, dava 760 px de altura numa janela de 640: uma tela inteira e mais um
terço, só para a capa.
Os números não são novos: são os MESMOS que a tela de início já usa (980 para a lista,
1.080 para o miolo da capa, 760 para a grade do método). "O mesmo bloco" só é verdade
quando as medidas também são as mesmas. */
/* A CAPA CLONADA VOLTA A SER DE DUAS COLUNAS — 04/09/2026, com as fotos do tablet junto.
O `pagina-inicial-e-formulario.css` monta a capa em duas colunas (o disco de um lado, o
título, a frase e o botão do outro) e a nega ao clone com um `:not(.de-sempre)`. O
motivo está escrito lá e ERA verdade: "lá ela mora numa coluna estreita de página de
venda, duas colunas dentro daquela coluna seriam duas tiras de nada".
Deixou de ser verdade em 03/09, quando a página de produto passou de 640 para 1.080 px
— a mesma virada que deixou as larguras de 760 aqui em cima para trás. Medido agora, na
janela deitada de 1365: o miolo da capa clonada tem 1.016 px na tela de produto e 1.080
nas telas do parto e da Eletiva. Quarenta por cento disso é um disco de 406 px, que é
exatamente o da tela de início.
O QUE A PILHA CUSTAVA: 713 px de altura numa janela de 640 (contra 592 da tela de
início), com o disco empurrando o texto para fora da tela e o botão vermelho esticado
nos 1.016 px de largura — uma barra atravessando a página inteira. Era isso na foto.
ABAIXO DE 1000 PX NADA MUDA: aí o clone tem 592 px de miolo, e a ressalva original
volta a valer inteira. */
.secoes-de-sempre .hero .hero-content,
#view-product .secoes-de-sempre .hero .hero-content{
display:grid;
grid-template-columns:minmax(0, 40%) minmax(0, 1fr);
grid-template-rows:1fr auto auto auto 1fr;
column-gap:clamp(32px, 5vw, 64px);
}
.secoes-de-sempre .hero .hero-emblem,
#view-product .secoes-de-sempre .hero .hero-emblem{
grid-column:1; grid-row:1 / span 5;
align-self:center; justify-self:center;
margin-bottom:0;
--roda:min(100%, 460px);
}
.secoes-de-sempre .hero h1,
#view-product .secoes-de-sempre .hero h1{grid-column:2; grid-row:2;}
/* O `justify-self:start` É NECESSÁRIO AQUI e não na tela de início: lá o clone não existe
e a frase já nasce na margem; aqui ela herda um `margin-inline:auto` do arranjo estreito
do clone e, com 520 px numa coluna de 546, ficava CENTRADA — 13 px à direita do título e
do botão. Treze píxeis não parecem nada até a pessoa ver as três peças e uma delas fora
de esquadro. */
.secoes-de-sempre .hero p.lede,
#view-product .secoes-de-sempre .hero p.lede{grid-column:2; grid-row:3; max-width:520px;
justify-self:start; margin-inline:0;}
.secoes-de-sempre .hero .btn-primary,
#view-product .secoes-de-sempre .hero .btn-primary{grid-column:2; grid-row:4; justify-self:start; width:auto;}
.secoes-de-sempre .method-grid{max-width:760px;}
.secoes-de-sempre .faq-list{max-width:980px;}
.secoes-de-sempre .hero .hero-content,
#view-product .secoes-de-sempre .hero .hero-content{max-width:1080px;}
/* O CARTÃO VOLTA AO RESPIRO DA TELA DE INÍCIO. Vinte e oito por vinte e quatro é medida
de cartão de telefone; num cartão de 760 px ela deixa a linha encostada na borda, e é
metade do que faz o bloco parecer acabado em vez de cru. */
.secoes-de-sempre .method-content{padding:52px 44px;}
.secoes-de-sempre .method-grid{border-radius:var(--radius-xl);}
.secoes-de-sempre .method-lede{font-size:var(--c-lede); margin-bottom:34px;}
.secoes-de-sempre .method-feature{gap:22px; margin-bottom:30px;}
.secoes-de-sempre .feature-num{font-size:26px; width:36px;}
.secoes-de-sempre .method-divider{margin:22px 0 28px;}
.secoes-de-sempre .method-credibility{margin-top:32px;}
.secoes-de-sempre .method-more-inner{padding-top:26px;}
/* A FAIXA DE ARTE, O RESPIRO QUE ELA PEDE E O CHÃO DA METODOLOGIA SAÍRAM DAQUI EM
07/09/2026 e valem agora em toda largura — o porquê está no bloco longo lá em cima, que
começa em "A FAIXA DE ARTE E O CHÃO DA METODOLOGIA NÃO DEPENDEM DA LARGURA". O que
ficou nesta chave é só o que a largura DECIDE mesmo: as duas colunas da capa clonada e
os respiros generosos do cartão. */
/* AQUI HAVIA UM `margin-inline` NEGATIVO, E ELE ERA MEIO CONSERTO — tirado em 05/09/2026.
A Metodologia e as Perguntas frequentes desenham o próprio fundo, e fundo de seção vai
de ponta a ponta da janela, como vai na tela de início. Dois dos cinco clones moravam
dentro de uma `.wrap`, que tem `max-width:1080px` e 32 px de respiro; o `-32px` cancelava
o RESPIRO e não alcançava o TETO. Numa janela de 1.365 a faixa saía em 143..1223, com
143 px de creme de cada lado — a dona fotografou e descreveu certo: "é como se estivesse
seguindo uma régua só no meio limitado".
E NÃO FOI SUBSTITUÍDO POR `calc(50% - 50vw)`, que alcançaria o teto e traria a largura da
barra de rolagem junto — rolagem lateral em toda tela de computador, que é defeito pior
que o que se conserta. Os dois clones passaram a morar FORA da faixa, no HTML, que é onde
os outros três sempre estiveram; sem faixa em volta não há teto do qual escapar, e não
sobra margem negativa nenhuma para alguém herdar por engano depois. */
}
/* ==========================================================================
O APERTO DA JANELA DEITADA TAMBÉM VALE PARA OS CLONES — 04/09/2026
==========================================================================
Em 03/09 as seções de fecho ganharam um aperto para a janela deitada do tablet (1365x640):
`@media (min-width:900px) and (max-height:760px)` no `metodo-testemunhos-faq-e-rodape.css`,
que encolhe o respiro do cartão do método e o pé das duas seções. Medido e relatado como
resolvido.
SÓ QUE ELE NÃO CHEGAVA NAS PÁGINAS DE PRODUTO, que é onde a dona navega. O bloco de cima
deste arquivo mira `.secoes-de-sempre .method-content` — DUAS classes —, o aperto mira
`.method-content` — UMA. Peso maior ganha, e este arquivo ainda é colado depois. Então a
tela de início encolhia e as 32 páginas de produto ficavam do tamanho antigo.
MEDIDO NA MESMA JANELA DE 1365x640, antes desta correção:
seção tela de início página de produto
capa 592 px 760 px
Metodologia 756 913
Dúvidas 773 919
Três seções, cada uma maior que a tela inteira, numa página que a pessoa já rolou por
quatro telas para chegar. É a mesma queixa de 03/09 ("a seção metodologia e dúvidas ainda
está muito grande, desproporcional para versão tablet") respondida pela metade: eu medi o
conserto na tela de início e não na tela onde ela estava olhando.
A LIÇÃO, e ela é a mesma do `paths` que não alcança: CONSERTO MEDIDO NUMA TELA SÓ é
conserto de uma tela só. Quando um bloco existe em duas telas, as duas se medem. */
@media (min-width:900px) and (max-height:760px){
.secoes-de-sempre .method-content,
#view-product .secoes-de-sempre .method-content{padding:30px 38px;}
.secoes-de-sempre .method-lede,
#view-product .secoes-de-sempre .method-lede{margin-bottom:20px;}
.secoes-de-sempre .method-feature,
#view-product .secoes-de-sempre .method-feature{gap:16px; margin-bottom:0;}
.secoes-de-sempre .method-divider,
#view-product .secoes-de-sempre .method-divider{margin:14px 0 18px;}
.secoes-de-sempre .method-credibility,
#view-product .secoes-de-sempre .method-credibility{margin-top:20px;}
.secoes-de-sempre .method-more-inner,
#view-product .secoes-de-sempre .method-more-inner{padding-top:16px;}
/* E O TÍTULO. O aperto escreve `.method h2` e o clone tinha 32 px contra os 20 da tela de
início na MESMA janela deitada — o mesmo título, 60% maior de um lado.
SÃO TRÊS IDS PORQUE SÃO TRÊS GUARDA-CHUVAS. Cada tela de venda abre com uma regra que
veste TODO título dela (`#view-product h1..h4` no `tela-de-produto.css`;
`#view-eletiva-objetivo h2, #view-parto h2` no `eletiva-o-objetivo.css`), e um id mais
um tipo ganha de qualquer seletor de classe — inclusive nos títulos das seções COPIADAS
da tela de início. Sem os três prefixos, o aperto alcançava uma tela e não as outras:
medido em 1365x640, o título da Metodologia dava 23 px de altura na tela de início e 37
no parto e na Eletiva. */
.secoes-de-sempre .method h2,
#view-product .secoes-de-sempre .method h2,
#view-parto .secoes-de-sempre .method h2,
#view-eletiva-objetivo .secoes-de-sempre .method h2{font-size:var(--t-bloco);}
.secoes-de-sempre .method,
#view-product .secoes-de-sempre .method{padding:calc(var(--faixa-de-arte) + 18px) 0 48px;}
.secoes-de-sempre .faq,
#view-product .secoes-de-sempre .faq{padding:calc(var(--faixa-de-arte) + 10px) 0 52px;}
/* E AS PERGUNTAS. O aperto escreve `.faq-item summary` (peso 0-1-1) e o
`tela-de-produto.css` escreve `#view-product .faq-item summary` (1-2-1), que ganha —
então das quatro telas que têm este bloco, três encolhiam e só a de produto ficava com
o respiro grande. Medido em 1365x640: 19 px de respiro contra os 14 das outras, sete
perguntas, 40 px de altura a mais na lista. */
#view-product .faq-item summary{padding:14px 4px;}
#view-product .faq-a{padding-bottom:14px;}
.secoes-de-sempre .faq-item p,
#view-product .secoes-de-sempre .faq-item p{padding-bottom:14px;}
}
/* O TÍTULO DA COLEÇÃO CRESCEU E O ESPAÇO ENTRE ELAS TAMBÉM — 26/08/2026.
Com o cartão do meio à frente e os vizinhos encolhidos, uma fileira ficou visualmente
mais alta e mais "cheia"; o título de 23 px sumia entre elas, e 44 px de respiro
deixavam duas coleções parecendo uma só, comprida. São 32 coleções na home: onde
termina uma e começa a outra precisa se ver sem esforço. */
/* O NÚMERO CAIU DE 76 PARA 34 EM 01/09/2026, E A DISTÂNCIA NA TELA NÃO MUDOU. No mesmo
dia a `.poster-row` ganhou 42 px de respiro embaixo para parar de decepar a sombra do
cartão em destaque (a conta está lá, em `vitrine-e-carrossel.css`), e esse respiro cai
JUSTAMENTE entre uma coleção e a seguinte — somado aos 76 daqui, o vão entre duas
prateleiras passaria a 148 px sem ninguém ter pedido mais ar.
O vão que se vê é `padding-bottom` da fileira + esta margem, e ele continua sendo 106:
eram 30+76, agora são 72+34. MEXER NUM PEDE REFAZER O OUTRO — os dois desenham o mesmo
espaço, e só um deles fica dentro do recorte que corta a sombra. */
.catalog-group{margin-bottom:34px;}
.catalog-group:last-child{margin-bottom:0;}
.group-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 0 14px;}
.group-head h3{font-family:var(--fonte-titulo); font-size:var(--t-secao); line-height:1.15; letter-spacing:-0.015em; color:var(--ink); margin:0; font-weight:600;}
.group-head p{font-size:var(--c-corpo); color:var(--muted); margin:7px 0 0; line-height:1.5;}
/* O `font-size` do `.group-head h3` saiu deste bloco em 01/09/2026: o `--t-secao` é um
`clamp`, e ele já entrega 26 px no celular e 32 no computador. Dois lugares mandando
no mesmo tamanho é como um deles envelhece sozinho. */
@media(max-width:640px){ .group-head p{font-size:var(--c-apoio);} .catalog-group{margin-bottom:16px;} }
/* AS CINCO REGRAS DA `.nota-shelly` SAÍRAM DAQUI — 08/09/2026, com a citação: a dona
pediu "Remove citação" na página do produto, e o `#p-nota` deixou de existir. Regra de
estilo sem elemento na tela é a poeira mais fácil de acumular neste projeto — ninguém
procura o que já não aparece. */
/* A FILA DE CURADORIA. Estilo curto de propósito: é tela de trabalho de uma pessoa só,
e cada regra aqui é uma regra a mais para envelhecer. */
#view-admin .adm-mu-form{display:flex; flex-direction:column; gap:10px; margin:14px 0 18px;}
#view-admin .adm-mu-form label{display:flex; flex-direction:column; gap:4px; font-size:var(--c-nota); font-weight:600; color:var(--brass-dark,#7E5A28); flex:1; min-width:150px;}
#view-admin .adm-mu-form input, #view-admin .adm-mu-form select, #view-admin .adm-mu-form textarea{
font:inherit; font-size:14px; font-weight:400; color:var(--ink,#241D12);
padding:9px 11px; border:1px solid var(--border,#E7DCBE); border-radius:var(--radius-sm,8px); background:#fff;
}
#view-admin .adm-mu-form textarea{resize:vertical;}
#view-admin .adm-mu-linha{display:flex; gap:10px; flex-wrap:wrap;}
#view-admin .adm-mu-check{flex-direction:row !important; align-items:center; gap:7px; flex:none; align-self:flex-end; padding-bottom:9px;}
#view-admin .adm-mu-acoes{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
#view-admin .adm-mu-acoes button{padding:11px 20px; font-size:var(--c-apoio); cursor:pointer;}
#view-admin .adm-mu-aviso{font-size:var(--c-apoio); color:var(--rust,#9A3B12);}
#view-admin .adm-mu-item{display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-top:1px solid var(--border-soft,#F0E9D6); font-size:var(--c-apoio);}
#view-admin .adm-mu-item b{display:block; color:var(--ink,#241D12);}
#view-admin .adm-mu-item small{color:var(--muted,#8B8172);}
#view-admin .adm-mu-selo{flex:none; font-size:var(--c-etiqueta); letter-spacing:0.08em; text-transform:uppercase; font-weight:700; padding:3px 8px; border-radius:999px; background:var(--brass-light,#F1E4C8); color:var(--brass-dark,#7E5A28);}
#view-admin .adm-mu-selo.e-publicado{background:#DFF0DA; color:#3B6B2C;}
#view-admin .adm-mu-selo.e-descartado{background:#EFEAE0; color:#8B8172;}
#view-admin .adm-mu-item button{flex:none; font:inherit; font-size:var(--c-nota); padding:5px 10px; cursor:pointer; border:1px solid var(--border,#E7DCBE); border-radius:var(--radius-sm,8px); background:#fff; color:var(--ink-soft,#423C33);}
#view-horoscope .hor-wrap{max-width:680px; margin:0 auto;}
/* textura de pergaminho + vinheta — mesma linguagem visual aprovada na prévia */
#view-horoscope{position:relative;}
#view-horoscope::before{
content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.5; mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,
");
}
#view-horoscope::after{
content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
background:radial-gradient(ellipse at center, rgba(248,243,231,0) 55%, rgba(110,78,35,0.14) 100%);
}
#view-horoscope > *{position:relative; z-index:1;}
#view-horoscope .section-head{margin:38px auto 4px;}
#view-horoscope .hor-eyebrow{
display:flex; align-items:center; justify-content:center; gap:14px;
font-size:var(--t-bloco); font-weight:600; letter-spacing:0.04em; color:var(--brass-dark,#7E5A28);
font-family:var(--fonte-titulo); text-transform:none;
}
#view-horoscope .hor-periodo-pill{text-align:center; font-size:var(--c-nota); font-weight:600; color:var(--brass-dark,#7E5A28); margin:0 0 26px;}
#view-horoscope .hor-signos-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-bottom:24px; justify-items:center;}
/* QUATRO COLUNAS, e não seis — 31/08/2026, a pedido de aumentar os botões. Com seis,
cada botão ficava com menos de 90 px numa tela de 560, e a aquarela dentro dele
sumia. Quatro dá ao desenho o espaço que ele veio ocupar. */
@media (min-width:560px){ #view-horoscope .hor-signos-grid{grid-template-columns:repeat(4,1fr); gap:16px;} }
#view-horoscope .hor-signo-btn{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
width:100%; max-width:136px; aspect-ratio:1/1; padding:6px; border-radius:16px; cursor:pointer;
background:rgba(255,255,255,0.45); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
border:1px solid rgba(171,124,59,0.22); box-shadow:0 4px 12px rgba(110,78,35,0.06);
transition:transform 140ms ease, border-color 140ms ease, background 140ms ease;
}
#view-horoscope .hor-signo-btn:hover{border-color:#D8C79A; transform:translateY(-1px);}
#view-horoscope .hor-signo-btn.active{
border-color:#C9A227; background:linear-gradient(180deg, rgba(233,207,140,0.35), rgba(233,207,140,0.18));
box-shadow:0 0 0 1px #C9A227, 0 8px 22px rgba(201,162,39,0.28);
}
/* A AQUARELA NO LUGAR DO GLIFO — 31/08/2026.
A imagem já vem recortada do fundo branco (alfa no WebP), então ela pousa direto
sobre o pergaminho da aba, sem caixa e sem moldura.
A CAIXA É A MESMA PARA AS DOZE (92x76) e o `object-fit:contain` acomoda cada uma
dentro dela. As proporções variam de verdade — medido: 1,06 no virgem, 1,28 no touro
—, então sem `contain` alguma sairia esticada, e sem caixa comum elas não ficariam
na mesma linha de base. Fixar as duas medidas aqui é também o que reserva o espaço:
por isso a tag
no `a-citacao-da-aba-lua.js` não traz `width`/`height`. */
#view-horoscope .hor-signo-arte{
width:92px; height:76px; object-fit:contain;
filter:drop-shadow(0 1px 2px rgba(80,58,26,0.14));
transition:transform 140ms var(--ease-soft,ease);
}
#view-horoscope .hor-signo-btn:hover .hor-signo-arte{transform:scale(1.06);}
#view-horoscope .hor-signo-btn.active .hor-signo-arte{filter:drop-shadow(0 2px 4px rgba(120,86,20,0.28));}
@media (prefers-reduced-motion: reduce){
#view-horoscope .hor-signo-arte{transition:none;}
#view-horoscope .hor-signo-btn:hover .hor-signo-arte{transform:none;}
}
/* O `.hor-signo-glifo` FOI APAGADO DAQUI — 31/08/2026, junto com a troca acima.
Ele existia só para a grade desta aba, e a grade não usa mais glifo. Conferido com
`grep -rn hor-signo-glifo app/ index.html`: zero ocorrências depois da troca.
Regra de CSS para classe que ninguém escreve é peso morto que a próxima pessoa lê
achando que significa alguma coisa. */
#view-horoscope .hor-signo-nome{font-size:var(--c-nota); color:var(--ink-soft,#423C33); text-align:center;}
/* O QUE SAIU DAQUI EM 31/08/2026, junto com o cartão de trânsitos: as regras do
`.hor-premium-card`, do `.hor-pessoal-card` (morta desde que aquele outro cartão
saiu antes), da `.prox` que listava os trânsitos, e das `.hor-tabs`/`.hor-tab`.
Conferido classe por classe com grep no `index.html` e no `app/`: ZERO ocorrências
de cada uma. CSS de classe que ninguém escreve não é inofensivo — é a próxima
pessoa lendo uma regra e achando que ela vale para alguma tela.
E o montador do visual pegou a primeira tentativa desta limpeza, feita linha a
linha: ela deixou chaves órfãs de blocos de várias linhas. Foi por blocos. */
/* A CAPA DO SIGNO ESCOLHIDO — 31/08/2026.
A mesma arte da grade, maior, abrindo a leitura. `object-fit:contain` pelo mesmo
motivo da grade: as doze não têm a mesma proporção (1,06 no virgem, 1,28 no touro),
e um quadro comum sem `contain` esticaria alguma.
A altura é fixa para a leitura não pular quando a imagem chega — e é por isso que
a tag
não precisa de `width`/`height`. */
#view-horoscope .hor-signo-capa{
display:flex; flex-direction:column; align-items:center; gap:6px; margin:0 0 18px;
animation:fadeInUp 420ms var(--ease-soft, ease) both;
}
#view-horoscope .hor-signo-capa-arte{
width:100%; max-width:190px; height:150px; object-fit:contain;
filter:drop-shadow(0 3px 8px rgba(80,58,26,0.18));
}
#view-horoscope .hor-signo-capa-nome{
font-family:var(--fonte-titulo); font-size:var(--t-cartao); font-weight:600; letter-spacing:-0.01em;
color:var(--ink,#1B160F);
}
@media (prefers-reduced-motion: reduce){
#view-horoscope .hor-signo-capa{animation:none;}
}
#view-horoscope .hor-loading, #view-horoscope .hor-vazio{text-align:center; color:var(--muted,#8B8172); padding:20px 0;}
#view-horoscope .hor-login-discreto{text-align:center; margin:22px 12px 0; padding:0;}
#view-horoscope .hor-login-discreto p{font-size:var(--c-micro); color:#8A7C63; line-height:1.5; white-space:nowrap;}
/* O CONVITE DO APP QUEBRA LINHA — 10/09/2026. O `nowrap` acima nasceu para a linha
de cima, que é curta e cabe inteira num iPhone; a frase que convida a instalar o
app é uma frase de verdade, e com `nowrap` ela empurrava a página inteira para o
lado — rolagem horizontal num celular, que é o defeito que mais se sente e menos
se vê em captura de tela. Aqui ela volta a quebrar, e a largura em `ch` é o que a
impede de virar uma linha de texto de ponta a ponta do tablet. */
#view-horoscope #hor-cta-app{white-space:normal; max-width:38ch; margin:0 auto; text-wrap:pretty;}
#view-horoscope .hor-login-discreto a{color:#8C6425; font-weight:600; text-decoration:underline; text-decoration-color:rgba(140,100,37,0.35); text-underline-offset:3px;}
#view-horoscope .hor-data{font-size:var(--c-nota); letter-spacing:0.1em; text-transform:uppercase; color:var(--brass-dark,#7E5A28); font-weight:700; text-align:center; margin-bottom:8px;}
/* A MANCHETE É SERIFADA — 11/09/2026, pedido da dona ("título de resumo horóscopo p
signos em serif").
ELA É O TÍTULO DA LEITURA, e é por isso que o pedido está certo e não é gosto: a
coluna desta tela é arte do signo → nome do signo → etiqueta do período → MANCHETE →
texto. O nome do signo logo acima já sai na Fraunces (`hor-signo-capa-nome`), e a
manchete saía na fonte de interface — ou seja, a peça MAIOR e mais central das cinco
era a única vestida como legenda. Numa tela em que tudo o mais é editorial, isso lê
como texto de sistema no meio de uma revista.
O `letter-spacing` VEM JUNTO porque a serifa desta casa pede: é o mesmo par que o
`hor-signo-capa-nome` usa duas regras acima, e escrever a família sem ele deixaria
dois títulos serifados com espaçamento diferente na mesma coluna.
O TAMANHO NÃO MUDA — continua o degrau `--t-bloco` da escala. O pedido era de fonte,
e trocar o degrau junto seria mudar o que ninguém pediu. */
#view-horoscope .hor-manchete{
font-family:var(--fonte-titulo); font-weight:600; letter-spacing:-0.01em;
color:var(--ink,#1B160F);
font-size:var(--t-bloco); line-height:1.35; text-align:center; margin:0 auto 22px; max-width:520px;
}
#view-horoscope .hor-texto{background:var(--card,#fff); border:1px solid var(--border,#E7DCBE); border-radius:var(--radius-lg,14px); padding:26px; margin-bottom:24px; box-shadow:var(--shadow-2, 0 8px 22px rgba(36,29,18,0.09)); animation:fadeIn var(--dur-slow,.4s) ease both;}
#view-horoscope .hor-texto p{font-size:var(--c-corpo); line-height:1.75; color:var(--ink-soft,#423C33); margin:0 0 14px;}
#view-horoscope .hor-texto p:last-child{margin-bottom:0;}
/* OS DOZE LINKS PARA AS PÁGINAS DOS SIGNOS — 10/09/2026.
O bloco é escrito no build (ver `escrever_no_hub`), e existe só no `/horoscopo/`.
Ele é uma NOTA, e não uma seção: quem está aqui já tem a grade dos doze acima, e
esta linha serve a outra coisa — levar embora um endereço que se guarda e se manda
para alguém. Por isso o degrau `--c-nota` e nenhum número solto. */
/* O `padding-inline` NÃO É ENFEITE — 10/09/2026, achado pelo Crivo.
Este `
` é irmão da `.hor-wrap`, e não filho dela, então não herda o respiro de
24 px que o resto da tela usa. Sem esta linha o texto ia de 3 a 387 px numa tela de
390: encostado nos dois cantos, o único bloco da tela a fazer isso. É o mesmo
defeito de 04/09 que gerou a régua do prumo — "as duas pontas respiram igual da
borda". Com ela: 32 a 358, alinhado com o convite logo acima. */
#view-horoscope .hor-paginas-dos-signos{margin:26px auto 0; max-width:560px; padding-inline:24px; box-sizing:border-box; text-align:center;}
#view-horoscope .hor-paginas-dos-signos p{font-size:var(--c-nota); line-height:1.85; color:var(--muted,#6F6659); margin:0; text-wrap:pretty;}
#view-horoscope .hor-paginas-dos-signos a{color:var(--brass-dark,#7E5A28); font-weight:600; text-decoration:underline; text-decoration-color:rgba(126,90,40,0.3); text-underline-offset:3px; white-space:nowrap;}
#view-horoscope .hor-paginas-dos-signos a:hover{text-decoration-color:currentColor;}
/* ==========================================================================
A ABA DO HORÓSCOPO NO TABLET E NO COMPUTADOR — 12/09/2026
==========================================================================
Pedido da dona, com a foto do tablet deitado e a frase inteira: "não está em padrão
de um site para tablet/computador; parece um improviso do telefone para desktop".
E ERA. Medido antes, numa janela de 1365: a tela inteira vivia numa tira de 680 px no
meio, com 342 px de creme vazio de cada lado, e as quatro peças empilhadas na ordem do
telefone — título, os doze signos (440 px de grade), a arte do signo escolhido, e só
então a leitura. Para trocar de signo era preciso rolar a leitura inteira de volta.
O DESENHO NOVO É O DA CASA, e não um arranjo inventado aqui: o que se ESCOLHE de um
lado, o que se LÊ do outro — a mesma divisão que as telas de produto usam desde 03/09
e que as duas eletivas ganharam em 06/09. Num site de verdade a escolha não some
quando se lê; ela fica ao lado.
A COLUNA DA ESCOLHA TEM TRÊS SIGNOS POR LINHA, e o número sai da conta: a faixa do
site é 1.080, a trilha da escolha fica com 340 e a leitura com o resto. Em 340 px,
três cartões medem 105 cada — que é o tamanho que eles já têm no telefone, onde a
dona os aprovou. Quatro por linha dariam 76, e a aquarela dentro deles sumiria: foi
exatamente o que o comentário de 31/08 registrou ao trocar seis colunas por quatro.
A LEITURA ATRAVESSA AS LINHAS DA ESCOLHA, e a última delas é a folga — o mesmo par
que a tela de produto usa e pela mesma razão: sem a linha de `1fr`, a altura que
sobra da leitura seria repartida entre as peças da escolha e abriria branco debaixo
de cada uma (o defeito que a dona fotografou em 05/09 naquela tela).
A GRADE SÓ ABRE ACIMA DE 1000 px — o mesmo corte das outras telas de venda, e dois
números diferentes para a mesma fronteira é como uma faixa de larguras fica sem
desenho nenhum. Abaixo disso nada muda: uma coluna, na ordem do telefone, que é a
ordem aprovada. */
@media (min-width:1000px){
#view-horoscope .hor-wrap{
max-width:1080px; padding:0 32px;
display:grid; grid-template-columns:340px minmax(0,1fr);
grid-template-rows:auto auto auto 1fr;
column-gap:56px; align-items:start;
}
/* A COLUNA DA ESCOLHA. O título deixa de ser centrado porque ele passa a ser o título
DELA, e não o da tela inteira — um sobretítulo centrado sobre uma trilha alinhada à
esquerda é o desalinho que a dona apontou na capa do produto em 04/09. */
/* O `margin:0` LATERAL NÃO É ENFEITE: a regra de cima escreve `margin:38px auto 4px`,
e margem lateral automática num item de grade encolhe a caixa e a CENTRA na célula.
O título saía com 189 px de largura, centrado sobre uma trilha alinhada à esquerda —
o mesmo desalinho que a dona apontou na capa do produto em 04/09, de outra origem. */
#view-horoscope .section-head{grid-column:1; grid-row:1; text-align:left; margin:44px 0 4px;}
#view-horoscope .hor-eyebrow{justify-content:flex-start;}
#view-horoscope .hor-periodo-pill{grid-column:1; grid-row:2; text-align:left; margin-bottom:20px;}
#view-horoscope .hor-signos-grid{grid-column:1; grid-row:3; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:0;}
/* A COLUNA DA LEITURA — e os três estados dela ocupam a MESMA célula, porque são o
mesmo lugar da tela visto em três momentos: carregando, vazio e lido. Escrever só o
`#hor-conteudo` deixaria "escolha um signo acima" caindo debaixo da trilha, na
coluna errada, para quem chega sem signo no endereço. */
#view-horoscope #hor-conteudo,
#view-horoscope .hor-loading,
#view-horoscope .hor-vazio{grid-column:2; grid-row:1 / span 4; margin-top:44px;}
/* A CAPA DO SIGNO E A LEITURA ANDAM JUNTAS NUMA LINHA SÓ. A arte sai do alto da
coluna e vira o emblema ao lado da data e da manchete — é o mesmo par "peça
centrada no que lhe cabe, texto alinhado" da capa das telas de produto. */
#view-horoscope .hor-signo-capa{
flex-direction:row; align-items:center; justify-content:flex-start; gap:18px; margin-bottom:14px;
}
#view-horoscope .hor-signo-capa-arte{width:120px; max-width:120px; height:96px;}
#view-horoscope .hor-signo-capa-nome{font-size:var(--t-secao);}
#view-horoscope .hor-data{text-align:left;}
#view-horoscope .hor-manchete{text-align:left; margin-left:0; margin-right:0; max-width:none; font-size:var(--t-bloco);}
/* A COLUNA DE TEXTO NÃO PASSA DA MEDIDA DE LEITURA. A faixa da leitura tem 644 px
aqui, e o cartão já cabe nela — o teto existe para a janela grande, onde a linha
passaria de noventa caracteres e o olho perderia o começo da linha seguinte. */
#view-horoscope .hor-texto{max-width:68ch;}
#view-horoscope .hor-login-discreto{grid-column:1 / -1; grid-row:5;}
/* A NOTA DOS DOZE ENDEREÇOS é irmã da `.hor-wrap`, e não filha: ela não entra na
grade. O que ela ganha aqui é a largura da faixa, para não ficar uma linha de 560
px perdida debaixo de uma página de 1.080. */
#view-horoscope .hor-paginas-dos-signos{max-width:1016px;}
} #view-lunar .lu-reflexao{font-style:italic; color:var(--lu-cream-dim) !important; margin-top:16px !important; border-left:2px solid var(--lu-border); padding-left:16px; font-size:var(--c-corpo) !important;}
#view-lunar .lu-reflexao-txt::before{content:"\201C";}
#view-lunar .lu-reflexao-txt::after{content:"\201D";}
#view-lunar .lu-reflexao-cred{display:block; margin-top:8px; font-style:normal; font-size:var(--c-etiqueta);
letter-spacing:0.05em; text-transform:uppercase; color:var(--lu-gold); font-weight:600;}
#view-lunar .lu-reflexao-cred .lu-cred-obra{font-size:var(--c-etiqueta);}
#view-lunar .lu-card-destaque{border-color:rgba(234,224,198,0.22); background:linear-gradient(180deg, rgba(24,24,27,0.9) 0%, rgba(12,12,14,0.94) 100%); box-shadow:0 18px 50px rgba(0,0,0,0.35), inset 0 1px 0 rgba(234,224,198,0.08);}
#view-lunar .lu-ativa-titulo{font-family:var(--fonte-titulo); font-size:var(--t-bloco); font-weight:600; letter-spacing:-0.017em; color:var(--lu-ink); margin-bottom:14px;}
#view-lunar .lu-ativa{list-style:none; margin:0 0 6px; padding:0;}
#view-lunar .lu-ativa li{display:flex; align-items:baseline; gap:10px; padding:9px 0; font-size:var(--c-corpo); color:var(--lu-soft); border-bottom:1px solid var(--lu-border-soft);}
#view-lunar .lu-ativa li:last-child{border-bottom:none;}
#view-lunar .lu-ativa li::before{content:"☽\FE0E"; color:var(--lu-cream-dim); font-size:var(--c-apoio);}
#view-lunar .lu-ativa b{color:var(--lu-cream); font-weight:600;}
#view-lunar .zg{font-family:'Noto Sans Symbols','Noto Sans Symbols 2','Segoe UI Symbol',sans-serif; color:var(--lu-cream);}
/* ===== ABA LUNAR — céu noturno azul-profundo + creme =====
Sem roxo: a paleta é azul-marinho muito escuro, branco e creme.
Gradientes suaves, mais respiro entre seções, ícones minimalistas,
partículas discretas e micro-animações. Tokens locais. */
/* O PRETO SAIU EM 31/08/2026, e isto não foi mudança de rumo: foi cumprir o que a
primeira linha deste arquivo já prometia desde que ele nasceu — "céu noturno
azul-profundo, sem roxo". Os valores é que eram preto puro.
O AZUL NÃO FOI ESCOLHIDO NO OLHO. É o lápis-lazúli medido em duas fontes que não
se conhecem: os rondéis das Très Riches Heures (c.1416) dão #2D387E, e o esmalte
do relógio da Torre dell'Orologio, em Veneza (1499), dá #293474 — quatro pontos de
diferença, porque é o mesmo mineral moído. Levado à sombra, vira o #0B1026 daqui.
O tom mais profundo da mesma prancha é #070A1E, que é o rodapé do gradiente.
E O PRETO PURO TINHA UM CUSTO QUE NÃO ERA DE GOSTO: em tela OLED de celular ele
apaga o pixel, e a borda entre o céu e a Lua ficava dura, recortada. O azul devolve
a profundidade que o desenho da Lua sempre pressupôs.
O #101A36 que estava escondido aqui embaixo, como cor de texto do botão creme,
era o azul que este arquivo queria: ele continua lá, e agora combina com o fundo. */
#view-lunar{
--lu-bg:#0B1026; --lu-bg2:#101838; --lu-navy:#0B1026;
--lu-card:rgba(20,27,54,0.82); --lu-card2:rgba(11,16,38,0.9);
--lu-border:rgba(234,224,198,0.11); --lu-border-soft:rgba(234,224,198,0.06);
--lu-ink:#F7F3E8; --lu-soft:#F2F2F2; --lu-muted:#9AA0AE;
--lu-cream:#EAE0C6; --lu-cream-dim:#C9BF9E; --lu-white:#FFFFFF;
--lu-gold:#D9C79A;
/* O BRILHO FICA NO ALTO E O RESTO É O AZUL MAIS FUNDO — e o tamanho é dito em
PIXELS, não em porcentagem, de propósito. Em porcentagem o degradê se estica pela
altura inteira da aba, e essa altura muda com o conteúdo que a Lua devolve: a
mesma tela abriria com um céu diferente em dois dias diferentes. Presos em 900 px,
o alto é sempre o mesmo e o que vem abaixo é sempre o `background-color`.
O `#070B1A` aparece duas vezes porque é a emenda: é onde o degradê termina e onde
a cor de baixo começa. Se um mudar sem o outro, nasce uma linha no meio do céu.
ESTE DEGRADÊ TEM UM GÊMEO FORA DAQUI: o cartão de compartilhar da Lua repete estas
mesmas três paradas à mão, em ``, no `os-dois-formatos-do-cartao.js` —
porque canvas não lê folha de estilo. Em 31/08 a aba trocou de cor e o cartão
ficou preto por algumas horas, exatamente por isso. Mudar as cores daqui sem mudar
as de lá traz o defeito de volta, e ele não quebra nada: só aparece na imagem que
já foi enviada.
NÃO USAR `background-attachment:fixed` AQUI. O Safari do iPhone não o suporta e
cai no `scroll` — o que traria de volta o degradê esticado que estas linhas
evitam —, e onde ele funciona custa repintura a cada rolagem, numa tela que já
tem `backdrop-filter` no cabeçalho. */
background-color: #070B1A;
background-image: radial-gradient(120% 90% at 50% 0%, #16204A 0%, #0B1026 62%, #070B1A 100%);
background-repeat: no-repeat;
background-size: 100% 900px;
color:var(--lu-soft); min-height:100vh;
}
#view-lunar header{position:sticky; top:0; z-index:50; background:rgba(11,16,38,0.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--lu-border-soft);}
#view-lunar .nav{max-width:680px;}
/* A mesma decisão do cabeçalho claro, no céu preto: sem moldura, a cor é que diz que
ali se clica. O `rgba(255,255,255,0.06)` da seta TINHA de sair junto — borda
nenhuma, mas ele continuava pintando o retângulo cinza que a moldura deixava.
O dourado daqui é o `--lu-cream`, que é o mesmo acento da Aba Lunar inteira. */
#view-lunar .nav-burger{background:transparent;}
#view-lunar .nav-burger span{background:var(--lu-cream);}
#view-lunar .nav-burger:hover span{background:var(--lu-white);}
#view-lunar .area-nav-wrap{border-bottom:1px solid var(--lu-border-soft); background:rgba(11,16,38,0.5);}
#view-lunar .area-nav a{background:transparent; border-color:var(--lu-border); color:var(--lu-soft);}
#view-lunar .area-nav a:hover{border-color:var(--lu-cream); color:var(--lu-ink); background:var(--lu-bg2);}
#view-lunar .lu-wrap{max-width:660px; margin:0 auto; padding:0 30px;}
#view-lunar h2, #view-lunar h3{color:var(--lu-ink);}
/* ===== céu do topo: a Lua ocupa quase metade da primeira tela ===== */
#view-lunar .lu-sky{
position:relative; text-align:center; padding:10px 0 34px; overflow:hidden;
background:
radial-gradient(1px 1px at 16% 28%, rgba(247,243,232,0.65), transparent),
radial-gradient(1px 1px at 74% 14%, rgba(247,243,232,0.45), transparent),
radial-gradient(1.4px 1.4px at 86% 58%, rgba(234,224,198,0.55), transparent),
radial-gradient(1px 1px at 30% 76%, rgba(247,243,232,0.35), transparent),
radial-gradient(1px 1px at 58% 40%, rgba(247,243,232,0.3), transparent),
radial-gradient(1px 1px at 8% 60%, rgba(234,224,198,0.35), transparent),
radial-gradient(1px 1px at 92% 84%, rgba(247,243,232,0.3), transparent);
}
/* partículas discretas flutuando */
#view-lunar .lu-particles{position:absolute; inset:0; pointer-events:none;}
#view-lunar .lu-particles i{
position:absolute; left:var(--x); top:var(--y); width:var(--s); height:var(--s);
border-radius:50%; background:rgba(247,243,232,0.85);
box-shadow:0 0 7px rgba(234,224,198,0.55);
animation:lu-twinkle var(--d) ease-in-out var(--dl,0s) infinite;
}
#view-lunar .lu-particles i.drift{animation:lu-twinkle var(--d) ease-in-out var(--dl,0s) infinite, lu-drift calc(var(--d) * 3.2) ease-in-out var(--dl,0s) infinite alternate;}
@keyframes lu-twinkle{0%,100%{opacity:0.15; transform:scale(0.8);} 50%{opacity:0.9; transform:scale(1);}}
@keyframes lu-drift{from{margin-top:0;} to{margin-top:-14px;}}
/* a Lua: grande, realista, com anel orbital e terminador suave */
#view-lunar .lu-moon-svg{
display:block; margin:0 auto 8px; width:min(96vw, 430px); height:auto;
filter:drop-shadow(0 0 26px rgba(247,243,232,0.10));
animation:lu-enter 1100ms var(--ease-soft) both, lu-float 9s ease-in-out 1.2s infinite;
}
@keyframes lu-enter{from{opacity:0; transform:scale(0.94) translateY(10px);} to{opacity:1; transform:scale(1) translateY(0);}}
@keyframes lu-float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);}}
/* 38px, e não os 46px que a Cormorant Garamond pedia aqui até 26/08/2026: olho maior
da Inter no mesmo corpo, então o número de pixels cai para o nome da fase continuar
do tamanho que era na tela. */
#view-lunar .lu-fase{font-family:var(--fonte-titulo); font-size:38px; font-weight:600; color:var(--lu-white); letter-spacing:-0.018em; line-height:1.1; margin-bottom:7px; animation:fadeInUp 700ms var(--ease-soft) 150ms both;}
#view-lunar .lu-signo{font-family:var(--fonte-interface); font-size:var(--t-cartao); font-weight:600; letter-spacing:0.005em; color:var(--lu-cream); animation:fadeInUp 700ms var(--ease-soft) 240ms both;}
#view-lunar .lu-signo .zg{font-size:30px; line-height:0; vertical-align:-0.16em; margin:0 2px; color:var(--lu-gold);}
#view-lunar .lu-signo b{color:var(--lu-gold); font-weight:700;}
/* ===== O MODO ECLIPSE — 28/08/2026 =====
Quando a Terra põe a Lua na sombra, o céu inteiro da aba muda de temperatura: o halo
branco em volta do disco vira cobre e o aviso aparece. É a classe `.lu-eclipsada`,
posta no `#view-lunar` pela `luPintarOEclipse` e tirada por ela quando não há eclipse.
POR QUE SÓ O HALO, e não a página toda: o cobre tem de ser o que a pessoa olha. Uma
aba inteira avermelhada faria a Lua eclipsada desaparecer dentro do próprio efeito —
que é o oposto de refletir o céu. */
#view-lunar.lu-eclipsada .lu-moon-svg{filter:drop-shadow(0 0 34px rgba(196,74,32,0.34));}
#view-lunar .lu-eclipse{
display:inline-flex; flex-direction:column; gap:3px; align-items:center;
margin-top:13px; padding:9px 18px; border-radius:99px;
border:1px solid rgba(214,106,58,0.42); background:rgba(120,36,14,0.20);
animation:fadeInUp 700ms var(--ease-soft) 340ms both;
}
#view-lunar .lu-eclipse b{
font-family:var(--fonte-interface); font-size:var(--c-nota); font-weight:700;
letter-spacing:0.13em; text-transform:uppercase; color:#F0A183;
}
#view-lunar .lu-eclipse span{font-size:var(--c-apoio); color:var(--lu-cream-dim);}
/* O ponto do anel orbital é o marcador da fase, e no eclipse ele é a única coisa
branca que sobra ao lado do disco em cobre. Fica cor de brasa junto com o resto. */
#view-lunar.lu-eclipsada #lu-ring-dot{fill:#E28A62;}
/* cartões: gradiente azul suave, borda creme quase invisível, mais respiro */
#view-lunar .lu-share-wrap{text-align:center; margin:-8px 0 28px;}
#view-lunar .lu-share{
display:inline-flex; align-items:center; gap:9px; padding:13px 24px;
border-radius:99px; border:1px solid var(--lu-border); background:rgba(234,224,198,0.05);
color:var(--lu-cream); font-size:var(--c-apoio); font-weight:600; font-family:inherit; cursor:pointer;
}
#view-lunar .lu-share:hover{background:rgba(234,224,198,0.12); border-color:var(--lu-cream);}
#view-lunar .lu-share:disabled{opacity:0.5;}
/* A escolha de formato. As duas miniaturas são um retângulo com a proporção real de
cada cartão — 9:16 e 4:5 —, porque "Stories ou Feed" é uma pergunta sobre FORMA, e
a forma se reconhece antes da palavra. */
#view-lunar .lu-share-escolha{display:flex; flex-direction:column; align-items:center; gap:12px;}
#view-lunar .lu-share-titulo{font-size:var(--c-nota); letter-spacing:0.13em; text-transform:uppercase;
color:var(--lu-gold); font-weight:700;}
#view-lunar .lu-share-opcoes{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
#view-lunar .lu-share-op{flex-direction:column; gap:8px; padding:16px 22px; min-width:118px;}
#view-lunar .lu-share-op small{display:block; font-size:var(--c-etiqueta); font-weight:500; color:var(--lu-muted);
letter-spacing:0.03em; margin-top:2px; font-variant-numeric:tabular-nums;}
#view-lunar .lu-share-forma{display:block; border:1.5px solid var(--lu-cream-dim); border-radius:4px;
background:rgba(234,224,198,0.07);}
#view-lunar .lu-forma-stories{width:24px; height:42px;}
#view-lunar .lu-forma-feed{width:34px; height:42px;}
#view-lunar .lu-share-op:hover .lu-share-forma{border-color:var(--lu-cream); background:rgba(234,224,198,0.16);}
#view-lunar .lu-share-cancelar{background:none; border:none; padding:4px 8px; cursor:pointer;
font-family:inherit; font-size:var(--c-nota); color:var(--lu-muted); text-decoration:underline;}
#view-lunar .lu-share-cancelar:hover{color:var(--lu-cream);}
#view-lunar .lu-share svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
#view-lunar .lu-card{
background:linear-gradient(180deg, rgba(30,30,34,0.72) 0%, rgba(20,20,24,0.80) 100%);
border:1px solid rgba(234,224,198,0.18); border-radius:22px; padding:36px 32px; margin-bottom:44px;
backdrop-filter:blur(14px) saturate(120%); -webkit-backdrop-filter:blur(14px) saturate(120%);
box-shadow:0 12px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
}
#view-lunar .lu-card h3{font-family:var(--fonte-titulo); font-size:var(--c-apoio); text-transform:uppercase; letter-spacing:0.13em; color:var(--lu-gold); font-weight:700; margin-bottom:24px; display:flex; align-items:center; gap:12px;}
#view-lunar .lu-card h3::after{content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--lu-border), transparent);}
/* título centralizado, sem ícone e sem a linha decorativa (que só faz
sentido puxando um título alinhado à esquerda) */
#view-lunar .lu-card h3.lu-h3-center{justify-content:center; text-align:center;}
#view-lunar .lu-card h3.lu-h3-center::after{content:none;}
#view-lunar .lu-ic{width:18px; height:18px; flex:none; stroke:var(--lu-cream); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:0.9;}
#view-lunar .lu-card p{font-family:var(--fonte-interface); font-size:var(--c-lede); line-height:1.8; color:var(--lu-soft); margin:0;}
#view-lunar .lu-reflect{max-width:440px; margin:0 auto 40px; padding:6px 12px 0; text-align:center;}
#view-lunar #lu-energia{font-family:var(--fonte-interface); font-weight:400; font-size:var(--c-lede); line-height:1.85; color:var(--lu-soft); margin:0; letter-spacing:0.002em;
/* impede que a última linha fique com uma palavra sozinha */
/* BALANCE, E NÃO PRETTY — 28/08/2026. O `pretty` só cuida da ÚLTIMA linha, e a
citação de 28/08 mostrou que isso não basta: com três linhas cheias e "de
dúvidas." sozinho embaixo, o que incomoda não é a palavra órfã, é a última
linha ser curta demais em relação às outras. O `balance` reparte o bloco por
igual, que é o que uma citação de três a cinco linhas pede. O cartão faz a
mesma coisa à mão, porque dentro do canvas esta propriedade não existe. */
text-wrap:balance; -webkit-hyphens:none; hyphens:none;}
#view-lunar #lu-energia em{font-style:normal; color:var(--lu-gold); font-weight:500;}
/* O CRÉDITO NÃO É ENFEITE: é ele que transforma "frase bonita" em citação, e é a
condição para citar autor ainda protegido por direito autoral. Por isso aparece
sempre, junto da frase. Autor e obra em LINHAS próprias, que é como uma citação se
credita — emendados com um "·" a linha quebrava sozinha e deixava o ANO órfão na
segunda ("…, OC 7," / "1917"). */
#view-lunar #lu-citacao-credito{font-family:var(--fonte-interface); margin:14px 0 0; line-height:1.5;
font-size:var(--c-nota); letter-spacing:0.055em; text-transform:uppercase; color:var(--lu-gold); font-weight:600;}
#view-lunar #lu-citacao-credito:empty{display:none;}
#view-lunar .lu-cred-autor{display:block;}
#view-lunar .lu-cred-obra{display:block; margin-top:3px; color:var(--lu-muted); font-weight:500;
text-transform:none; letter-spacing:0.015em; font-size:var(--c-etiqueta); text-wrap:balance;}
/* AS ASPAS SÃO DESENHO, NÃO TEXTO. Duas razões que se somam: o nó de texto é a CHAVE
que o dicionário de tradução procura, e o tradutor normaliza espaço mas não
pontuação — com a aspa colada, as 80 chaves precisariam da aspa nos três idiomas.
E conteúdo de ::before não oferece ponto de quebra depois de si, então a aspa de
abertura nunca fica pendurada sozinha no fim de uma linha. */
#view-lunar #lu-energia:not(:empty)::before{content:"\201C";}
#view-lunar #lu-energia:not(:empty)::after{content:"\201D";}
#view-lunar .lu-lista{list-style:none; margin:0; padding:0;}
#view-lunar .lu-lista li{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:19px 0; border-bottom:1px solid rgba(234,224,198,0.09); font-family:var(--fonte-interface); font-size:var(--c-corpo); color:var(--lu-soft);}
#view-lunar .lu-lista li:last-child{border-bottom:none;}
#view-lunar .lu-lista .quando{color:var(--lu-gold); font-weight:700; font-size:var(--c-lede); white-space:nowrap; font-variant-numeric:tabular-nums;}
#view-lunar .lu-lista .lu-ev{display:flex; align-items:center; gap:10px;}
#view-lunar .lu-sub{font-family:var(--fonte-interface); font-size:var(--c-apoio); color:var(--lu-muted); line-height:1.6;}
#view-lunar .lu-lista .lu-ev b{color:var(--lu-ink); font-weight:600; font-size:var(--c-corpo);}
#view-lunar .lu-lista .lu-ev .g{color:var(--lu-cream-dim);}
/* Sem o prefixo `lu-`: as duas telas que mostram a leitura lunar pessoal agora
chamam a mesma função, e ela emite um nome de classe só — cada tela pinta no
próprio escopo. O `.lu-horas` era um style embutido na string do JS. */
#view-lunar .tom-tenso{color:#D49A88;}
#view-lunar .tom-harmonico{color:#96C4A4;}
#view-lunar .lu-horas{color:var(--lu-muted);}
#view-lunar .lu-intensidade-track{height:6px; border-radius:99px; background:rgba(234,224,198,0.08); overflow:hidden; margin:8px 0 4px;}
#view-lunar .lu-intensidade-fill{height:100%; border-radius:99px; background:linear-gradient(90deg, var(--lu-cream-dim), var(--lu-cream)); transition:width 1.1s var(--ease-soft);}
#view-lunar .lu-estado{text-align:center; color:var(--lu-muted); padding:48px 0; line-height:1.6;}
/* O BOTÃO DE TENTAR DE NOVO, NA PALETA DA NOITE — 03/09/2026. O `.btn-outline` é
desenhado em latão escuro sobre creme, que é o fundo do resto do site; sobre este
azul de meia-noite ele fica quase invisível. Mesma forma, mesma borda, mesma
espessura — só a tinta muda, que é o que faz continuar sendo o mesmo botão. */
#view-lunar .btn-outline{border-color:var(--lu-cream-dim); color:var(--lu-cream);}
#view-lunar .btn-outline:hover{background:rgba(234,224,198,0.10);}
#view-lunar .lu-cta{text-align:center;}
#view-lunar .lu-cta p{margin-bottom:18px;}
#view-lunar .lu-cta .btn-primary{background:var(--lu-cream); color:#101A36; box-shadow:0 10px 28px rgba(234,224,198,0.18);}
#view-lunar .lu-cta .btn-primary:hover{background:#F4ECD8;}
#view-lunar .lu-rodape{text-align:center; font-size:var(--c-nota); color:var(--lu-muted); padding:30px 20px 68px; line-height:1.6;}
/* Mesmo tratamento do fecho: cada frase é um bloco próprio para o navegador
equilibrar as linhas dela. Sem isto, "abriu esta página." descia sozinho para a
terceira linha, desalinhado do resto. Os espaços inquebráveis no HTML seguram a
órfã onde o `text-wrap:balance` não existir (Safari anterior ao 17.5). */
#view-lunar .lu-rodape span{display:block; text-wrap:balance;}
/* grade de signos */
/* TRÊS COLUNAS NO CELULAR E QUATRO ACIMA — 31/08/2026, a pedido de aumentar os
botões. Eram quatro e seis, e com a pintura ocupando o botão inteiro isso deixava
cada prancha com cerca de 86 px no celular: a figura lá dentro virava um borrão.
Menos colunas é o que aumenta o botão aqui, porque a imagem acompanha a largura. */
/* A MARGEM NEGATIVA NÃO É GAMBIARRA: a grade mora dentro de um `.lu-card`, que tem
32 px de respiro lateral. Numa tela de 414 px isso deixava 290 px para três botões —
88 px cada, medido. Puxar 20 px de cada lado devolve o espaço que o cartão tomava e
leva o botão a 102 px, sem mexer no `.lu-card`, que é usado por mais meia dúzia de
blocos desta aba e não tem culpa nenhuma. */
#view-lunar .lu-signos-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 -20px 28px;}
@media (min-width:560px){ #view-lunar .lu-signos-grid{grid-template-columns:repeat(4,1fr); gap:16px;} }
/* O `padding` FOI A ZERO e entrou `overflow:hidden` — 31/08/2026, quando a pintura
passou a ocupar o botão inteiro. Sem o `overflow`, a imagem quadrada aparece por
cima dos cantos arredondados e o botão perde o canto no alto. O nome ganhou
espaçamento próprio, que é o que o `padding` do botão dava a ele antes. */
#view-lunar .lu-signo-btn{display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden; border-radius:12px; border:1px solid rgba(234,224,198,0.16); background:rgba(234,224,198,0.05); cursor:pointer; transition:transform 140ms var(--ease-soft), border-color 140ms ease, background 140ms ease;}
#view-lunar .lu-signo-btn:hover{border-color:var(--lu-gold); transform:translateY(-1px);}
#view-lunar .lu-signo-btn.active{border-color:var(--lu-gold); background:rgba(217,199,154,0.16); box-shadow:0 8px 22px rgba(0,0,0,0.35);}
/* A PINTURA OCUPA O BOTÃO INTEIRO — 31/08/2026, a pedido: "usa a imagem azul
completa, não precisa dissolver". A versão anterior desvanecia as bordas pelo canal
alfa e cada signo virava um medalhão redondo; estas pranchas são quadradas e entram
inteiras. Ficaram 51 kB mais leves ao perder a transparência.
O `aspect-ratio:1` COM `width:100%` é o que reserva o espaço da imagem antes de ela
chegar — e é por isso que a tag de verdade — foco, papel e tecla de espaço de graça. Estes
zeramentos são o que tira a cara de botão de sistema sem tirar o comportamento. */
#view-lunar .mc-dia{
position:relative; display:flex; align-items:center; justify-content:center;
aspect-ratio:1; padding:0; border:none; background:transparent; cursor:pointer;
font-family:var(--fonte-interface); font-size:var(--c-apoio); color:var(--lu-soft);
border-radius:50%; transition:background 120ms ease;
}
#view-lunar .mc-dia:hover{background:rgba(234,224,198,0.07);}
#view-lunar .mc-dia:focus-visible{outline:2.5px solid var(--lu-cream); outline-offset:4px;}
#view-lunar .mc-dia span{position:relative; z-index:2;}
/* O anel de "hoje" é `outline`, e não um pseudo-elemento — e isto é conserto de um
defeito visto na tela antes de subir. Ele era `::after`, que é o MESMO pseudo-elemento
do traço da pílula: no dia em que a pessoa marcava a pílula, a regra de baixo vencia e
o "hoje" sumia. Quem toma pílula marca todo dia — ou seja, o "hoje" desapareceria
quase sempre, justamente para quem mais usa a tela.
`outline` também resolve o outro problema que o `::after` tinha: ele fica POR FORA do
disco da marca, e não por baixo. No dia em que ela está menstruando, um anel dentro do
disco carmim não se vê. */
#view-lunar .mc-dia.hoje{
font-weight:700; color:var(--lu-gold);
outline:1.5px solid var(--lu-gold); outline-offset:2px;
}
#view-lunar .mc-dia.hoje.mc-fluxo{color:#1A0A0F;}
/* menstruação marcada: disco cheio. Prevista: o mesmo disco, vazado. */
#view-lunar .mc-dia.mc-fluxo{background:var(--mc-fluxo); color:#1A0A0F; font-weight:600;}
#view-lunar .mc-dia.mc-fluxo-prev{box-shadow:inset 0 0 0 1.5px var(--mc-fluxo); color:var(--mc-fluxo);}
/* janela fértil: fundo discreto. Melhores dias: o mesmo fundo, mais forte, com o ponto. */
#view-lunar .mc-dia.mc-fertil{background:rgba(111,174,156,0.20); color:var(--lu-ink);}
#view-lunar .mc-dia.mc-melhor{background:rgba(111,174,156,0.38);}
#view-lunar .mc-dia.mc-melhor::before{
content:""; position:absolute; bottom:3px; left:50%; transform:translateX(-50%);
width:4px; height:4px; border-radius:50%; background:var(--mc-fertil); z-index:2;
}
/* ovulação: o anel dourado, que é o acento da aba. É o dia que a tela quer que se veja. */
#view-lunar .mc-dia.mc-ovulacao{box-shadow:inset 0 0 0 2px var(--lu-gold); color:var(--lu-gold); font-weight:700;}
#view-lunar .mc-dia.mc-ovulacao.mc-melhor::before{background:var(--lu-gold);}
/* pílula: o traço em cima, que não disputa espaço com nenhuma das outras marcas. */
#view-lunar .mc-dia.mc-pilula::after{
content:""; position:absolute; top:2px; left:50%; transform:translateX(-50%);
width:12px; height:2.5px; border-radius:2px; background:var(--lu-cream); z-index:2;
}
#view-lunar .mc-dia.mc-pilula.hoje::after{background:var(--lu-gold);}
#view-lunar .mc-legenda{
list-style:none; padding:0; margin:18px 0 0; display:flex; flex-wrap:wrap; gap:8px 16px;
font-size:var(--c-nota); color:var(--lu-muted);
}
#view-lunar .mc-legenda li{display:flex; align-items:center; gap:7px;}
#view-lunar .mc-legenda i{width:13px; height:13px; border-radius:50%; flex:none;}
#view-lunar .mc-p-fluxo{background:var(--mc-fluxo);}
#view-lunar .mc-p-prev{box-shadow:inset 0 0 0 1.5px var(--mc-fluxo);}
#view-lunar .mc-p-fertil{background:rgba(111,174,156,0.20);}
#view-lunar .mc-p-melhor{background:rgba(111,174,156,0.38); position:relative;}
#view-lunar .mc-p-ovulacao{box-shadow:inset 0 0 0 2px var(--lu-gold);}
#view-lunar .mc-p-pilula{border-radius:2px !important; height:2.5px !important; background:var(--lu-cream);}
#view-lunar .mc-aviso{margin-top:12px; font-size:var(--c-apoio); color:#F0A183; text-align:center;}
#view-lunar .mc-lista{list-style:none; padding:0; margin:0;}
#view-lunar .mc-lista li{
display:grid; grid-template-columns:1fr auto; gap:2px 12px; align-items:baseline;
padding:13px 0 13px 14px; border-bottom:1px solid var(--lu-border-soft); position:relative;
}
#view-lunar .mc-lista li:last-child{border-bottom:none;}
/* O filete colorido à esquerda amarra a linha ao dia pintado no quadro acima. Sem ele,
a lista e o calendário viram duas telas que falam da mesma coisa sem se olharem. */
#view-lunar .mc-lista li::before{
content:""; position:absolute; left:0; top:15px; bottom:15px; width:3px; border-radius:2px;
}
#view-lunar .mc-l-fluxo::before{background:var(--mc-fluxo);}
#view-lunar .mc-l-ovulacao::before{background:var(--lu-gold);}
#view-lunar .mc-l-fertil::before{background:rgba(111,174,156,0.55);}
#view-lunar .mc-l-melhor::before{background:var(--mc-fertil);}
#view-lunar .mc-lista .mc-r{font-size:var(--c-apoio); color:var(--lu-cream); font-weight:600;}
#view-lunar .mc-lista .mc-v{font-size:var(--c-apoio); color:var(--lu-ink); text-align:right; font-weight:600;}
#view-lunar .mc-lista .mc-q{font-size:var(--c-nota); color:var(--lu-muted); grid-column:1 / -1;}
#view-lunar .mc-base, #view-lunar .mc-nota{font-size:var(--c-nota); color:var(--lu-muted); line-height:1.7; margin:14px 0 0;}
#view-lunar .mc-vazio{font-size:var(--c-apoio); color:var(--lu-muted); line-height:1.7; margin:0;}
#view-lunar .mc-numeros{display:flex; gap:14px; flex-wrap:wrap;}
#view-lunar .mc-numeros label{
flex:1 1 150px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
font-size:var(--c-apoio); color:var(--lu-cream);
}
/* 16 PX, E NÃO 14 — 03/09/2026. Abaixo de 16 o iOS dá zoom na página assim que o dedo
toca o campo, e a tela inteira salta de lugar. A regra está escrita nos tokens
("os CAMPOS DE FORMULÁRIO ficam de fora da escala... ali o número não é gosto") e
estes dois campos eram os únicos do app no ar que a desobedeciam. A caixa foi de 74
para 82 px porque o número dentro dela cresceu junto — com os 74 antigos, "45" e o
cursor passavam a disputar a mesma linha. */
#view-lunar .mc-numeros input{
width:82px; padding:9px 10px; border-radius:10px; font-family:inherit; font-size:16px;
border:1px solid var(--lu-border); background:rgba(234,224,198,0.05); color:var(--lu-ink);
}
#view-lunar .mc-numeros input:focus{outline:none; border-color:var(--lu-cream);}
#view-lunar .mc-numeros label span{font-size:var(--c-nota); color:var(--lu-muted);}
/* A ressalva não é rodapé nem letra miúda: ela tem a mesma largura e o mesmo respiro
dos outros cartões. Aviso escondido em letra pequena é aviso que não foi dado. */
#view-lunar .mc-ressalva{border-color:rgba(196,103,126,0.34); background:rgba(120,36,52,0.14);}
#view-lunar .mc-ressalva p{font-size:var(--c-apoio); line-height:1.7; color:var(--lu-cream-dim); margin:0 0 10px;}
#view-lunar .mc-ressalva p:last-child{margin-bottom:0;}
#view-lunar .mc-ressalva b{color:var(--lu-ink);}
/* recomendações rituais */
/* Bloco 1 — Recomendações rituais: só Intenção e Feitiços, sempre empilhado
(os valores são frases inteiras, então não cabem numa tabela de 2 colunas). */
#view-lunar .lu-ritual{margin:0;}
#view-lunar .lu-ritual dt{font-family:var(--fonte-interface); font-size:var(--c-nota); text-transform:uppercase; letter-spacing:0.1em; color:var(--lu-cream-dim); font-weight:600; padding:18px 0 0; border-top:1px solid rgba(234,224,198,0.09);}
#view-lunar .lu-ritual dd{font-family:var(--fonte-interface); font-size:var(--c-lede); line-height:1.6; color:var(--lu-white); font-weight:400; margin:0; padding:5px 0 18px;}
#view-lunar .lu-ritual dt:first-of-type{border-top:none; padding-top:0;}
/* Bloco 2 — Correspondências mágicas: a tabela de duas colunas de sempre
(rótulo à esquerda, valor curto à direita), igual ao design original. */
#view-lunar .lu-corresp{margin:0; display:grid; grid-template-columns:auto 1fr; gap:0 22px;}
#view-lunar .lu-corresp dt{font-family:var(--fonte-interface); font-size:var(--c-nota); text-transform:uppercase; letter-spacing:0.09em; color:var(--lu-cream-dim); font-weight:600; padding:17px 0; border-top:1px solid rgba(234,224,198,0.09); white-space:nowrap;}
#view-lunar .lu-corresp dd{font-family:var(--fonte-interface); font-size:var(--c-lede); line-height:1.6; color:var(--lu-soft); margin:0; padding:17px 0; border-top:1px solid rgba(234,224,198,0.09); text-align:right;}
#view-lunar .lu-corresp dt:first-of-type, #view-lunar .lu-corresp dd:first-of-type{border-top:none;}
#view-lunar .lu-corresp dd b{color:var(--lu-gold); font-weight:600;}
/* calendário mensal */
/* O céu de hoje: uma lista de estados, cada um com o seu rótulo e a sua explicação
curta. A Lua Vazia ganha destaque porque é a que muda o que a pessoa vai FAZER. */
#view-lunar .lu-ceu{list-style:none; margin:0; padding:0;}
#view-lunar .lu-ceu li{padding:11px 0; border-bottom:1px solid var(--lu-border-soft);}
#view-lunar .lu-ceu li:last-child{border-bottom:none;}
#view-lunar .lu-ceu b{display:block; font-family:var(--fonte-interface); font-size:var(--c-nota);
letter-spacing:0.11em; text-transform:uppercase; color:var(--lu-gold); font-weight:700;
margin-bottom:5px;}
#view-lunar .lu-ceu span{display:block; font-size:var(--c-corpo); color:var(--lu-soft); line-height:1.5;}
#view-lunar .lu-ceu .lu-ceu-nota{font-size:var(--c-apoio); color:var(--lu-muted); margin-top:4px;}
#view-lunar .lu-ceu li.vazia b{color:#E0A0C8;}
#view-lunar .lu-cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:14px 4px;}
/* O cabeçalho vira uma linha: ícone, mês, e as setas empurradas para a direita. */
#view-lunar .lu-cal-cabeca{display:flex; align-items:center; gap:8px;}
/* O `order` põe as setas DEPOIS do filete decorativo do `h3::after`, que é um
`flex:1` e come todo o espaço livre. Com `margin-left:auto` elas ficavam coladas no
título e o filete escorria para a direita delas — o inverso do que o cartão faz em
todos os outros títulos da aba. */
#view-lunar .lu-cal-setas{order:1; display:flex; align-items:center; gap:6px;}
#view-lunar .lu-cal-seta{
display:inline-flex; align-items:center; justify-content:center;
width:30px; height:30px; padding:0; border-radius:50%; cursor:pointer;
border:1px solid var(--lu-border); background:rgba(234,224,198,0.05); color:var(--lu-cream);
}
#view-lunar .lu-cal-seta svg{width:16px; height:16px; fill:none; stroke:currentColor;
stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
#view-lunar .lu-cal-seta:hover{background:rgba(234,224,198,0.14); border-color:var(--lu-cream);}
#view-lunar .lu-cal-hoje{
padding:5px 11px; border-radius:99px; cursor:pointer; font-family:inherit;
font-size:var(--c-etiqueta); font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
border:1px solid var(--lu-border); background:rgba(234,224,198,0.05); color:var(--lu-gold);
}
#view-lunar .lu-cal-hoje:hover{background:rgba(234,224,198,0.14); border-color:var(--lu-cream);}
/* Enquanto o mês novo não chega, o que está na tela esmaece — e não some. */
#view-lunar .lu-cal-grid.lu-cal-esperando{opacity:0.42; transition:opacity 140ms linear;}
#view-lunar .lu-cal-aviso{margin-top:12px; font-size:var(--c-apoio); color:var(--lu-muted); text-align:center;}
#view-lunar .lu-cal-dow{font-family:var(--fonte-interface); font-size:var(--c-etiqueta); text-transform:uppercase; letter-spacing:0.07em; color:var(--lu-muted); text-align:center; padding-bottom:12px;}
#view-lunar .lu-cal-dia{display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 1px; border-radius:12px; background:transparent;}
#view-lunar .lu-cal-dia.hoje{background:rgba(217,199,154,0.14); box-shadow:0 0 0 1.5px var(--lu-gold);}
#view-lunar .lu-cal-dia.hoje .lu-cal-topo{color:var(--lu-gold); font-weight:700;}
#view-lunar .lu-cal-topo{display:flex; align-items:center; justify-content:center; gap:3px; font-family:var(--fonte-interface); font-size:var(--c-nota); color:var(--lu-soft); line-height:1;}
/* o signo em que a Lua está naquele dia — informação central num site de
astrologia, então fica em dourado e com tamanho legível de verdade. */
#view-lunar .lu-cal-topo .gl{font-size:var(--c-apoio); color:var(--lu-gold); line-height:1;}
#view-lunar .lu-cal-dia.hoje .lu-cal-topo .gl{color:var(--lu-gold);}
/* só a % de iluminação sai: ela já está desenhada na própria fase da Lua */
#view-lunar .lu-cal-pct{display:none;}
/* leitura de evento */
#view-lunar .lu-evento-headline{font-family:var(--fonte-titulo); font-size:var(--t-cartao); font-weight:600; letter-spacing:-0.017em; color:var(--lu-ink); margin-bottom:12px;}
#view-lunar .lu-evento-secao{font-size:var(--c-etiqueta); text-transform:uppercase; letter-spacing:0.1em; color:var(--lu-cream); font-weight:700; margin:18px 0 8px;}
#view-lunar .lu-lista li.lu-clicavel{cursor:pointer; border-radius:8px; padding-left:6px; padding-right:6px; transition:background 140ms ease;}
#view-lunar .lu-lista li.lu-clicavel:hover{background:rgba(234,224,198,0.05);}
#view-lunar .lu-reflexao{font-style:italic; color:var(--lu-cream-dim) !important; margin-top:16px !important; border-left:2px solid var(--lu-border); padding-left:16px; font-size:var(--c-corpo) !important;}
#view-lunar .lu-reflexao-txt::before{content:"\201C";}
#view-lunar .lu-reflexao-txt::after{content:"\201D";}
#view-lunar .lu-reflexao-cred{display:block; margin-top:8px; font-style:normal; font-size:var(--c-etiqueta);
letter-spacing:0.05em; text-transform:uppercase; color:var(--lu-gold); font-weight:600;}
#view-lunar .lu-reflexao-cred .lu-cred-obra{font-size:var(--c-etiqueta);}
/* ESTE CARTÃO PINTA A COR NA MÃO, e não pelo token — foi por isso que ele quase ficou
cinza-preto quando a aba saiu do preto em 31/08. Fica como está para não mexer no
degradê que ele tem de propósito, mas os dois tons agora são da família do #0B1026.
Se um dia alguém trocar a paleta da aba de novo, esta linha é a que não avisa. */
#view-lunar .lu-card-destaque{border-color:rgba(234,224,198,0.22); background:linear-gradient(180deg, rgba(26,34,66,0.9) 0%, rgba(13,18,42,0.94) 100%); box-shadow:0 18px 50px rgba(0,0,0,0.35), inset 0 1px 0 rgba(234,224,198,0.08);}
#view-lunar .lu-ativa-titulo{font-family:var(--fonte-titulo); font-size:var(--t-bloco); font-weight:600; letter-spacing:-0.017em; color:var(--lu-ink); margin-bottom:14px;}
#view-lunar .lu-ativa{list-style:none; margin:0 0 6px; padding:0;}
#view-lunar .lu-ativa li{display:flex; align-items:baseline; gap:10px; padding:9px 0; font-size:var(--c-corpo); color:var(--lu-soft); border-bottom:1px solid var(--lu-border-soft);}
#view-lunar .lu-ativa li:last-child{border-bottom:none;}
#view-lunar .lu-ativa li::before{content:"☽\FE0E"; color:var(--lu-cream-dim); font-size:var(--c-apoio);}
#view-lunar .lu-ativa b{color:var(--lu-cream); font-weight:600;}
#view-lunar .zg{font-family:'Noto Sans Symbols','Noto Sans Symbols 2','Segoe UI Symbol',sans-serif; color:var(--lu-cream);}
/* A ASTROLOGIA MUNDIAL, DESENHADA COMO JORNAL — 30/08/2026, a pedido da dona do projeto:
"eu gostaria que essa aba se parecesse com um Jornal Astrológico mesmo".
O QUE ESTAVA AQUI ANTES eram cartões arredondados com gradiente dourado — a linguagem
das outras abas do app. Ela não estava errada; estava dizendo outra coisa. A distância
entre um editorial e um post não é o texto, é a forma, e a forma anterior dizia "post".
O que substitui não é enfeite, são cinco peças concretas de primeira página: cabeçalho
com nome e filete, linha de edição com data e ativação, tipografia SERIFADA no corpo,
régua no lugar do cartão, e capitular na matéria de abertura. Cada uma tem o comentário
dela abaixo, junto do defeito que a fez ficar como está.
*/
/* ───────────────────────────────────────────────────────────────────────────
A TIPOGRAFIA DO JORNAL — e por que ela NÃO traz fonte da internet.
───────────────────────────────────────────────────────────────────────────
O app inteiro é Inter, uma sem serifa. Jornal é serifado — isso não é gosto, é o
que o olho reconhece: as serifas guiam a linha em coluna estreita, e é por isso que
jornal impresso nunca deixou de usá-las.
A tentação era pedir uma fonte ao Google (uma Playfair no cabeçalho, uma Baskerville
no corpo). Ficaria bonito e cobraria duas requisições de rede em TODA visita ao app,
inclusive de quem nunca abre esta aba — este repositório já pagou caro por peso que
não se vê (as 840 KB de imagem embutida que o Crivo achou em agosto).
A pilha abaixo não custa um byte e dá o mesmo resultado: Georgia é a serifada de
tela mais bem desenhada que existe e está em todo iPhone, Mac e Windows; o Android
resolve `serif` na Noto Serif, que é da mesma escola. Se um dia a dona quiser uma
fonte de assinatura, é uma linha aqui — e aí o custo terá sido escolhido, e não
herdado por descuido.
A SEM SERIFA FICA, e tem função: ela é a voz do JORNAL falando (as retrancas, a
linha de edição, os rótulos). A serifada é a voz do TEXTO. Duas vozes, e cada uma
com um trabalho — que é exatamente como uma página de jornal se organiza. */
#view-mundial{
--jn-serifa: Georgia, 'Times New Roman', 'Noto Serif', serif;
--jn-titulo: var(--fonte-interface);
--jn-tinta: #1B160F;
--jn-tinta-suave: #34302A;
/* OS FILETES ERAM BEGE E VIRARAM TINTA — 31/08/2026, a pedido ("remova a cor
dourada/bege, substitua por preto nesta aba"). Jornal impresso tem UMA tinta, e
todo fio dele é essa tinta em espessura menor — não uma cor mais clara. O fio
forte é quase preto; o fraco é cinza NEUTRO, sem o amarelo que o `#E2D9C0` tinha.
A diferença entre os dois continua sendo hierarquia, e não temperatura. */
--jn-filete: #4C463C;
--jn-filete-fraco: #A9A296;
--jn-papel: #FAF8F4;
/* AQUI ESTÁ O TRABALHO TODO DA COR, e é de propósito que ele seja UMA linha e não
oito. O `--brass-dark` é o latão da casa, e ele entra nesta aba por oito regras
diferentes — a linha de edição, as etiquetas, os símbolos, os links das fontes, o
rótulo da agenda, o resumo dos Detalhes técnicos, o hover das abas, e o botão de
menu, que nem é desta folha. Trocar as oito à mão deixaria a nona de fora no dia
em que alguém escrevesse uma regra nova.
Redefinir o TOKEN dentro do `#view-mundial` faz o latão virar tinta em tudo o que
está dentro da aba, e em nada do que está fora dela. O `--muted` vai junto pelo
mesmo motivo: ele é um cinza MORNO, e cinza morno ao lado de tinta preta lê como
bege desbotado. */
--brass-dark: #1B160F;
--muted: #56514A;
}
#view-mundial .mu-wrap{max-width:660px; margin:0 auto;}
/* O papel: a mesma textura e vinheta da aba do horóscopo, que é a linguagem que a
casa já tem para "impresso". Repetir a linguagem é o que faz a aba nova parecer
parte do mesmo produto, e não um enxerto. */
#view-mundial{position:relative;}
#view-mundial::before{
content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.5; mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,`, E NÃO UM ` ` — 30/08/2026, e a razão é dupla.
A primeira é semântica: ela é o título da seção, e leitor de tela precisa saber
disso. A segunda foi VISTA numa captura: como `
`, ela era o
`p:first-of-type` da matéria de abertura, e a capitular caía nela — numa palavra
de dez pixels em caixa alta, onde não se enxerga nada. A letra grande estava lá o
tempo todo, na palavra errada. */
/* O SUBTÍTULO CRESCEU E FICOU PRETO — 31/08/2026, a pedido: "aumente os subtítulos,
em preto com a mesma fonte do título". Ele deixa de ser retranca em caixa alta e vira
cabeça de seção em serifada — a MESMA família do cabeçalho e da manchete.
O QUE MUDA JUNTO, e não é enfeite: o espaçamento entre letras VIRA NEGATIVO. Os
0,16 em existiam porque texto pequeno em caixa alta precisa de ar para se ler; em
caixa baixa e 23 px, esse mesmo ar esparrama a palavra. É a regra do cabeçalho.
O FIO PASSOU PARA BAIXO. Ele corria à DIREITA do título, o que funciona ao lado de um
risquinho de 10,5 px — a 23 px, um fio saindo do meio das letras lê como texto
riscado. Embaixo, correndo a largura toda, é a cabeça de seção que jornal imprime
desde sempre. O `content:none` desliga o pseudo-elemento sem apagá-lo: a etiqueta
logo abaixo ainda o usa. */
#view-mundial .jn-retranca{
font-family:var(--jn-serifa); font-size:clamp(20px, 5.2vw, 24px); font-weight:700;
letter-spacing:-0.006em; text-transform:none; color:var(--jn-tinta);
line-height:1.16; margin:0 0 17px; padding-bottom:9px;
border-bottom:1px solid var(--jn-filete);
display:flex; align-items:baseline; gap:11px;
}
#view-mundial .jn-retranca::after{content:none;}
/* A ETIQUETA — o subtítulo pequeno, que continua existindo e continua sendo preciso.
Ela veste os rótulos de QUADRO ("O céu daquele dia", "O que voltou agora") e a data
da retrospectiva. Se eles tivessem virado serifada preta de 23 px junto com os
outros, cada acontecimento da aba História teria três cabeças do mesmo peso — a data,
o título e o rótulo da caixa — e nenhuma seria a principal.
Subtítulo grande é para a MATÉRIA; etiqueta é para a CAIXA. */
#view-mundial .jn-retranca.jn-etiqueta{
font-family:var(--jn-titulo); font-size:var(--c-etiqueta); font-weight:700;
letter-spacing:0.16em; text-transform:uppercase; color:var(--brass-dark);
line-height:1.3; margin:0 0 10px; padding-bottom:0; border-bottom:none;
align-items:center; gap:12px;
}
/* O fio que corre da etiqueta até a margem. Um pseudo-elemento que cresce sozinho
vale mais que uma borda calculada: ele se ajusta a qualquer comprimento de título,
em qualquer idioma. */
#view-mundial .jn-retranca.jn-etiqueta::after{
content:""; flex:1; height:1px; background:var(--jn-filete);
}
/* O SÍMBOLO QUE ACOMPANHA O SUBTÍTULO — 31/08/2026, a pedido ("os símbolos astrológicos
devem acompanhar os subtítulos").
LATÃO E NÃO PRETO, e um pouco menor que o título: o símbolo ANUNCIA a seção, não
compete com ela. No mesmo peso e na mesma cor, ♂ e "Geopolítica" brigariam pelo olho,
e quem perde essa briga é a palavra — que é a que carrega a informação.
`font-variant-emoji:text` porque sem ele o sistema serve ♈…♓ e ♀♂♃ da fonte COLORIDA
de emoji. Foi visto numa captura, e é o defeito mais gritante que esta aba teve. */
/* MAIORES QUE O TÍTULO, e não menores — 31/08/2026, a pedido ("aumente os símbolos").
1,25em num subtítulo de 24 px dá 30 px de glifo. Parece muito escrito assim, e não é:
♆ e ☿ são desenhos FINOS, de traço de uma linha, sem hastes cheias como as letras.
No mesmo corpo da palavra ao lado eles somem — foi o que a captura de 430 px mostrou.
Um símbolo que precisa de lupa não informa, e era essa a função dele.
`line-height:1` para o glifo alto não esticar a linha do subtítulo. */
#view-mundial .jn-sigilo{
flex:none; font-weight:400; font-size:1.25em; line-height:1; color:var(--jn-tinta);
font-variant-emoji:text; -webkit-font-variant-emoji:text;
}
#view-mundial .mu-secao p{
font-family:var(--jn-serifa); font-size:var(--c-lede); line-height:1.7;
color:var(--jn-tinta-suave); margin:0 0 17px; hyphens:auto;
}
/* JUSTIFICADO SÓ A PARTIR DE 420 px, e isto é medida e não capricho: abaixo disso a
linha tem menos de 45 caracteres, e justificar uma linha curta abre "rios" de
espaço branco no meio do parágrafo. Alinhado à esquerda fica melhor no celular
estreito; justificado fica melhor no resto — e jornal é justificado. */
@media (min-width:420px){
#view-mundial .mu-secao p{text-align:justify; text-justify:inter-word;}
}
/* ── O MIOLO EM DUAS COLUNAS ─────────────────────────────────────────────────
31/08/2026, e é a mudança que mais faz a aba parecer jornal — mais que qualquer
imagem. Uma primeira página é quase toda tipografia; a foto é uma, no meio de
seis colunas de texto.
E ela conserta um defeito de leitura que estava lá desde o começo: 660 px em
coluna única dão cerca de NOVENTA caracteres por linha, e o olho perde o começo
da linha seguinte a partir de uns setenta e cinco. Em duas colunas a medida cai
para ~45 caracteres, que é exatamente a medida de coluna de jornal impresso.
A LARGURA DA CAIXA NÃO MUDOU, e é decisão: alargar a `mu-wrap` para caber duas
colunas largas deixaria a aba História — que continua em coluna única, porque é
feita de quadros — com noventa caracteres por linha e o problema mudaria de lugar.
720 px é o ponto de corte porque é onde o tablet em pé começa. Abaixo disso é
celular, e celular é coluna única em qualquer jornal do mundo. */
@media (min-width:720px){
#view-mundial .jn-miolo{
column-count:2; column-gap:38px; column-rule:1px solid var(--jn-filete);
}
/* AS SEÇÕES PODEM PARTIR entre colunas — jornal parte matéria o tempo todo, e proibir
a quebra faria uma seção comprida empurrar a coluna inteira e desequilibrar a
página. O que NÃO pode partir são as três coisas abaixo. */
#view-mundial .jn-miolo .jn-retranca{break-after:avoid-column;}
#view-mundial .jn-miolo .jn-quadro,
#view-mundial .jn-miolo .mu-fontes{break-inside:avoid-column;}
/* Linha solta no pé ou no alto de uma coluna é o defeito clássico da composição em
colunas, e tem nome desde a tipografia de chumbo: viúva e órfã. */
#view-mundial .jn-miolo p{orphans:2; widows:2;}
/* A AGENDA EMPILHA DENTRO DA COLUNA, sempre — e a regra de 419 px não servia aqui.
Ela olha a largura da JANELA, e o que aperta a agenda é a largura da COLUNA: num
tablet de 820 px a janela é larga e a coluna tem 283, com 108 deles reservados ao
rótulo. A captura mostrou "Alta ativação — O dia em que a tensão pesa mais" em três
linhas de três palavras. Dentro do miolo em colunas, empilhado é o único formato que
cabe. */
#view-mundial .jn-miolo .mu-linhas li{display:block;}
#view-mundial .jn-miolo .mu-linhas b{display:block; min-width:0; margin-bottom:2px;}
/* A EXPLICAÇÃO DA AGENDA ATRAVESSA POR BAIXO DA FOLHINHA, pela mesma razão e medida na
mesma captura: a coluna tem 283 px, o quadro come 34 de recheio e a folhinha mais o
vão comem 44 — sobravam pouco mais de 200 para um parágrafo de duas frases, e ele
descia em linhas de duas palavras. Por baixo, ele recupera os 44. */
#view-mundial .jn-miolo .mu-agenda li > p{grid-column:1 / -1;}
/* O SUBTÍTULO ENCOLHE DENTRO DA COLUNA, e não é desfazer o que a dona pediu — é manter
a PROPORÇÃO que ela pediu. No celular são 19 px numa linha de 358: um vinte-avos da
medida. Aqui a linha tem 283, e 23 px seriam um doze-avos — o mesmo número de pixels
lendo como maior porque a linha encolheu. 20 px devolvem a proporção do celular. */
#view-mundial .jn-miolo .jn-retranca{font-size:var(--t-bloco);}
#view-mundial .jn-miolo .mu-fontes li{display:block;}
#view-mundial .jn-miolo .mu-fontes .mu-fonte-quando{display:block; min-width:0;}
/* A manchete atravessa as duas colunas, como na primeira página. */
/* Só a largura: o TAMANHO já vem do `clamp` lá embaixo, e fixá-lo aqui em 27 px era
justamente o que segurava a manchete pequena no tablet — a regra de baixo mandava
46 px e esta mandava 27, e a última da cascata ganhava. */
#view-mundial .jn-chamada{max-width:none;}
}
/* ── A FOTO DO ACONTECIMENTO ─────────────────────────────────────────────────
Só na aba História, e sempre com o crédito colado nela.
O TRATAMENTO DE IMPRESSÃO É DELIBERADO, e não filtro bonitinho: cinza com um véu
da temperatura do papel faz a foto ler como ACERVO DE JORNAL, e não como imagem
colada da web. Metade do trabalho de dizer "isto é registro de outra época" é
feito aqui; o resto, pela legenda.
O `contrast` acima de 1 devolve o que o cinza tira, e a `sepia` baixa puxa a foto
para a cor do papel. Nada disso apaga rosto nem detalhe — que é justamente onde um
meio-tom decorativo estragaria a foto.
O TETO É DE ALTURA, e não de largura: foto em pé de um monumento pode ter o dobro
da altura da coluna e empurrar o texto para fora da tela. O `object-fit:cover`
recorta pelo meio, que é o que uma editoria de arte faria.
E o `loading="lazy"` vai no HTML, junto do teto: este repositório tem alergia
documentada a peso invisível — as 840 KB de imagem embutida que o Crivo achou em
agosto. Imagem que ninguém rolou até não deve custar rede a ninguém. */
#view-mundial .jn-foto{margin:2px 0 12px; padding:0;}
#view-mundial .jn-foto img{
display:block; width:100%; max-height:280px; object-fit:cover;
border:1px solid var(--jn-tinta);
filter:grayscale(1) contrast(1.08) sepia(0.14);
background:var(--jn-filete-fraco);
}
/* O CRÉDITO É PARTE DA IMAGEM, e não cortesia: é ele que dá o direito de usá-la.
Pequeno, mas SEMPRE visível — escondê-lo atrás de um clique transformaria a
atribuição em detalhe opcional. */
#view-mundial .jn-foto figcaption{
font-family:var(--jn-serifa); font-style:italic; font-size:var(--c-nota); line-height:1.45;
color:var(--muted); margin-top:5px;
}
#view-mundial .jn-foto figcaption a{
color:var(--brass-dark); font-style:normal; text-decoration:underline;
text-decoration-color:rgba(140,100,37,0.4); text-underline-offset:2px;
}
/* A CAPITULAR, só na matéria de abertura. Uma capitular em toda seção viraria enfeite;
numa só, ela diz "a leitura começa aqui" — que é exatamente o trabalho dela.
A CLASSE VAI NO PARÁGRAFO, e não num `:first-of-type` do bloco — 30/08/2026, e isto
também foi visto numa captura. Com `.jn-abertura > p:first-of-type`, quem levava a
letra grande era o primeiro `
` QUE HOUVESSE ali; no "agora" e na retrospectiva
esse primeiro `
` é a MANCHETE do bloco, e a capitular caía numa linha de 23 px em
negrito — um "A" gigante grudado numa chamada centralizada.
Regra que depende da ORDEM do HTML quebra na primeira vez que alguém mexe na ordem.
Quem escolhe o parágrafo de entrada agora é quem monta o bloco, por nome. */
#view-mundial p.jn-entrada::first-letter{
float:left; font-family:var(--jn-serifa); font-weight:700; color:var(--jn-tinta);
font-size:3.05em; line-height:0.82; padding:5px 9px 0 0;
}
/* A MANCHETE — 31/08/2026, corrigida no mesmo dia em que foi a 46 px.
O argumento de manhã era o CONTRASTE: a manchete grande porque a retranca ao lado
tinha 10,5 px. Ele valia enquanto a retranca fosse um risquinho em caixa alta. Agora
ela é um subtítulo em serifada preta de 23 px, e a escada mudou de degraus:
42 (cabeçalho) · 34 (manchete) · 23 (subtítulo) · 16,5 (texto).
A hierarquia continua inteira — cada degrau é uns 40% maior que o de baixo, que é o
que a régua tipográfica clássica pede. O que sumiu foi o SALTO, de 46 para 10,5, que
é o que fazia a página parecer duas páginas diferentes coladas. */
#view-mundial .jn-chamada{
font-family:var(--jn-serifa); font-size:clamp(23px, 7.2vw, 34px);
line-height:1.1; font-weight:700; letter-spacing:-0.014em;
color:var(--jn-tinta); text-align:center; margin:10px auto 26px; max-width:600px;
text-wrap:balance;
}
/* A MANCHETE DE DENTRO, para a retrospectiva. Cada acontecimento da aba História é uma
matéria secundária, e numa primeira página as secundárias NÃO têm o corpo da
principal — se tivessem, não haveria principal. Metade do tamanho, alinhada à
esquerda, e o contraste continua de pé. */
#view-mundial .jn-chamada.jn-secundaria{
font-size:clamp(19px, 4.8vw, 25px); line-height:1.16; letter-spacing:-0.01em;
text-align:left; margin:4px 0 12px; max-width:none;
}
/* O BOLETIM E O MEDIDOR SAÍRAM DAQUI EM 30/08/2026, junto com a camada "agora" que era a
única a usá-los. O boletim era o quadro de quatro casas do alto da primeira página; o
medidor, a barra de cinco degraus da ativação coletiva.
O índice de ativação não sumiu com eles: continua na linha de edição, por escrito. Era a
BARRA que prometia mais do que ele tem — escala desenhada parece medida, e o índice é
rótulo editorial. A diretriz já proibia a porcentagem; a barra era a porcentagem
desenhada sem o número. */
/* ── O QUADRO (agenda, países, retrospectiva) ────────────────────────────────
Caixa com filete duplo em cima: é como jornal marca o que se lê de relance, e não
de corrida. */
#view-mundial .jn-quadro{
border:1px solid var(--jn-tinta); border-top-width:3px; background:var(--jn-papel);
padding:19px 20px; margin:10px 0 26px;
}
#view-mundial .jn-quadro .jn-retranca{margin-bottom:9px;}
#view-mundial .jn-quadro .jn-retranca::after{background:var(--jn-filete-fraco);}
/* A agenda, o calendário do mês e a linha do tempo do ano viram QUADRO: elas se leem
de relance, e não de corrida. O `jn-quadro` embrulha as três — ver `muCorpoDaSecao`. */
#view-mundial .mu-secao > .jn-quadro:first-of-type{margin-top:0;}
#view-mundial .mu-linhas{list-style:none; margin:0; padding:0;}
#view-mundial .mu-linhas li{
display:flex; gap:12px; align-items:baseline; padding:8px 0;
border-top:1px solid var(--jn-filete-fraco);
font-family:var(--jn-serifa); font-size:var(--c-corpo); line-height:1.45; color:var(--jn-tinta-suave);
}
#view-mundial .mu-linhas li:first-child{border-top:none;}
#view-mundial .mu-linhas b{flex:none; min-width:108px; color:var(--jn-tinta);}
/* A MESMA REGRA DA TABELA DE EFEMÉRIDES, pelo mesmo motivo e vista na mesma captura:
com 108 px reservados à esquerda, sobram pouco mais de 150 para a direita, e
"então em Capricórnio / Capricórnio, agora em Peixes / Gêmeos" descia em seis
linhas de duas palavras ao lado de um rótulo de uma. Empilhado, a agenda vira o que
ela é numa página estreita: a data, e embaixo o que acontece nela. */
@media (max-width:419px){
#view-mundial .mu-linhas li{display:block;}
#view-mundial .mu-linhas b{display:block; min-width:0; margin-bottom:2px;}
}
/* ── A AGENDA — "Datas de maior ativação" ────────────────────────────────────
31/08/2026, e o pedido foi direto: "a seção de datas está esquisita, pode ser um
ícone de calendário com a data e a descrição".
O QUE ESTAVA ESQUISITO, por escrito, para ninguém repetir: a seção chega do servidor
em TRÊS partes — a data, um rótulo curto e a explicação — e a lista genérica só sabia
fazer DUAS colunas. A terceira parte era grudada na segunda com um travessão, e a
linha saía "3 de setembro | Alta ativação — O dia em que a tensão pesa mais". Um
rótulo que devia ser etiqueta virava começo de frase, e a data disputava a coluna da
esquerda com um `min-width` de 108 px. Três informações num molde de duas.
Aqui cada uma tem seu lugar: a folhinha com o número do dia, a data por extenso em
serifada, o rótulo como etiqueta em caixa alta, e a explicação embaixo, em parágrafo.
O calendário do mês e a linha do tempo do ano CONTINUAM na lista genérica: elas são
de duas partes de verdade, e faixa ("1–7", "22–fim do mês") ou mês não cabem numa
folhinha de um número só. */
#view-mundial .mu-agenda{list-style:none; margin:0; padding:0;}
/* GRADE, E NÃO FLEX, e a diferença é a explicação: em grade ela pode ficar ao lado da
data numa página larga e atravessar por baixo da folhinha numa coluna estreita, sem
mudar uma vírgula do HTML. Em flex ela ficaria sempre presa à largura do bloco ao lado
do ícone — que é o defeito visto na captura de 820 px, com a explicação descendo em
linhas de duas palavras dentro da coluna. */
#view-mundial .mu-agenda li{
display:grid; grid-template-columns:31px 1fr; column-gap:14px; row-gap:7px;
align-items:start; padding:15px 0; border-top:1px solid var(--jn-filete-fraco);
}
#view-mundial .mu-agenda li > p{grid-column:2;}
#view-mundial .mu-agenda li:first-child{border-top:none; padding-top:0;}
#view-mundial .mu-agenda li:last-child{padding-bottom:0;}
/* A FOLHINHA É DESENHO, E NÃO FONTE: 📅 chegaria colorido da fonte de emoji do sistema e
diferente em cada aparelho, e o número do dia não caberia dentro dele. Em traço, ela é
a mesma tinta preta do resto da página — e o dia vai DENTRO, que é o que faz dela uma
folhinha e não um ícone de aplicativo. */
#view-mundial .mu-cal{flex:none; width:31px; margin-top:2px;}
#view-mundial .mu-cal svg{display:block; width:100%; height:auto;}
#view-mundial .mu-cal-caixa{fill:none; stroke:var(--jn-tinta); stroke-width:1.4;}
#view-mundial .mu-cal-arg{fill:none; stroke:var(--jn-tinta); stroke-width:1.6; stroke-linecap:round;}
#view-mundial .mu-cal-faixa{fill:none; stroke:var(--jn-tinta); stroke-width:1.4;}
#view-mundial .mu-cal text{
font-family:var(--jn-serifa); font-weight:700; font-size:var(--c-nota);
fill:var(--jn-tinta); text-anchor:middle;
}
#view-mundial .mu-agenda-cabeca{min-width:0;}
#view-mundial .mu-agenda-cabeca b{
display:block; font-family:var(--jn-serifa); font-size:var(--c-lede); line-height:1.3;
font-weight:700; color:var(--jn-tinta);
}
#view-mundial .mu-agenda-rotulo{
display:block; font-family:var(--jn-titulo); font-size:var(--c-micro); font-weight:700;
letter-spacing:0.14em; text-transform:uppercase; color:var(--brass-dark); margin-top:4px;
}
/* `text-align:left` no fim, e é conserto e não capricho: o `.mu-secao p` justifica todo
parágrafo acima de 420 px, e uma explicação de duas frases numa coluna de 200 px
justificada abre rios de branco. Justificar é para a MATÉRIA, que tem linha longa. */
#view-mundial .mu-agenda li > p{
font-family:var(--jn-serifa); font-size:var(--c-corpo); line-height:1.5;
color:var(--jn-tinta-suave); margin:6px 0 0; text-align:left;
}
/* NO CELULAR ESTREITO A EXPLICAÇÃO TAMBÉM ATRAVESSA, pela mesma conta do miolo em duas
colunas: numa tela de 390 px sobram 326 de recheio, o quadro come 34 e a folhinha mais
o vão comem 44 — restavam 248, uns trinta e quatro caracteres por linha. Abaixo de
quarenta a leitura fica picada; por baixo da folhinha, a linha volta a 292.
ESTA REGRA MORA AQUI, e não lá em cima junto com as outras de 419 px, e é conserto de
um erro medido: lá ela tinha a MESMA especificidade da regra base e vinha ANTES dela no
arquivo — a base ganhava, e a explicação continuava espremida. Regra que altera outra
mora depois dela; misturada por assunto, a cascata decide sozinha e em silêncio. */
@media (max-width:419px){
#view-mundial .mu-agenda li > p{grid-column:1 / -1;}
}
/* ── A LINHA DO TEMPO — a aba História ───────────────────────────────────────
31/08/2026. Um fio de tinta correndo pela esquerda, com um marco por acontecimento
e o ANO em cima dele. Vinte e seis acontecimentos em cento e trinta e quatro anos:
o que orienta o olho nessa distância é o ano, e não o dia.
O FIO É UMA BORDA DO `
`, e não um pseudo-elemento absoluto sobre a lista toda.
A diferença aparece no último item: com borda por item, o fio termina exatamente
onde o último acontecimento termina; com uma barra absoluta, ele sobraria pendurado
no branco embaixo, e "sobrando" é o que faz uma linha do tempo parecer cortada.
`list-style:none` com `` de propósito: a ordem IMPORTA (é uma cronologia, e
leitor de tela precisa saber disso), mas o número da lista não — quem numera aqui
é o ano. */
#view-mundial .mu-tempo{list-style:none; margin:26px 0 0; padding:0;}
#view-mundial .mu-tempo li{
position:relative; padding:0 0 34px 26px;
border-left:2px solid var(--jn-tinta);
}
#view-mundial .mu-tempo li:last-child{padding-bottom:6px;}
/* O MARCO. Miolo da cor do papel, e não transparente: o fio passa por trás dele, e um
miolo vazado deixaria o fio cortando a bolinha ao meio. */
#view-mundial .mu-tempo li::before{
content:""; position:absolute; left:-8px; top:5px;
width:14px; height:14px; border-radius:50%;
background:var(--bg); border:2px solid var(--jn-tinta);
}
/* A DATA: o ano grande, em serifada, e o dia pequeno em caixa alta ao lado. É o mesmo
par de vozes do resto da aba — a serifada é o texto, a sem serifa é o jornal falando. */
#view-mundial .mu-tempo-data{
display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; margin:0 0 4px;
}
#view-mundial .mu-tempo-data b{
font-family:var(--jn-serifa); font-size:clamp(23px, 5.8vw, 28px); font-weight:700;
line-height:1; letter-spacing:-0.01em; color:var(--jn-tinta);
font-variant-numeric:lining-nums tabular-nums;
}
#view-mundial .mu-tempo-data span{
font-family:var(--jn-titulo); font-size:var(--c-micro); font-weight:700;
letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);
}
#view-mundial .mu-tempo li > p{
font-family:var(--jn-serifa); font-size:var(--c-lede); line-height:1.62;
color:var(--jn-tinta-suave); margin:0 0 12px; text-align:left;
}
/* O CÉU E O ECO VIRARAM LINHA, e não quadro — ver o comentário do `muHtmlHistoria`.
O rótulo em caixa alta faz o trabalho que o filete duplo fazia: dizer onde a prosa
acaba e a medida começa. E o `display:block` no rótulo é o que impede a linha de
virar um parágrafo em que a etiqueta se perde no meio da frase. */
#view-mundial .mu-tempo-ceu, #view-mundial .mu-tempo-eco{
font-family:var(--jn-serifa); font-size:var(--c-apoio); line-height:1.5;
color:var(--jn-tinta-suave); margin:0 0 7px;
padding-left:11px; border-left:2px solid var(--jn-filete-fraco);
}
#view-mundial .mu-tempo-ceu b, #view-mundial .mu-tempo-eco b{
display:block; font-family:var(--jn-titulo); font-size:var(--c-micro); font-weight:700;
letter-spacing:0.15em; text-transform:uppercase; color:var(--muted);
margin-bottom:2px;
}
/* A manchete de cada acontecimento perde a margem de cima: a data já a apresentou. */
#view-mundial .mu-tempo li > .jn-chamada.jn-secundaria{margin-top:0;}
/* A FOTO ENCOLHE NA LINHA DO TEMPO. Um acervo de 280 px de altura por acontecimento,
vinte e seis vezes, deixa de ilustrar e vira um álbum — e a cronologia, que é o
assunto, some entre as imagens. */
#view-mundial .mu-tempo .jn-foto img{max-height:200px;}
/* Numa página larga a linha do tempo não passa de uma coluna de leitura: setenta
caracteres é o teto de linha confortável, e a aba tem 596 px de mancha. */
#view-mundial .mu-tempo{max-width:560px;}
/* ── O CARD QUE ABRE ─────────────────────────────────────────────────────────
31/08/2026. O botão é uma linha de jornal, e não um botão de aplicativo: sem
fundo, sem canto arredondado, sem sombra. O que diz que ele é clicável é a seta
e o sublinhado — e o cursor, para quem tem um.
ÁREA DE TOQUE DE 44 px, e ela é `min-height` e não recheio calculado — 31/08/2026,
depois de MEDIR: com `padding:12px 0 11px` sobre uma linha de 10 px o botão dava
35 px, e 35 não é 44. Recheio é conta que muda quando a fonte muda; `min-height` é
a regra dita por extenso, e é ela que continua valendo se alguém mexer no corpo do
texto. 44 px é o mínimo das diretrizes de toque de Apple e de Google — num dedo, um
alvo pequeno demais não é "difícil": é um clique que abre o card errado. */
#view-mundial .mu-tempo-abrir{
display:flex; align-items:center; gap:9px; width:100%;
background:none; border:none; padding:12px 0 11px; margin:4px 0 0; min-height:44px;
cursor:pointer; text-align:left; color:var(--jn-tinta);
font-family:var(--jn-titulo); font-size:var(--c-etiqueta); font-weight:700;
letter-spacing:0.13em; text-transform:uppercase;
border-top:1px solid var(--jn-filete-fraco);
}
#view-mundial .mu-tempo-abrir span:last-child{text-decoration:underline; text-underline-offset:3px;}
/* A SETA É DESENHO, e não um caractere: ▸ chega de larguras diferentes em cada
fonte de sistema, e nas que não o têm vira um retângulo vazio. Duas bordas e uma
rotação são a mesma seta em todo lugar. */
#view-mundial .mu-tempo-seta{
flex:none; width:7px; height:7px; margin-left:1px;
border-right:2px solid var(--jn-tinta); border-bottom:2px solid var(--jn-tinta);
transform:rotate(-45deg); transition:transform 160ms ease;
}
#view-mundial .mu-tempo-abrir[aria-expanded="true"] .mu-tempo-seta{
transform:rotate(45deg); margin-top:-3px;
}
/* O PAINEL É RECUADO E TEM FIO PRÓPRIO, como as duas linhas de céu acima dele: é a
mesma voz — a medida, e não a matéria —, e alinhar as três diz isso sem escrever. */
#view-mundial .mu-tempo-leitura{
padding-left:11px; border-left:2px solid var(--jn-tinta); margin:2px 0 4px;
}
#view-mundial .mu-tempo-leitura p{
font-family:var(--jn-serifa); font-size:var(--c-corpo); line-height:1.62;
color:var(--jn-tinta-suave); margin:0 0 11px; text-align:left;
}
#view-mundial .mu-tempo-leitura p:last-child{margin-bottom:2px;}
#view-mundial .mu-tempo-esperando{font-style:italic; color:var(--muted) !important;}
/* Quem pediu menos movimento não recebe a seta girando. */
@media (prefers-reduced-motion:reduce){
#view-mundial .mu-tempo-seta{transition:none;}
}
#view-mundial .mu-sub{font-family:var(--jn-serifa); font-size:var(--c-apoio); line-height:1.5; color:var(--muted); margin:0;}
/* ── AS FONTES ───────────────────────────────────────────────────────────────
Linha de crédito, como o "Foto: Fulano" de jornal. Pequena e SEMPRE visível:
escondê-la atrás de um clique transformaria o crédito em detalhe opcional, e é ele
que dispensa a licença. */
#view-mundial .mu-fontes{margin-top:14px; padding-top:10px; border-top:1px solid var(--jn-filete-fraco);}
#view-mundial .mu-fontes h4{
font-family:var(--jn-titulo); font-size:var(--c-micro); font-weight:700; letter-spacing:0.15em;
text-transform:uppercase; color:var(--muted); margin:0 0 5px;
}
#view-mundial .mu-fontes ul{list-style:none; margin:0; padding:0;}
#view-mundial .mu-fontes li{
display:flex; gap:9px; align-items:baseline; padding:2px 0;
font-family:var(--jn-serifa); font-size:var(--c-apoio); color:var(--muted);
}
#view-mundial .mu-fontes .mu-fonte-quando{flex:none; min-width:92px; font-style:italic;}
#view-mundial .mu-fontes a{color:var(--brass-dark); text-decoration:underline; text-decoration-color:rgba(140,100,37,0.4); text-underline-offset:2px; overflow-wrap:anywhere;}
/* ── AS EFEMÉRIDES ───────────────────────────────────────────────────────────
O bloco técnico do §25, e ele é desenhado como a tabela de bolsa de um jornal:
filete fino, alinhamento em colunas, corpo pequeno. Quem quer, lê; quem não quer,
passa por cima sem tropeçar. */
#view-mundial .mu-tecnico{margin:14px 0 4px; border-top:1px solid var(--jn-filete);}
#view-mundial .mu-tecnico summary{
cursor:pointer; padding:10px 0; font-family:var(--jn-titulo); font-size:var(--c-etiqueta);
font-weight:700; letter-spacing:0.15em; text-transform:uppercase; color:var(--brass-dark);
}
#view-mundial .mu-tecnico h3{
font-family:var(--jn-titulo); font-size:var(--c-micro); font-weight:700; letter-spacing:0.15em;
text-transform:uppercase; color:var(--muted); margin:14px 0 3px;
}
#view-mundial .mu-tecnico table{width:100%; border-collapse:collapse; font-family:var(--jn-serifa); font-size:var(--c-apoio);}
#view-mundial .mu-tecnico td{padding:5px 8px 5px 0; border-top:1px solid var(--jn-filete-fraco); color:var(--jn-tinta-suave); vertical-align:top;}
#view-mundial .mu-tecnico td:last-child{text-align:right; color:var(--muted); white-space:nowrap;}
/* A COLUNA DE SÍMBOLOS — 31/08/2026. Fica à esquerda e em largura fixa, como o código na
tabela de bolsa de um jornal: é ela que deixa a tabela SER VARRIDA em vez de lida.
`font-variant-emoji:text` outra vez, e pelo mesmo motivo da gravura: sem ela o navegador
serve a fonte COLORIDA de emoji para ♈…♓, e a tabela ganha signos roxos e laranjas no
meio da tinta. Foi visto numa captura antes.
A serifa aqui é decisão, e não herança: os glifos astronômicos têm desenho mais próximo
do traço de efeméride impressa na Georgia do que na Inter. */
#view-mundial .mu-tecnico td.mu-glifos{
font-family:var(--jn-serifa); font-size:var(--c-corpo); letter-spacing:0.12em;
color:var(--jn-tinta); white-space:nowrap; width:1%; padding-right:12px;
font-variant-emoji:text; -webkit-font-variant-emoji:text;
}
/* ABAIXO DE 420 px A TABELA DEIXA DE SER TABELA — 30/08/2026, visto numa captura de
320 px. "Saturno em Peixes · quadratura · Netuno em Gêmeos" na coluna da esquerda e
um "exato em 2 de setembro" que não quebra na da direita davam cinco linhas de um
lado e uma do outro, com um vão branco no meio. Duas colunas só funcionam quando as
duas cabem; nesta largura só cabe uma.
Empilhado, cada entrada vira o que ela é: a configuração, e embaixo quando. E o
`white-space` volta a `normal` na segunda linha — a razão de ele existir era manter
a data colada na coluna da direita, e coluna da direita não há mais. */
/* ABAIXO DE 560 px A LINHA VIRA GRADE, e o número subiu de 419 quando a COLUNA DE
SÍMBOLOS entrou — 31/08/2026. Com duas colunas, 419 era o ponto em que o texto
começava a se espremer; com três, isso passou a acontecer bem antes, e uma captura
de 430 px mostrou "Saturno em Peixes · quadratura · Netuno em Gêmeos" em três
linhas de duas palavras.
E NÃO É EMPILHAMENTO PURO: os símbolos continuam à ESQUERDA, porque é a coluna
deles que faz a tabela ser varrida em vez de lida — jogá-los para uma linha própria
devolveria o problema com outro nome. O que desce é a DATA, para debaixo do texto,
que é onde ela cabe sem disputar largura com nada. */
@media (max-width:559px){
#view-mundial .mu-tecnico tr{
display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 12px;
border-top:1px solid var(--jn-filete-fraco); padding:7px 0;
}
#view-mundial .mu-tecnico td{display:block; border-top:none; padding:0;}
#view-mundial .mu-tecnico td.mu-glifos{grid-row:1 / span 2; padding-right:0;}
#view-mundial .mu-tecnico td:last-child{
text-align:left; white-space:normal; font-style:italic; margin-top:2px;
}
}
/* ── O EXPEDIENTE ────────────────────────────────────────────────────────────
O rodapé de responsabilidade, no lugar onde todo jornal o põe. */
#view-mundial .jn-expediente{
border-top:3px solid var(--jn-tinta); margin:40px 0 44px; padding-top:16px;
font-family:var(--jn-serifa); font-size:var(--c-nota); line-height:1.6; color:var(--muted); text-align:center;
}
/* ===== ABA DO ASTRÓLOGO — ambiente de trabalho denso e rápido =====
"A plataforma calcula. O astrólogo interpreta." Zero interpretação. */
#view-astro-pro .ap-wrap{max-width:1080px; margin:0 auto; padding:0 24px 70px;}
#view-astro-pro .ap-grid{display:grid; grid-template-columns:290px 1fr; gap:16px; align-items:start;}
@media(max-width:860px){ #view-astro-pro .ap-grid{grid-template-columns:1fr;} }
#view-astro-pro .ap-panel{background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px; margin-bottom:14px; box-shadow:var(--shadow-1);}
#view-astro-pro .ap-panel h3{font-size:var(--c-etiqueta); text-transform:uppercase; letter-spacing:0.09em; color:var(--brass-dark); font-weight:700; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; cursor:pointer;}
#view-astro-pro .ap-panel h3 .tg{color:var(--muted); font-weight:400;}
#view-astro-pro .ap-panel.recolhido > *:not(h3){display:none;}
#view-astro-pro label{display:block; font-size:var(--c-etiqueta); font-weight:600; color:var(--ink); margin:9px 0 3px;}
/* mesma tipografia da Aba da Lua: Inter em tudo, títulos só maiores e mais pesados.
Os corpos caíram de 44/34px para 38/29px em 26/08/2026, junto com a saída da
Cormorant Garamond daqui: a Cormorant tem olho pequeno, e o mesmo número de pixels
em Inter dá uma letra visivelmente maior — mantidos os 44px, o título passava a
gritar por cima da roda, que é o que esta tela existe para mostrar. */
#view-astro-pro{font-family:var(--fonte-interface);}
#view-astro-pro h1, #view-astro-pro h2{font-family:var(--fonte-titulo); font-weight:600; letter-spacing:-0.018em;}
#view-astro-pro h1{font-size:var(--t-display); line-height:1.1;}
#view-astro-pro h2{font-size:var(--t-secao); line-height:1.15;}
#view-astro-pro h3{font-family:var(--fonte-titulo); font-size:var(--c-apoio); text-transform:uppercase; letter-spacing:0.13em; font-weight:700;}
#view-astro-pro p, #view-astro-pro li, #view-astro-pro label, #view-astro-pro td, #view-astro-pro th{font-family:var(--fonte-interface);}
#view-astro-pro p, #view-astro-pro li{font-size:var(--c-corpo); line-height:1.75;}
#view-astro-pro label{font-size:var(--c-apoio);}
#view-astro-pro button{font-family:var(--fonte-interface);}
#view-astro-pro input, #view-astro-pro select, #view-astro-pro textarea{width:100%; padding:11px 13px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:16px; background:#fff; color:var(--ink); font-family:inherit; box-sizing:border-box;}
/* data e hora nativos precisam de altura mínima explícita — sem isso o
widget do navegador comprime os próprios segmentos (dia/mês/ano),
diferente do resto do app onde .birth-form já usa 50px de altura. */
/* 16 PX NOS CAMPOS — 03/09/2026, pelo mesmo motivo da aba lunar: abaixo disso o iOS dá
zoom na página ao toque. Vale mesmo com a bancada oculta hoje — ela é a tela deste
app com MAIS campos, e é a que mais sofreria com o salto a cada toque. */
#view-astro-pro input[type=date], #view-astro-pro input[type=time]{min-height:46px; font-size:16px;}
#view-astro-pro input:focus, #view-astro-pro select:focus, #view-astro-pro textarea:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 3px var(--brass-glow);}
#view-astro-pro .ap-row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
/* sem min-width:0 o campo de data/hora usa a largura intrínseca do widget
nativo e estoura a coluna do grid — é o que fazia os dois se encostarem. */
#view-astro-pro .ap-row2 > *{min-width:0;}
#view-astro-pro input[type=date], #view-astro-pro input[type=time]{min-width:0; max-width:100%; appearance:none; -webkit-appearance:none;}
#view-astro-pro .apt-cores{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:6px 0 4px;}
#view-astro-pro .apt-cores > label{display:flex; flex-direction:column; align-items:center; gap:4px; font-size:var(--c-etiqueta); color:var(--muted); text-align:center; letter-spacing:0.02em; line-height:1.3;}
#view-astro-pro .apt-cores input[type=color]{width:100%; height:34px; min-height:0; padding:2px; border:1px solid var(--border); border-radius:6px; background:#fff; cursor:pointer;}
#view-astro-pro #ap-panel-visual input[type=range]{width:100%; margin:2px 0 10px; padding:0; min-height:0; border:none; background:transparent;}
#view-astro-pro #ap-panel-visual > label:not(.ap-check){display:block; margin-top:4px; font-size:var(--c-nota); color:var(--ink-soft);}
#view-astro-pro #ap-panel-visual .apt-sep{margin-top:14px; padding-top:12px; border-top:1px solid var(--border); font-size:var(--c-etiqueta); text-transform:uppercase; letter-spacing:0.1em; color:var(--brass-dark); font-weight:700;}
#view-astro-pro .ap-check{display:flex; align-items:center; gap:7px; font-size:var(--c-apoio); color:var(--ink-soft); padding:3px 0;}
#view-astro-pro .ap-check input{width:auto;}
#view-astro-pro .ap-btn{width:100%; margin-top:12px; background:var(--brass); color:#fff; font-weight:700; font-size:var(--c-corpo); padding:12px; border:none; border-radius:var(--radius-sm); box-shadow:var(--shadow-brass);}
#view-astro-pro .ap-btn:hover{background:var(--brass-dark);}
#view-astro-pro .ap-btn-sec{width:auto; background:transparent; border:1px solid var(--brass-dark); color:var(--brass-dark); font-weight:600; font-size:var(--c-nota); padding:7px 12px; border-radius:var(--radius-sm); cursor:pointer;}
#view-astro-pro .ap-btn-sec:hover{background:var(--brass-light);}
#view-astro-pro .ap-cli-lista{max-height:230px; overflow-y:auto; margin-bottom:8px;}
#view-astro-pro .ap-cli-item{padding:8px 9px; border-radius:var(--radius-sm); cursor:pointer; font-size:var(--c-apoio); color:var(--ink); display:flex; justify-content:space-between; gap:8px;}
#view-astro-pro .ap-cli-item:hover{background:var(--card-alt);}
#view-astro-pro .ap-cli-item.ativo{background:var(--brass-light); font-weight:600;}
#view-astro-pro .ap-cli-item .cat{font-size:var(--c-etiqueta); color:var(--muted);}
#view-astro-pro .ap-status{font-size:var(--c-apoio); color:var(--muted); min-height:16px; margin-top:8px; text-align:center;}
#view-astro-pro .ap-status.erro{color:var(--rust);}
#view-astro-pro table{width:100%; border-collapse:collapse; font-size:var(--c-apoio); font-variant-numeric:tabular-nums;}
#view-astro-pro th{text-align:left; font-size:var(--c-micro); color:var(--muted); text-transform:uppercase; letter-spacing:0.06em; padding:4px 4px 6px; border-bottom:1px solid var(--border);}
#view-astro-pro td{padding:5px 4px; border-bottom:1px solid var(--border-soft); color:var(--ink);}
#view-astro-pro td .sub{display:block; font-size:var(--c-etiqueta); color:var(--muted);}
#view-astro-pro .ap-tag{display:inline-block; font-size:var(--c-etiqueta); background:var(--brass-light); color:var(--brass-dark); border-radius:var(--radius-pill); padding:1px 7px; margin:1px 2px 1px 0;}
#view-astro-pro .ap-tag.neg{background:#F3E4DC; color:var(--rust);}
#view-astro-pro .ap-export{display:flex; gap:8px; justify-content:center; margin-top:10px; flex-wrap:wrap;}
#view-astro-pro .ap-pitch{max-width:560px; margin:50px auto; text-align:center;}
#view-astro-pro .ap-pitch ul{list-style:none; margin:16px 0; text-align:left;}
#view-astro-pro .ap-pitch li{padding:7px 0; border-bottom:1px solid var(--border-soft); font-size:var(--c-corpo); color:var(--ink-soft);}
#view-astro-pro .ap-pitch li::before{content:"• "; color:var(--brass);}
#view-astro-pro .ap-nota-motor{font-size:var(--c-etiqueta); color:var(--muted); text-align:center; margin-top:14px; line-height:1.6;}
#view-lunar .lu-reflexao{font-style:italic; color:var(--lu-cream-dim) !important; margin-top:16px !important; border-left:2px solid var(--lu-border); padding-left:16px; font-size:var(--c-corpo) !important;}
#view-lunar .lu-reflexao-txt::before{content:"\201C";}
#view-lunar .lu-reflexao-txt::after{content:"\201D";}
#view-lunar .lu-reflexao-cred{display:block; margin-top:8px; font-style:normal; font-size:var(--c-etiqueta);
letter-spacing:0.05em; text-transform:uppercase; color:var(--lu-gold); font-weight:600;}
#view-lunar .lu-reflexao-cred .lu-cred-obra{font-size:var(--c-etiqueta);}
#view-lunar .lu-card-destaque{border-color:rgba(234,224,198,0.22); background:linear-gradient(180deg, rgba(24,24,27,0.9) 0%, rgba(12,12,14,0.94) 100%); box-shadow:0 18px 50px rgba(0,0,0,0.35), inset 0 1px 0 rgba(234,224,198,0.08);}
#view-lunar .lu-ativa-titulo{font-family:var(--fonte-titulo); font-size:var(--t-bloco); font-weight:600; letter-spacing:-0.017em; color:var(--lu-ink); margin-bottom:14px;}
#view-lunar .lu-ativa{list-style:none; margin:0 0 6px; padding:0;}
#view-lunar .lu-ativa li{display:flex; align-items:baseline; gap:10px; padding:9px 0; font-size:var(--c-corpo); color:var(--lu-soft); border-bottom:1px solid var(--lu-border-soft);}
#view-lunar .lu-ativa li:last-child{border-bottom:none;}
#view-lunar .lu-ativa li::before{content:"☽\FE0E"; color:var(--lu-cream-dim); font-size:var(--c-apoio);}
#view-lunar .lu-ativa b{color:var(--lu-cream); font-weight:600;}
#view-lunar .zg{font-family:'Noto Sans Symbols','Noto Sans Symbols 2','Segoe UI Symbol',sans-serif; color:var(--lu-cream);}
/* A `#view-produto-fechado` entrou aqui em 31/08: ela é a apresentação que
morava dentro desta aba, e usa a mesma caixa e o mesmo sobretítulo. */
#view-assinante .as-wrap,
#view-produto-fechado .as-wrap{max-width:680px; margin:0 auto;}
/* textura de pergaminho + vinheta — mesma linguagem do Horóscopo e do Dia */
#view-assinante{position:relative;}
#view-assinante::before{
content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.5; mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,` e virou ``. */
#view-produto-fechado .as-landing-lista li::before{
content:""; flex:none; width:7px; height:7px; border-radius:50%;
background:var(--brass,#AB7C3B); margin-top:9px;
}
#view-produto-fechado .as-landing-lista b{
display:block; font-family:var(--fonte-interface); font-weight:600; font-size:var(--c-lede);
color:var(--ink,#1B160F); margin-bottom:5px; letter-spacing:-0.01em;
}
#view-produto-fechado .as-landing-lista p{font-size:var(--c-corpo); line-height:1.65; color:var(--ink-soft,#423C33); margin:0;}
#view-produto-fechado .as-landing-cta{
background:rgba(255,255,255,0.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
border:1px solid rgba(171,124,59,0.32); border-radius:16px; padding:28px; text-align:center; margin-top:26px;
box-shadow:0 10px 26px rgba(110,78,35,0.1);
}
#view-produto-fechado .as-landing-cta h3{font-family:var(--fonte-titulo); font-weight:600; font-size:var(--t-cartao); color:#1B160F; margin:0 0 8px;}
#view-produto-fechado .as-landing-cta .btn-primary{width:100%; max-width:320px; margin-top:6px;}
#view-produto-fechado .as-landing-nota{font-size:var(--c-apoio); color:#6B5D45; margin:0 0 18px; line-height:1.65;}
/* A linha de login fica DISCRETA de propósito: quem já assina e só esqueceu de
entrar precisa dela, mas ela não pode competir com o convite de assinatura. */
#view-produto-fechado .as-landing-login{font-size:var(--c-apoio); color:var(--muted,#8B8172); margin:18px 0 0;}
#view-produto-fechado .as-landing-login a{color:var(--brass-dark,#7E5A28); font-weight:600; text-decoration:underline;}
#view-produto-fechado .as-landing-status{font-size:var(--c-apoio); line-height:1.6; margin-top:14px;}
#view-produto-fechado .as-landing-status.ok{color:var(--success,#2E7D4F); font-weight:600;}
#view-synastry .syn-wrap{max-width:760px; margin:0 auto;}
#view-synastry .syn-forms{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:26px;}
@media(max-width:680px){ #view-synastry .syn-forms{grid-template-columns:1fr;} }
#view-synastry .syn-person{padding:20px; transition:box-shadow 240ms ease, border-color 240ms ease;}
#view-synastry .syn-person:focus-within{border-color:var(--brass,#AB7C3B); box-shadow:var(--shadow-2, 0 8px 22px rgba(36,29,18,0.09));}
#view-synastry .syn-person h4{font-size:var(--c-nota); text-transform:uppercase; letter-spacing:0.08em; color:var(--brass-dark,#7E5A28); margin:0 0 14px; font-weight:700;}
#view-synastry .syn-person label{display:block; font-size:var(--c-nota); color:var(--muted,#8B8172); margin:10px 0 4px;}
/* OS CAMPOS DE DATA E DE HORA SAÍAM TORTOS — 28/08/2026.
Eram três defeitos somados, e todos os três já tinham conserto escrito neste
arquivo, no `.birth-form` (o formulário do mapa grátis). Aqui a regra nunca foi
copiada — e é por isso que ela é copiada AGORA com os motivos junto, para a
próxima pessoa não ter de descobrir de novo:
1. `padding` sem `height`. O campo de texto tem a altura da linha de texto; o
de data e o de hora têm a altura do CONTROLE NATIVO do sistema, que é outra.
Lado a lado no mesmo `grid`, um ficava mais alto que o outro. Altura fixa
(46px) e `line-height` igual resolvem: os três passam a medir o mesmo;
2. sem `-webkit-appearance:none`, o iOS desenha o campo de hora com o estilo
dele — canto, sombra e recuo próprios — por cima do nosso. O
`-webkit-min-logical-width:0px` é o par disso: sem ele o Safari dá ao campo
uma largura mínima interna maior que a coluna, e o conteúdo vaza para fora
da borda, que é a aparência que a foto mostrou;
3. `font-size:14px`. Abaixo de 16px o iOS DÁ ZOOM na página ao tocar no campo, e
a tela inteira sai do lugar. 16px é o menor tamanho que ele não amplia. */
#view-synastry .syn-person input{
width:100%; max-width:100%; min-width:0; height:46px; padding:0 12px; line-height:46px;
border:1px solid var(--border,#E7DCBE); border-radius:var(--radius-sm,7px); font-size:16px;
background:#fff; color:var(--ink,#1B160F); -webkit-text-fill-color:var(--ink,#1B160F);
font-family:inherit;
}
#view-synastry .syn-person input[type="date"], #view-synastry .syn-person input[type="time"]{
-webkit-appearance:none; appearance:none; -webkit-min-logical-width:0px; min-width:0;
color:var(--ink,#1B160F) !important; -webkit-text-fill-color:var(--ink,#1B160F) !important;
}
#view-synastry .syn-person input:hover{border-color:#D8C79A;}
#view-synastry .syn-person input:focus{outline:none; border-color:var(--brass,#AB7C3B); box-shadow:0 0 0 4px var(--brass-glow, rgba(171,124,59,0.3));}
#view-synastry .syn-row2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
/* Sem isto uma coluna do `grid` nunca encolhe abaixo do conteúdo dela — é a regra
`min-width:auto` do CSS —, e o campo de data empurra o de hora para fora da
largura do cartão em tela estreita. */
#view-synastry .syn-row2 > div{min-width:0;}
#view-synastry .syn-nota{font-size:var(--c-nota); color:var(--muted,#8B8172); line-height:1.55; margin:10px 2px 0;}
#view-synastry .syn-score{text-align:center; padding:38px 20px; background:var(--card,#fff); border:1px solid var(--border,#E7DCBE); border-radius:var(--radius-lg,14px); margin-bottom:22px; box-shadow:var(--shadow-3, 0 16px 36px rgba(36,29,18,0.12)); position:relative; overflow:hidden; animation:fadeInUp 480ms cubic-bezier(.22,.61,.36,1) both;}
#view-synastry .syn-score::before{content:""; position:absolute; top:-40%; left:50%; transform:translateX(-50%); width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, var(--brass-glow, rgba(171,124,59,0.3)), rgba(171,124,59,0) 70%); pointer-events:none;}
#view-synastry .syn-score .pct{font-size:66px; line-height:1; font-weight:600; color:var(--brass-dark,#7E5A28); letter-spacing:-0.02em; font-family:var(--fonte-titulo); position:relative;}
#view-synastry .syn-score .names{font-size:15px; color:var(--ink,#1B160F); margin:14px 0 6px; font-weight:600; position:relative;}
#view-synastry .syn-score .verdict{font-size:14px; color:var(--ink-soft,#423C33); max-width:440px; margin:0 auto; position:relative; line-height:1.6;}
#view-synastry .syn-lists{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:24px;}
@media(max-width:680px){ #view-synastry .syn-lists{grid-template-columns:1fr;} }
#view-synastry .syn-lists li{list-style:none; font-size:var(--c-apoio); color:var(--ink-soft,#423C33); padding:8px 2px; border-bottom:1px solid var(--border-soft,#F0E9D6); line-height:1.5; transition:background 140ms ease;}
#view-synastry .syn-lists li:hover{background:var(--card-alt,#FBF6EA); border-radius:6px;}
#view-synastry .syn-lists li:last-child{border-bottom:none;}
#view-synastry .syn-lists .glyph{color:var(--brass-dark,#7E5A28); font-variant-emoji:text;}
#view-synastry .syn-actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-bottom:26px;}
#view-synastry .syn-upsell{background:var(--brass-light,#F1E4C8); border-radius:var(--radius-md,12px); padding:26px 24px; text-align:center; border:1px solid rgba(126,90,40,0.16);}
#view-synastry .syn-upsell h3{font-size:var(--t-cartao); margin:0 0 8px;}
#view-synastry .syn-upsell p{font-size:var(--c-apoio); color:var(--ink-soft,#423C33); margin:0 0 16px; line-height:1.6;}
#view-synastry canvas{display:none;}
#view-lunar .lu-reflexao{font-style:italic; color:var(--lu-cream-dim) !important; margin-top:16px !important; border-left:2px solid var(--lu-border); padding-left:16px; font-size:var(--c-corpo) !important;}
#view-lunar .lu-reflexao-txt::before{content:"\201C";}
#view-lunar .lu-reflexao-txt::after{content:"\201D";}
#view-lunar .lu-reflexao-cred{display:block; margin-top:8px; font-style:normal; font-size:var(--c-etiqueta);
letter-spacing:0.05em; text-transform:uppercase; color:var(--lu-gold); font-weight:600;}
#view-lunar .lu-reflexao-cred .lu-cred-obra{font-size:var(--c-etiqueta);}
#view-lunar .lu-card-destaque{border-color:rgba(234,224,198,0.22); background:linear-gradient(180deg, rgba(24,24,27,0.9) 0%, rgba(12,12,14,0.94) 100%); box-shadow:0 18px 50px rgba(0,0,0,0.35), inset 0 1px 0 rgba(234,224,198,0.08);}
#view-lunar .lu-ativa-titulo{font-family:var(--fonte-titulo); font-size:var(--t-bloco); font-weight:600; letter-spacing:-0.017em; color:var(--lu-ink); margin-bottom:14px;}
#view-lunar .lu-ativa{list-style:none; margin:0 0 6px; padding:0;}
#view-lunar .lu-ativa li{display:flex; align-items:baseline; gap:10px; padding:9px 0; font-size:var(--c-corpo); color:var(--lu-soft); border-bottom:1px solid var(--lu-border-soft);}
#view-lunar .lu-ativa li:last-child{border-bottom:none;}
#view-lunar .lu-ativa li::before{content:"☽\FE0E"; color:var(--lu-cream-dim); font-size:var(--c-apoio);}
#view-lunar .lu-ativa b{color:var(--lu-cream); font-weight:600;}
#view-lunar .zg{font-family:'Noto Sans Symbols','Noto Sans Symbols 2','Segoe UI Symbol',sans-serif; color:var(--lu-cream);}
#view-eletiva .el-wrap{max-width:1080px; margin:0 auto;}
/* ==========================================================================
A CAPA DE FUNDO DA ASTROLOGIA ELETIVA — 03/09/2026, trocada em 06/09/2026
==========================================================================
Pedido da dona, com a fotografia em anexo: "pode usar essa aqui de capa de fundo
(mesmo padrão do resto do app) na página de astrologia eletiva". Em 06/09 ela mandou
outra foto e a mesma frase curta: "muda a capa da eletiva para este aqui deitado".
A ARTE É O ANEL DOS SIGNOS DE UM RELÓGIO ASTRONÔMICO — o aro em latão com os glifos
do zodíaco, o mostrador de bronze e os ponteiros do Sol. Ela cai bem aqui por assunto,
e não só por cor: esta tela escolhe a HORA de começar alguma coisa, e um relógio
astronômico é a máquina que diz onde o céu está a cada hora.
"DEITADO" É O ENQUADRAMENTO, E NÃO UMA ROTAÇÃO. A foto veio em pé (2000 × 3000) e a
capa é uma tira 3,2:1; o corte usa a LARGURA INTEIRA da foto, que é a ampliação
MENOR possível numa tira — qualquer recorte mais estreito aproximaria mais. Girar a
fotografia 90° deitaria o relógio de lado, que é outra coisa e não é o padrão de
nenhuma das artes do app.
O QUE SAIU: a carta náutica com a rosa dos ventos (`rosa-dos-ventos-*`), que era a
capa desde 03/09. Os quatro arquivos dela saíram do repositório junto — arte que
ninguém mais cita é peso morto no `dist/`, e o Git guarda a história de quem quiser
voltar.
O PADRÃO É O QUE JÁ EXISTE, e ele tem duas metades que nasceram em dias diferentes:
· a FAIXA DE ARTE das seções Metodologia e Perguntas frequentes
(`metodo-testemunhos-faq-e-rodape.css`): recorte em 3,2:1, dois tamanhos, WebP com
JPEG de reserva pelo `image-set`, `multiply` com opacidade baixa e uma máscara que
dissolve a ponta de baixo, para a arte não terminar num corte reto;
· a ARTE QUE PASSA POR BAIXO DA BARRA FIXA da página inicial
(`pagina-inicial-e-formulario.css`): a arte começa no ZERO da tela e o cabeçalho
vira vidro por cima dela. Foi escolha da dona em 01/09, e aqui vale igual — o
`--vidro-sobre-arte` é o mesmo token das duas telas.
O FILTRO VOLTOU COM ELA, e o comentário que estava aqui dizia o contrário — está
escrito assim de propósito, porque a regra é a mesma nos dois casos e só a foto mudou.
Até 06/09 esta capa era uma carta náutica que já nascia em papel e tinta sépia, e
filtrar teria sujado uma arte que já estava na paleta. Uma FOTOGRAFIA de relógio, não:
o verde-azulado e o dourado dela chegam ao creme como uma mancha colorida no meio do
pergaminho. Volta, então, o mesmo acabamento das outras duas fotos de relógio
(`metodo-testemunhos-faq-e-rodape.css`): `saturate/sepia/contrast` recolhendo o
cobalto para um cinza morno, com opacidade baixa e `multiply` — que é o que faz a
arte pegar a cor do papel em vez de pousar por cima dele.
A LIÇÃO, para quem puser a quarta arte: o filtro não é do LUGAR, é da FOTO. Desenho
em papel antigo não filtra; fotografia colorida filtra.
A FAIXA VIVE NA TELA, E NÃO NA CAPA. A `.el-capa` é a `.section-head` do app, com
600 px de largura máxima: uma arte presa a ela sairia como um retângulo no meio do
creme. Presa à tela, ela é de borda a borda — e o `left/right:0` faz isso sem `100vw`,
que somaria a largura da barra de rolagem e abriria rolagem horizontal no computador.
========================================================================== */
#view-eletiva{position:relative;}
/* A altura é a da capa inteira: cabeçalho, sobretítulo, título, a frase e o campo de
busca. A máscara é quem decide onde a arte acaba — e ela acaba ANTES das prateleiras,
porque um cartão de eleição sobre a carta náutica seria dois desenhos no mesmo lugar. */
#view-eletiva::before{
content:""; position:absolute; top:0; left:0; right:0; z-index:0; pointer-events:none;
height:clamp(300px, 42vw, 480px);
background-size:cover; background-position:center 44%; background-repeat:no-repeat;
background-image:url("/assets/relogio-do-zodiaco-1280.jpg");
background-image:image-set(url("/assets/relogio-do-zodiaco-1280.webp") type("image/webp"),
url("/assets/relogio-do-zodiaco-1280.jpg") type("image/jpeg"));
opacity:0.38; mix-blend-mode:multiply; filter:saturate(0.52) sepia(0.18) contrast(0.96);
/* A MÁSCARA TEM CINTURA — 06/09/2026, e ela nasceu de uma frase da dona: "tá difícil
ler o título; é problema da imagem de fundo que escolhi?".
NÃO ERA DA IMAGEM, E A RESPOSTA ESTAVA NESTAS DUAS LINHAS. A máscara antiga
segurava a arte com FORÇA TOTAL no topo (1 aos 0%, 0,92 aos 30%) e a dissolvia
embaixo — ou seja: a arte era mais forte exatamente onde ficam as PALAVRAS, e mais
fraca onde não há nada. O desenho estava de costas para o texto desde 03/09.
POR QUE NINGUÉM TINHA VISTO: até 06/09 a capa era uma carta náutica — desenho
chapado, de traço fino e claro. Uma FOTOGRAFIA tem barras de latão da mesma
espessura e da mesma direção das hastes de uma serifa, e aí a letra passa a
disputar com o fundo. O erro era antigo; a foto só o revelou.
A CINTURA é o conserto: a arte continua inteira na tira de cima (que fica atrás do
vidro do cabeçalho), AFROUXA na faixa do título e da frase, e volta a apertar
embaixo antes de se dissolver. Medido, no pior pixel atrás do título: de 8,96 para
12,87 no celular e de 7,77 para 11,27 no computador. A régua da capa passou a
cobrar esse chão — ver `conferir_a_tela.js`. */
-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.86) 10%, rgba(0,0,0,0.34) 30%, rgba(0,0,0,0.30) 52%, rgba(0,0,0,0.42) 70%, rgba(0,0,0,0) 100%);
mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.86) 10%, rgba(0,0,0,0.34) 30%, rgba(0,0,0,0.30) 52%, rgba(0,0,0,0.42) 70%, rgba(0,0,0,0) 100%);
}
/* O CONTEÚDO SOBE PARA CIMA DA ARTE. A barra do topo não precisa desta linha — ela é
`sticky` com `z-index:50` e já passa por cima —, e é justamente por isso que ela vira
vidro aqui: para a arte aparecer POR BAIXO dela, como na página inicial. */
#view-eletiva > .el-wrap{position:relative; z-index:1;}
#view-eletiva header{background:var(--vidro-sobre-arte); border-bottom:0;}
/* NO CELULAR A ARTE TEM ENQUADRAMENTO PRÓPRIO, e não é o mesmo corte em outro tamanho —
é a mesma decisão que a roda da página inicial já tinha tomado, pela mesma razão.
A faixa do computador é uma TIRA (3,2:1) e cabe num espaço largo e baixo. Numa tela de
390 px a mesma faixa tem 300 px de altura: o `cover` amplia a tira até a altura caber,
e o que sobra na largura é 40% do meio dela — o anel dos signos vira mancha, e não se
reconhece relógio nenhum. Medido numa captura, antes de trocar.
O arquivo do celular é, por isso, um corte MAIS ALTO da mesma fotografia (640 × 440),
com o arco do anel inteiro dentro: o Leão, a Virgem, o mostrador de bronze e os
ponteiros. No espaço estreito ele entra quase sem ampliação.
OS DOIS CORTES COMEÇAM NA MESMA LINHA da foto (y = 400 de 3000), e é isso que faz a
capa ser a MESMA imagem em duas telas em vez de duas fotos parecidas: muda quanto se
vê, não o que se vê.
DOIS CORTES, E NÃO DOIS TAMANHOS: quem for regerar um tem de olhar o outro, senão a
arte muda de composição conforme a tela de quem abre. */
@media (max-width:700px){
#view-eletiva::before{
background-image:url("/assets/relogio-do-zodiaco-640.jpg");
background-image:image-set(url("/assets/relogio-do-zodiaco-640.webp") type("image/webp"),
url("/assets/relogio-do-zodiaco-640.jpg") type("image/jpeg"));
}
}
/* --- a vitrine --------------------------------------------------------
A PRATELEIRA VOLTOU A SER A DO RESTO DO APP — 26/08/2026.
Ela nasceu com CSS própria (`.el-prat`, `.el-linha`, `.el-cartao`, `.el-setas`)
para não se acoplar ao catálogo da home. O custo apareceu na primeira vez que a
casca mudou: o cartão do Mapa eletivo era o único do aplicativo com outra forma,
outro tamanho e sem capa — e, quando os cartões da home ganharam a animação de vir
para a frente, estes ficariam de fora sem ninguém perceber. Agora são as MESMAS
classes (`.catalog-group`, `.group-head`, `.row-arrows`, `.poster-row`,
`.poster-card`): o que for feito no cartão vale para os três lugares onde ele
aparece — a home, esta vitrine e a busca por termo. */
/* A CAPA DA VITRINE — 03/09/2026, e a queixa da dona era de AR: "capa da astrologia
eletiva, espaçamento muito junto".
Ela não tinha folga nenhuma. O sobretítulo nascia colado no menu — a `.section-head`
do resto do app só reserva espaço EMBAIXO (`margin:0 auto 48px`), e nesta tela não
há nada acima dela para empurrá-la para baixo. É o mesmo respiro que a capa da
página do objetivo já tinha (`padding-top:34px`, no `eletiva-o-objetivo.css`), e por
isso o número é o mesmo: as duas telas são a mesma capa em dois tamanhos, e duas
folgas diferentes é como uma delas envelhece sozinha.
O QUE MUDA ALÉM DO TOPO: o título ganha uma margem própria acima da frase (o `h2` do
app vem com margem zero, e a frase encostava nele), e a frase ganha respiro até o
campo de busca. Nenhum tamanho de letra é escrito em número aqui — o `--c-lede` da
frase e o `--t-display` do título são degraus da escala, e não medidas escolhidas.
(O `--t-display` do título chegou em 06/09/2026; ver o bloco logo abaixo.) */
#view-eletiva .el-capa{padding-top:34px; margin-bottom:32px;}
/* O TÍTULO SUBIU UM DEGRAU EM 06/09/2026 — a dona: "aumente o título Qual o melhor
momento?". `--t-secao` (26 a 32 px) é o degrau de um título DENTRO de uma tela;
`--t-display` (30 a 44 px) é o da ABERTURA de uma tela, um por tela. No mesmo pedido
saiu o sobretítulo, e sem ele é este `h2` que abre a vitrine — então ele já não era
um título de seção, era a abertura. Um degrau, e não um número: a régua da escada
tipográfica proíbe `font-size` com número novo, e proíbe por isto mesmo — foi assim
que o projeto chegou a 36 tamanhos diferentes.
A REGRA DE UM `--t-display` POR TELA CONTINUA VALENDO: as prateleiras usam `h3`, e
o `h2` das seções de sempre (Metodologia, Perguntas frequentes) vive fora da `.wrap`,
na `.secoes-de-sempre`, no degrau dele. */
#view-eletiva .el-capa h2{margin:0 0 8px; font-size:var(--t-display);}
/* O SUBTÍTULO — 07/09/2026, quando "Astrologia eletiva" voltou a ser o título e a
pergunta desceu para debaixo dele. `--t-secao` é o degrau logo abaixo do
`--t-display`, e a escada da capa passa a ter três degraus em vez de dois:
abertura, pergunta, frase. Nenhum número novo — o porquê está no `index.html`,
junto do texto.
A margem do `h2` caiu de 14 para 8 px porque agora há uma peça entre ele e a frase:
os 14 px separavam duas linhas, e entre três eles abriam um buraco no meio da capa. */
#view-eletiva .el-capa-sub{font-size:var(--t-secao); line-height:1.25; margin:0 0 12px;
font-family:var(--fonte-titulo); color:var(--ink);}
#view-eletiva .el-capa-frase{font-size:var(--c-lede); line-height:1.6; margin:0;}
#view-eletiva .el-busca{max-width:560px; margin:0 auto 30px; position:relative;}
/* A CAPA TEM DEGRAUS, E ELES SÃO OS DA ESCADA DO PROJETO — 03/09/2026, a pedido da
dona: "precisa ter aquele padrão: título maior, subtítulo menor e corpo menor".
· o título `--t-display` (30 a 44 px) "Qual o melhor momento?"
· o subtítulo `--c-lede` (16 px) "Tudo sob este céu tem o seu tempo…"
· a instrução 16 px, dentro do campo "Digite aqui seu objetivo"
ERAM TRÊS DEGRAUS ATÉ 06/09/2026, quando a instrução entrou para dentro do campo. Ela
deixou de ser uma linha de texto na tela e passou a ser o `placeholder`, que herda o
tamanho do campo — e o campo é 16 px por motivo de iOS, logo abaixo. A escada continua
de pé porque o que ela guarda continua verdade: o título é o maior, e o que vem depois
dele é menor. Nenhum número novo entra aqui.
O RÓTULO AGORA É INVISÍVEL, E NÃO AUSENTE. `position:absolute` com 1 px e `clip-path`
tira ele dos olhos e o deixa na árvore de acessibilidade; `display:none` tiraria dos
dois. Ver o comentário no `index.html`, onde a decisão está contada por inteiro. */
#view-eletiva .el-busca-rotulo{position:absolute; width:1px; height:1px; padding:0;
margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;}
/* 16px, e não 15: abaixo disso o iOS dá zoom na página ao tocar no campo, e a
vitrine inteira sai do lugar antes da primeira letra. Mesmo motivo dos campos do
pedido, logo abaixo. */
#view-eletiva .el-busca input{width:100%; padding:14px 16px; border:1px solid var(--border,#E7DCBE);
border-radius:999px; font-size:16px; background:#fff; color:var(--ink,#1B160F); font-family:inherit; box-sizing:border-box;}
#view-eletiva .el-busca input::placeholder{color:var(--muted,#6F6659); opacity:0.9;}
#view-eletiva .el-busca input:focus{outline:none; border-color:var(--brass,#AB7C3B);
box-shadow:0 0 0 4px var(--brass-glow,rgba(171,124,59,0.3));}
#view-eletiva .el-busca .el-hint{text-align:center;}
/* A busca por termo deixa de rolar para o lado e vira grade: com uma palavra na mão
a pessoa quer ver tudo o que bate de uma vez. */
#view-eletiva .poster-row.em-grade{flex-wrap:wrap; overflow:visible; scroll-snap-type:none;}
/* A CSS do formulário de busca e dos cartões de janela saiu daqui em 22/08/2026,
junto com a busca gratuita. O que sobrou é o que a vitrine ainda usa. */
#view-eletiva .el-hint{font-size:var(--c-nota); color:var(--muted,#8F8676); margin-top:8px; line-height:1.6;}
#view-eletiva .el-vazio{text-align:center; padding:36px 20px; color:var(--ink-soft,#423C33); font-size:var(--c-corpo); line-height:1.7;}
/* Aviso honesto quando a geração está mesmo falhando, e não só demorando */
.lib-card-cover.is-falhando{filter:saturate(0.55);}
.lib-timer-label.falhando{color:#F0C9A8;}
.lib-timer.falhando{color:#F0C9A8; font-weight:600;}
/* Painel de alertas operacionais — só aparece para quem é admin */
.admin-alertas{margin:0 0 22px; border:1px solid #C8A06A; border-left:4px solid var(--rust,#8F3A2A); background:#FDF6E9; border-radius:var(--radius-md,12px); padding:16px 18px;}
.admin-alertas h4{margin:0 0 4px; font-size:var(--c-nota); text-transform:uppercase; letter-spacing:0.09em; color:var(--rust,#8F3A2A); font-weight:700;}
.admin-alertas p.sub{margin:0 0 10px; font-size:var(--c-nota); color:var(--muted,#8F8676);}
.admin-alertas ul{margin:0; padding:0; list-style:none;}
.admin-alertas li{font-size:var(--c-apoio); color:var(--ink-soft,#423C33); padding:6px 0; border-top:1px solid rgba(126,90,40,0.14); line-height:1.55;}
.admin-alertas li:first-child{border-top:none;}
.admin-alertas li b{color:var(--ink,#1B160F);}
.admin-alertas li .quando{color:var(--muted,#8F8676); font-size:var(--c-nota);}
/* ---- o painel do modo astrólogo saiu em 07/09/2026 ----
Eram cinquenta e poucas linhas: os campos do "refazer a busca" (que nascia por
JavaScript dentro do relatório, e por isso precisava do molde de campo repetido
aqui), as pílulas do `.el-chips`, o `` do `.el-pro` e a linha das
configurações salvas. Saíram com o direito que as chamava — ver o fim do
`mapas/eletiva-na-pagina-inicial.js`.
O QUE FICA DESTA TELA é o que o anexo técnico do relatório desenha por JavaScript:
a `.el-hint`, a `.rel-jan` e as tabelas de posições, logo abaixo. Regra sem elemento
é peso que ninguém apaga depois porque ninguém sabe mais de quem era. */
#view-eletiva-relatorio .el-hint{font-size:var(--c-nota); color:var(--muted,#8F8676); margin-top:8px; line-height:1.6;}
#view-eletiva-relatorio .el-salvar{margin-top:10px; display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
#view-eletiva-relatorio .el-salvar button{background:transparent; border:1px solid var(--brass-dark,#7E5A28); color:var(--brass-dark,#7E5A28); font-weight:600; font-size:var(--c-nota); padding:7px 13px; border-radius:var(--radius-sm,7px); cursor:pointer; font-family:inherit;}
#view-eletiva-relatorio .el-salvar button:hover{background:var(--brass-light,#F1E4C8);}
#view-eletiva-relatorio .el-salvar button[disabled]{opacity:0.5; cursor:default;}
#view-eletiva-relatorio .el-salvar .msg{font-size:var(--c-nota); color:var(--muted,#8F8676);}
/* ====== O DESENHO DA PÁGINA DE UM OBJETIVO ELETIVO ==========================
DOIS DONOS DESDE 31/08/2026: cada regra daqui vale também para o `#view-parto`, a
Escolha astrológica para parto programado. As duas telas são o mesmo componente com
o mesmo nome de classe no mesmo lugar do fluxo — capa, blocos, listas, preço e o
`details` da técnica —, e a alternativa era um segundo arquivo com estas regras
copiadas. Cópia de regra não diverge no dia em que nasce; diverge no dia em que
alguém arruma o espaçamento de um cartão e não do outro.
E foi por isso que o parto herdou de graça o redesenho que a dona pediu hoje ("esses
cards beges também nada a ver; as páginas de astrologia eletiva deveriam se inspirar
no mesmo formato dos mapas"): a mescla trouxe o desenho novo e o gêmeo veio junto.
O que é SÓ do parto programado mora no `parto.css`, que vem depois deste na ordem.
------------------------------------------------------------------------- */
#view-eletiva-objetivo .el-wrap,
#view-parto .el-wrap{max-width:760px; margin:0 auto;}
/* ==========================================================================
AS DUAS TELAS ELETIVAS NO TABLET E NO COMPUTADOR — 13/09/2026, a terceira forma
==========================================================================
Elas já passaram por três: a tira de 760 px no meio da janela (até 06/09), as duas
colunas com o cartão preso (06 e 12/09) e esta, que é a das outras 32 — três faixas de
1.016 px, uma debaixo da outra. A dona decidiu hoje, com os números na frente, e a
pergunta dela foi só "você fez a das eletivas também?".
A REGRA DO `CLAUDE.md` É QUE ELA NÃO PRECISASSE PERGUNTAR: mudança pedida para uma tela
que cobra cartão é mudança para todas. Esta folha já foi a que ficou para trás duas
vezes (03/09 e 06/09), e desta foi a terceira. Fica escrito para a próxima sessão não
precisar da quarta.
E ESTA MUDANÇA COBROU UM PREÇO, que é a parte honesta desta seção. Empilhar tem um
risco só, e ele tem nome desde 03/09: a encomenda desce. Medido hoje, na tela do parto,
com a capa já em faixa e a prosa já em duas colunas:
· em duas colunas (como estava): a coluna de leitura media 3.406 px e a encomenda
começava a 75 px do topo — na tela, assim que a página abria;
· empilhada: a leitura mede 1.080 px numa faixa de 1.016, e a encomenda começa a
1.155 px do topo. Numa janela de 900 de altura isso é uma tela e um quarto; num
tablet deitado de 640, quase duas.
NÃO É CONSERTÁVEL POR ARRUMAÇÃO, e as peças dizem por quê: a capa mede 168, o AVISO
MÉDICO 169, o bloco "a pergunta não é qual seria o dia perfeito" 263, e o cartão da
oferta com a caixa do "o que a análise NÃO faz" 418. O aviso médico é o único bloco
grande que daria para mover, e ele é justamente o que não se move — é ele que diz que
esta análise não determina quando um parto deve acontecer. Encurtar a leitura para a
encomenda subir seria tirar de cima da página a ressalva que protege quem compra.
O QUE ISSO CUSTOU NA RÉGUA está escrito na própria régua, e é para ser lido antes de
alguém "consertar" o que ela deixou de cobrar: a conferência exigia que o primeiro campo
do pedido estivesse NA TELA assim que a página abrisse, e agora exige que ele esteja
ABERTO — presente e visível, sem clique nenhum. A intenção da dona em 02/09 era sobre
CLIQUE ("não deveria ter q clicar em botão nenhum pra ela abrir"), e essa continua
cobrada inteira; o "na primeira tela" era o valor que o desenho daquele dia permitia.
O QUE SAIU JUNTO: a grade de duas colunas, o trilho esticado da leitura e o `sticky` da
cauda. Os três existiam para o mesmo defeito — a coluna curta ao lado da comprida —, e
empilhada não existe coluna ao lado de nada. O envelope `.elo-cauda` saiu do `index.html`
no mesmo commit: ele não desenhava nada, e a única razão de ele existir era segurar o
`sticky`.
ABAIXO DE 1000 px NADA MUDA: os dois blocos são caixas comuns, a página empilha na ordem
em que está escrita, e a ordem de leitura do celular é a mesma desde sempre.
O `.el-venda` MARCA A FAIXA DA COMPRA, e continua existindo porque o parto tem DUAS
`.el-wrap`: a da página e a dos depoimentos. As duas ganham a largura nova — larguras
diferentes na mesma página lêem como duas páginas coladas, que é a lição de 04/09. */
@media (min-width:1000px){
#view-eletiva-objetivo > .el-wrap,
#view-parto > .el-wrap{max-width:1080px; padding:0 32px;}
/* A CAPA EM FAIXA, gêmea da das 32: o emblema é UM item que atravessa as três linhas do
texto, e não um bloco flutuando — assim ele fica centrado na altura do conjunto sem
número nenhum escrito, e continua centrado quando o título quebrar em duas linhas. */
#view-eletiva-objetivo .el-venda .elo-capa,
#view-parto .el-venda .elo-capa{
display:grid; grid-template-columns:auto minmax(0,1fr);
grid-template-rows:auto auto auto;
column-gap:30px; align-items:center; text-align:left; padding-top:26px;
}
#view-eletiva-objetivo .el-venda .elo-capa > .elo-glifo,
#view-parto .el-venda .elo-capa > .elo-glifo{grid-column:1; grid-row:1 / span 3; margin:0;}
#view-eletiva-objetivo .el-venda .elo-capa > .eyebrow,
#view-parto .el-venda .elo-capa > .eyebrow{grid-column:2; grid-row:1; justify-content:flex-start;}
#view-eletiva-objetivo .el-venda .elo-capa > h2,
#view-parto .el-venda .elo-capa > h2{grid-column:2; grid-row:2;}
/* O TETO DA FRASE É EM `ch`, e não em píxeis: `ch` mede na letra da página, então o
limite acompanha o tamanho do texto em vez de ser um número combinado com a fonte de
hoje. O `margin:0` é explícito porque margem automática CENTRA um item de grade. */
#view-eletiva-objetivo .el-venda .elo-capa > .elo-chamada,
#view-parto .el-venda .elo-capa > .elo-chamada{
grid-column:2; grid-row:3; align-self:start; max-width:64ch; margin:0;
}
/* A PROSA EM DUAS COLUNAS, pelo mesmo motivo das 32: uma linha de 1.016 px tem cerca de
130 caracteres, e o olho perde o começo da linha seguinte muito antes disso. Em duas
colunas cada uma fica com ~62, que é a medida de leitura da casa. `columns` reparte o
parágrafo sem que ninguém precise partir o texto no HTML, e reequilibra sozinho no dia
em que o texto crescer.
O `.elo-ficha` FICA DE FORA da regra dos blocos porque ele já é medido pelo
`.oferta-texto` de dentro — repartir o cartão inteiro partiria a ressalva médica ao
meio, que é o `.el-hint` embaixo dela. */
/* O `.el-leitura` NO SELETOR NÃO É ZELO, É CONSERTO — e o defeito durou uma captura de
tela. Escrita como `.el-venda .elo-bloco`, esta regra alcançava TAMBÉM os blocos do
FORMULÁRIO: `#elo-pedido` é feito de `.elo-bloco`, e os campos do pedido saíram
repartidos em duas colunas, com a leitura pulando de um lado para o outro no meio de
uma pergunta. Num formulário isso é pior do que feio — a ordem de preenchimento deixa
de ser a ordem de leitura, e a lista de sugestão de cidade, que é posicionada por
cima, passa a nascer dentro de uma coluna fragmentada.
PROSA SE REPARTE EM COLUNAS; FORMULÁRIO, NUNCA. A régua das telas eletivas passou a
cobrar isso no mesmo commit: nenhum campo do pedido pode ter um pai em multicoluna. */
#view-eletiva-objetivo .el-leitura .oferta-texto,
#view-parto .el-leitura .oferta-texto{columns:2; column-gap:54px;}
#view-eletiva-objetivo .el-leitura .elo-bloco:not(.elo-ficha),
#view-parto .el-leitura .elo-bloco:not(.elo-ficha),
#view-parto .el-leitura .pp-aviso{columns:2; column-gap:54px;}
/* Parágrafo dentro de coluna não tem por que carregar teto próprio: quem dá a medida de
leitura agora é a coluna. */
#view-eletiva-objetivo .el-leitura .elo-bloco p,
#view-parto .el-leitura .elo-bloco p,
#view-parto .el-leitura .pp-aviso p{max-width:none;}
/* O último bloco de cada trecho não precisa do vão de baixo: o respiro dali para o fecho
da página é da seção seguinte. */
#view-eletiva-objetivo .el-venda > div > :last-child,
#view-parto .el-venda > div > :last-child{margin-bottom:0;}
}
#view-eletiva-objetivo .elo-capa,
#view-parto .elo-capa{text-align:center; margin-bottom:26px; padding-top:34px;}
/* A CAPA REDONDA, gêmea da do produto: mesmo tamanho, mesmo gradiente, mesma sombra
tingida. Ela usa as variáveis da paleta que a classe do planeta pôs na tela inteira —
por isso não há cor nenhuma escrita aqui. */
.elo-glifo{
width:88px; height:88px; border-radius:50%; margin:0 auto 20px;
display:flex; align-items:center; justify-content:center;
font-size:38px; color:#fff; line-height:1;
box-shadow:0 16px 34px var(--capa-sombra, rgba(126,90,40,0.34)), 0 0 0 6px rgba(255,255,255,0.55);
}
#view-eletiva-objetivo .elo-capa .eyebrow,
#view-parto .elo-capa .eyebrow{justify-content:center;}
#view-eletiva-objetivo h2,
#view-parto h2{font-family:var(--fonte-titulo); font-size:var(--t-secao); line-height:1.15; margin:6px 0 10px;}
/* O `@media` que encolhia estes dois títulos no celular saiu em 01/09/2026: o
`--t-secao` é um `clamp`, e ele já entrega 26 px na tela estreita e 32 na larga.
Dois lugares mandando no mesmo tamanho é como um deles envelhece sozinho. */
#view-eletiva-objetivo .elo-chamada,
#view-parto .elo-chamada{font-size:var(--c-lede); color:var(--ink-soft,#423C33); line-height:1.6;}
/* O MESMO CARTÃO DA PÁGINA DO PRODUTO — 31/08/2026, a pedido da dona: "esses cards
beges também nada a ver; as páginas de astrologia eletiva deveriam se inspirar no
mesmo formato dos mapas para padronizar as páginas".
São 333 páginas de eleição e 31 de mapa: enquanto as duas famílias tiverem desenhos
diferentes, o app tem duas caras. Daqui para baixo o cartão da eleição é o mesmo
`#view-product .answers-card` — branco, raio médio, fio de tinta transparente, a
sombra leve — e o título dentro dele tem o mesmo tamanho e o mesmo peso. */
#view-eletiva-objetivo .elo-bloco,
#view-parto .elo-bloco{padding:24px; background:var(--card,#fff); border:1px solid var(--border);
border-radius:var(--radius-md,12px); box-shadow:var(--shadow-1); margin-bottom:16px;}
/* O BLOCO DO PAGAMENTO DESTAS DUAS TELAS SEGUE O DA TELA DE PRODUTO — 10/09/2026, e a
regra do repositório é a razão: mudança pedida para uma página de produto é mudança
para as QUATRO. Lá o cartão do pagamento virou continuação do formulário; aqui ele
era mais um `.elo-bloco` branco na pilha de blocos brancos da eleição, que é a mesma
"caixa dentro de caixa" vista de outro ângulo.
O bloco é reconhecido por uma CLASSE escrita no HTML, e não por `:has(> .payment-
brick-title)`: este repositório já recusou o `:has()` uma vez, no arquivo dos
depoimentos, e pela razão certa — navegador antigo derruba o seletor inteiro, e o
que se perde é a regra nova. Uma classe funciona em qualquer navegador. */
#view-eletiva-objetivo .elo-bloco-pagamento,
#view-parto .elo-bloco-pagamento{
background:transparent; border:0; border-top:1px solid var(--border); border-radius:0;
box-shadow:none; padding:26px 0 0; margin-top:10px;
}
#view-eletiva-objetivo .elo-bloco-pagamento:hover,
#view-parto .elo-bloco-pagamento:hover{box-shadow:none;}
#view-eletiva-objetivo .elo-bloco:hover,
#view-parto .elo-bloco:hover{box-shadow:var(--shadow-2);}
#view-eletiva-objetivo .elo-bloco h3,
#view-parto .elo-bloco h3{font-size:var(--c-lede); margin:0 0 10px;}
/* O CARTÃO DA OFERTA — 08/09/2026, e ele é o mesmo `#view-product .oferta-texto` das 32
páginas de leitura, que nasceu hoje de manhã. Chegou aqui na mesma tarde, quando a
dona precisou repetir que o mapa eletivo e o parto programado também são produtos.
Dentro dele mora UM parágrafo e mais nada — sem título, sem marcador, sem filete.
Foi o que ela corrigiu duas vezes na tela do produto ("leia oq eu falei"), e é o que
a régua "a leitura fala em prosa, num cartão só" cobra nas três telas.
O `.elo-ficha` não repete o desenho do `.elo-bloco`: ele É um `.elo-bloco`, e a
classe existe só para a régua achar o cartão certo e para o texto de dentro receber
o degrau de leitura (`--c-lede`) em vez do corpo. A ressalva médica do parto entra
aqui como `.el-hint` e continua com a tinta dela — ver o comentário no `index.html`. */
#view-eletiva-objetivo .elo-ficha .oferta-texto,
#view-parto .elo-ficha .oferta-texto{
margin:0; font-size:var(--c-lede); color:var(--ink-soft); line-height:1.75; text-wrap:pretty;
}
/* --- A PÁGINA DE VENDA DE UM OBJETIVO — 26/08/2026 -------------------------
Ela abria com "O que exatamente nasce neste momento" e a frase montada da Casa e
do significador: verdadeira, precisa e escrita para quem já comprou. Quem chega
ainda decidindo lê jargão antes de ler qualquer motivo para comprar.
Agora a ordem é a das outras 25 páginas de produto: o gancho, o porquê, o que a
leitura responde, o que chega — e a técnica no fim, para quem quiser. */
/* O GANCHO ERA UMA CAIXA BEGE COM FILETE DE LATÃO À ESQUERDA — a peça mais "outra
cara" da página. Agora é o mesmo cartão branco de tudo, e quem destaca é o TEXTO:
a pergunta em tinta cheia, a resposta na cor da leitura. */
#view-eletiva-objetivo .elo-gancho,
#view-parto .elo-gancho{background:var(--card,#fff); border:1px solid var(--border);
border-radius:var(--radius-md,12px); padding:22px 24px; margin-bottom:16px; box-shadow:var(--shadow-1);}
#view-eletiva-objetivo .elo-gancho p,
#view-parto .elo-gancho p{font-size:var(--c-lede); line-height:1.65; color:var(--ink,#1B160F); margin:0;}
#view-eletiva-objetivo .elo-gancho p.resposta,
#view-parto .elo-gancho p.resposta{margin-top:10px; font-weight:600; color:var(--brass-dark,#7E5A28);}
@media(max-width:640px){ #view-eletiva-objetivo .elo-gancho,
#view-parto .elo-gancho{padding:16px 18px;} #view-eletiva-objetivo .elo-gancho p,
#view-parto .elo-gancho p{font-size:var(--c-corpo);} }
#view-eletiva-objetivo .elo-historia p,
#view-parto .elo-historia p{font-size:var(--c-corpo); line-height:1.75; color:var(--ink-soft,#423C33); margin:0 0 12px;}
#view-eletiva-objetivo .elo-historia p:last-child,
#view-parto .elo-historia p:last-child{margin-bottom:0;}
/* A LISTA GANHA O MARCADOR DA PÁGINA DO PRODUTO: o ponto na cor da leitura e a linha
de separação entre os itens, no lugar da bolinha preta do navegador. É o mesmo
`#view-product .answers-list`, e é o que faz as duas páginas parecerem a mesma casa. */
#view-eletiva-objetivo .elo-lista,
#view-parto .elo-lista{margin:0; padding:0; list-style:none; font-size:var(--c-corpo); color:var(--ink-soft,#423C33);}
/* O MARCADOR É POSICIONADO, E NÃO UM ITEM DE FLEX — corrigido em 04/09/2026, com a foto
da tela junto. A regra dizia `display:flex` no `` para pôr a bolinha ao lado do
texto, e num contêiner flex CADA ELEMENTO INLINE VIRA UM ITEM PRÓPRIO: o `` do
meio da frase virava uma coluna, e os pedaços de texto em volta viravam outras duas.
Medido no item "As três melhores janelas do período…": "As" ficava em 18..35, o
negrito em 45..206 e o resto da frase só começava em 216 — uma frase partida em três
colunas com buracos no meio.
O QUE ESCONDIA O DEFEITO: item sem negrito é um pedaço de texto só, e vira uma coluna
só. Dos cinco itens desta lista, só os dois com `` quebravam — e as outras duas
listas do site (a da página de produto e a do texto entregue) usam a MESMA regra e
hoje não têm negrito nenhum. A armadilha estava armada nas três: bastava alguém
escrever uma palavra em negrito ou pôr um link, e a frase se partia sem erro nenhum.
Com o marcador posicionado, o `` volta a ser um bloco de texto corrido e nada
dentro dele vira coluna. Os 18 px de recuo são a medida antiga do texto (a bolinha
mais o vão de 10), conferida antes e depois. */
#view-eletiva-objetivo .elo-lista li,
#view-parto .elo-lista li{padding:11px 0 11px 18px; border-bottom:1px solid var(--border-soft);
position:relative; line-height:1.6;}
#view-eletiva-objetivo .elo-lista li:last-child,
#view-parto .elo-lista li:last-child{border-bottom:none; padding-bottom:0;}
#view-eletiva-objetivo .elo-lista li::before,
#view-parto .elo-lista li::before{content:"•"; color:var(--capa-botao, var(--brass));
position:absolute; left:0; top:11px; font-size:var(--c-apoio); line-height:1.6;}
#view-eletiva-objetivo .elo-tecnica,
#view-parto .elo-tecnica{margin-top:4px; border:1px solid var(--border); border-radius:var(--radius-md,12px);
background:var(--card,#fff); box-shadow:var(--shadow-1); margin-bottom:16px;}
#view-eletiva-objetivo .elo-tecnica > summary,
#view-parto .elo-tecnica > summary{padding:14px 18px; font-size:var(--c-nota); text-transform:uppercase;
letter-spacing:0.09em; font-weight:700; color:var(--capa-botao, var(--brass-dark)); cursor:pointer; list-style:none;}
#view-eletiva-objetivo .elo-tecnica > summary::-webkit-details-marker,
#view-parto .elo-tecnica > summary::-webkit-details-marker{display:none;}
#view-eletiva-objetivo .elo-tecnica > summary::before,
#view-parto .elo-tecnica > summary::before{content:"▸ ";}
#view-eletiva-objetivo .elo-tecnica[open] > summary::before,
#view-parto .elo-tecnica[open] > summary::before{content:"▾ ";}
#view-eletiva-objetivo .elo-tecnica .corpo,
#view-parto .elo-tecnica .corpo{padding:0 18px 18px;}
#view-eletiva-objetivo .elo-tecnica p,
#view-parto .elo-tecnica p{font-size:var(--c-corpo); line-height:1.7; color:var(--ink-soft,#423C33); margin:0;}
/* AS PÍLULAS DA `.elo-tec` SAÍRAM EM 07/09/2026, com a caixa "A técnica por trás
desta eleição" que era o único lugar do site a usá-las. Regra de CSS sem elemento
nenhum é peso que ninguém apaga depois porque ninguém sabe mais de quem era. */
#view-eletiva-objetivo .elo-aviso,
#view-parto .elo-aviso{background:#FBEDE9; border:1px solid rgba(143,58,42,0.25); border-radius:var(--radius-md,12px);
padding:16px 18px; font-size:var(--c-apoio); color:#5C2418; line-height:1.65; margin-bottom:16px;}
#view-eletiva-objetivo .elo-aviso b,
#view-parto .elo-aviso b{display:block; margin-bottom:5px; font-size:var(--c-nota); letter-spacing:0.08em; text-transform:uppercase;}
/* O nome do produto dentro do resumo da compra. Ele tinha um `style=` escrito na
linha, dentro do HTML montado pelo botão que saiu em 06/09 — número solto num
arquivo de programa é o degrau que a escada tipográfica veio tirar. */
#view-eletiva-objetivo .elo-resumo-nome{font-size:var(--c-corpo); margin:0 0 4px;}
#view-eletiva-objetivo .elo-preco,
#view-parto .elo-preco{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px;}
#view-eletiva-objetivo .elo-preco .v,
#view-parto .elo-preco .v{font-family:var(--fonte-interface); font-size:34px; color:var(--brass-dark,#7E5A28); line-height:1;}
#view-eletiva-objetivo .elo-preco .p,
#view-parto .elo-preco .p{font-size:12.5px; color:var(--muted,#8F8676);}
#view-eletiva-objetivo label,
#view-parto label{display:block; font-size:var(--c-apoio); font-weight:600; color:var(--ink,#1B160F); margin:16px 2px 6px;}
/* OS CAMPOS DO PEDIDO SAÍAM TORTOS — 31/08/2026.
É o MESMO defeito de 28/08 na sinastria, com as mesmas três causas, e o
`sinastria.css` já traz a explicação longa de cada uma. O resumo, para quem
chegar por aqui:
1. `padding` sem `height`. O campo de texto mede a linha de texto; o de data e o
de hora medem o CONTROLE NATIVO do sistema, que é outra coisa. Lado a lado no
mesmo `grid`, um saía mais alto que o outro. Altura fixa (48px) e
`line-height` igual fazem os três medirem o mesmo;
2. sem `-webkit-appearance:none`, o iOS desenha o campo de data e o de hora com o
estilo dele por cima do nosso — e o `-webkit-min-logical-width:0px` é o par
disso: sem ele o Safari dá ao campo uma largura mínima interna maior que a
coluna e o conteúdo vaza para fora da borda;
3. `font-size:15px`. Abaixo de 16px o iOS DÁ ZOOM na página ao tocar no campo, e a
tela inteira sai do lugar — foi o que a foto de 31/08 mostrou, com o cabeçalho
fora da tela assim que o campo da cidade ganhou o foco. 16px é o menor tamanho
que ele não amplia.
A `textarea` fica de fora da altura fixa de propósito: ela cresce. */
#view-eletiva-objetivo input,
#view-parto input,
#view-eletiva-objetivo select,
#view-parto select{
width:100%; max-width:100%; min-width:0; height:42px; line-height:42px; padding:0 13px;
border:1px solid var(--border,#E7DCBE); border-radius:var(--radius-sm,7px);
font-size:16px; background:#fff; color:var(--ink,#1B160F); -webkit-text-fill-color:var(--ink,#1B160F);
box-sizing:border-box; font-family:inherit;}
#view-eletiva-objetivo textarea,
#view-parto textarea{
width:100%; max-width:100%; min-width:0; padding:11px 13px; min-height:74px; resize:vertical;
border:1px solid var(--border,#E7DCBE); border-radius:var(--radius-sm,7px); line-height:1.6;
font-size:16px; background:#fff; color:var(--ink,#1B160F); box-sizing:border-box; font-family:inherit;}
#view-eletiva-objetivo input[type=date],
#view-parto input[type=date],
#view-eletiva-objetivo input[type=time],
#view-parto input[type=time]{
-webkit-appearance:none; appearance:none; -webkit-min-logical-width:0px; min-width:0;
color:var(--ink,#1B160F) !important; -webkit-text-fill-color:var(--ink,#1B160F) !important;}
#view-eletiva-objetivo .elo-row2,
#view-parto .elo-row2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
/* Sem isto uma coluna do `grid` nunca encolhe abaixo do conteúdo dela — é a regra
`min-width:auto` do CSS —, e o campo de data empurra o de hora para fora da largura
do cartão em tela estreita. */
#view-eletiva-objetivo .elo-row2 > div,
#view-parto .elo-row2 > div{min-width:0;}
@media(max-width:640px){ #view-eletiva-objetivo .elo-row2,
#view-parto .elo-row2{grid-template-columns:1fr;} }
#view-eletiva-objetivo .elo-dias,
#view-parto .elo-dias{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px;}
#view-eletiva-objetivo .elo-dias label,
#view-parto .elo-dias label{display:inline-flex; align-items:center; gap:6px; margin:0;
border:1px solid var(--border,#E7DCBE); border-radius:999px; padding:7px 12px; font-weight:500; cursor:pointer;
background:#fff;}
/* A altura fixa lá de cima vale para os campos que se preenchem, e um `checkbox` não é
um deles: sem esta linha ele viraria uma caixa de 48px dentro da pílula do dia. */
#view-eletiva-objetivo input[type=checkbox],
#view-parto input[type=checkbox],
#view-eletiva-objetivo .elo-dias input,
#view-parto .elo-dias input{
width:auto; height:auto; line-height:normal; padding:0; margin:0;}
#view-eletiva-objetivo .el-hint,
#view-parto .el-hint{font-size:var(--c-nota); color:var(--muted,#8F8676); margin-top:8px; line-height:1.6;}
#view-eletiva-objetivo .elo-recado,
#view-parto .elo-recado{border-radius:var(--radius-md,12px); padding:14px 16px; font-size:var(--c-apoio);
line-height:1.6; margin-bottom:14px;}
#view-eletiva-objetivo .elo-recado.erro,
#view-parto .elo-recado.erro{background:#FBEDE9; border:1px solid rgba(143,58,42,0.3); color:#5C2418;}
#view-eletiva-objetivo .elo-recado.ok,
#view-parto .elo-recado.ok{background:#EFF5EC; border:1px solid rgba(60,110,45,0.3); color:#2C4A22;}
#view-eletiva-objetivo .elo-teste,
#view-parto .elo-teste{background:#FFF4D6; border:1px solid #E0BE62; color:#5A4310; font-size:var(--c-apoio);
padding:12px 14px; border-radius:var(--radius-md,12px); margin-bottom:14px; line-height:1.55;}
#view-eletiva-objetivo .elo-pix,
#view-parto .elo-pix{text-align:center;}
#view-eletiva-objetivo .elo-pix img,
#view-parto .elo-pix img{width:220px; background:#fff; padding:10px; border-radius:8px; margin:14px auto 0; display:block;}
#view-eletiva-objetivo .elo-pix .codigo,
#view-parto .elo-pix .codigo{font-family:ui-monospace,Menlo,monospace; font-size:var(--c-nota); word-break:break-all;
background:var(--card-alt,#FBF6EA); border:1px solid var(--border-soft,#F0E9D6); border-radius:6px; padding:12px; margin-top:12px;}
/* A TELA DO OBJETIVO VESTE A COR DO PLANETA — 31/08/2026, e é a mesma mecânica da
página do produto: quem põe a classe é o `showEletivaObjetivo`
(app/eletiva-na-pagina-inicial.js), e daqui para baixo nenhuma regra sabe qual
eleição está aberta — elas leem `--capa-fundo`, `--capa-botao`, `--capa-sombra`.
A reserva em cada `var()` é o pergaminho e o latão de antes.
O `.btn-primary` daqui é o MESMO da página inteira, e por isso a regra é escrita com
o `#view-eletiva-objetivo` na frente: sem isso, tingir o botão desta tela tingiria o
da home, que não tem planeta nenhum.
E ESTE BLOCO É O ÚLTIMO DO ARQUIVO, não o primeiro — foi onde ele nasceu, e estava
errado: as regras daqui têm o MESMO peso das de cima (todas começam pelo mesmo id), e
entre iguais vence a última. Escrito no topo, o "Com a Astrologia eletiva, você
descobre." continuava latão e o preço também, porque as regras originais deles vêm
depois. Apareceu numa captura da página "Plantar". */
#view-eletiva-objetivo,
#view-parto{background:var(--capa-fundo, var(--bg)); min-height:100vh;}
#view-eletiva-objetivo header,
#view-parto header{background:var(--capa-vidro, rgba(248,243,231,0.85));}
#view-eletiva-objetivo .elo-capa .eyebrow,
#view-parto .elo-capa .eyebrow{color:var(--capa-botao, var(--brass-dark));}
#view-eletiva-objetivo .elo-gancho p.resposta,
#view-parto .elo-gancho p.resposta{color:var(--capa-botao, var(--brass-dark));}
#view-eletiva-objetivo .elo-preco .v,
#view-parto .elo-preco .v{color:var(--capa-botao, var(--brass-dark));}
/* AS DUAS REGRAS DO `.btn-primary` SAÍRAM EM 06/09/2026, e é a MESMA retirada que a
tela de produto teve em 04/09 — o projeto já pagou por esta uma vez.
Elas vestiam os botões "Escolher a minha data" e "Continuar para o pagamento", que
saíram hoje com os passos. Sem eles não sobrou `.btn-primary` nenhum dentro da
coluna de venda das duas telas (o da ponte é `.btn`, os do parto são `.btn-outline`)
— o único alcance que restava era o da CAPA CLONADA do fecho, que tem de ser igual à
da tela de início, e não vestida pela página de venda.
HOJE ELAS NÃO FAZEM MAL, e foi medido: sem `--capa-botao` definido nestas telas, o
`var()` cai no `--rust` e o botão clonado sai em rgb(149,64,45), igual ao do início.
É uma armadilha armada, não um defeito aceso: bastaria alguém voltar a pôr a classe
do planeta na tela inteira para o fecho ficar de outra cor. Regra órfã que só pode
errar é regra que se apaga. */
#view-eletiva-objetivo input:focus,
#view-parto input:focus,
#view-eletiva-objetivo select:focus,
#view-parto select:focus{outline:none; border-color:var(--capa-botao, var(--brass)); box-shadow:0 0 0 4px var(--capa-brilho, var(--brass-glow));}
#view-eletiva-relatorio .rel-wrap,
#view-parto-relatorio .rel-wrap{max-width:760px; margin:0 auto;}
#view-eletiva-relatorio .rel-capa,
#view-parto-relatorio .rel-capa{text-align:center; margin-bottom:26px; padding-bottom:22px;
border-bottom:1px solid var(--border-soft,#F0E9D6);}
#view-eletiva-relatorio .rel-capa h2,
#view-parto-relatorio .rel-capa h2{font-family:var(--fonte-titulo); font-size:var(--t-secao); line-height:1.15; margin:6px 0 8px;}
#view-eletiva-relatorio .rel-capa .onde,
#view-parto-relatorio .rel-capa .onde{font-size:var(--c-apoio); color:var(--muted,#8F8676); line-height:1.7;}
#view-eletiva-relatorio .rel-corpo h2,
#view-parto-relatorio .rel-corpo h2{font-family:var(--fonte-titulo); font-size:var(--t-bloco); margin:32px 0 10px;
color:var(--ink,#1B160F); line-height:1.25;}
#view-eletiva-relatorio .rel-corpo h3,
#view-parto-relatorio .rel-corpo h3{font-size:var(--c-nota); letter-spacing:0.1em; text-transform:uppercase;
color:var(--brass-dark,#7E5A28); margin:22px 0 8px; font-weight:700;}
#view-eletiva-relatorio .rel-corpo p,
#view-parto-relatorio .rel-corpo p{font-size:var(--c-lede); line-height:1.78; color:var(--ink-soft,#423C33); margin:0 0 14px;}
#view-eletiva-relatorio .rel-corpo strong,
#view-parto-relatorio .rel-corpo strong{color:var(--ink,#1B160F);}
#view-eletiva-relatorio .rel-corpo ul,
#view-parto-relatorio .rel-corpo ul{font-size:var(--c-lede); line-height:1.78; color:var(--ink-soft,#423C33);}
#view-eletiva-relatorio .rel-nada,
#view-parto-relatorio .rel-nada{background:var(--brass-light,#F1E4C8); border:1px solid rgba(126,90,40,0.16);
border-radius:var(--radius-md,12px); padding:18px 20px; font-size:var(--c-corpo); line-height:1.7; color:var(--ink-soft,#423C33);}
#view-eletiva-relatorio details.rel-tec,
#view-parto-relatorio details.rel-tec{margin-top:30px; border:1px solid var(--border,#E7DCBE);
border-radius:var(--radius-md,12px); background:var(--card-alt,#FBF6EA);}
#view-eletiva-relatorio details.rel-tec > summary,
#view-parto-relatorio details.rel-tec > summary{padding:14px 16px; font-size:var(--c-nota); text-transform:uppercase;
letter-spacing:0.09em; font-weight:700; color:var(--brass-dark,#7E5A28); cursor:pointer; list-style:none;}
#view-eletiva-relatorio details.rel-tec > summary::-webkit-details-marker,
#view-parto-relatorio details.rel-tec > summary::-webkit-details-marker{display:none;}
#view-eletiva-relatorio details.rel-tec > summary::before,
#view-parto-relatorio details.rel-tec > summary::before{content:"▸ ";}
#view-eletiva-relatorio details.rel-tec[open] > summary::before,
#view-parto-relatorio details.rel-tec[open] > summary::before{content:"▾ ";}
#view-eletiva-relatorio .rel-tec-corpo,
#view-parto-relatorio .rel-tec-corpo{padding:0 16px 18px;}
#view-eletiva-relatorio .rel-jan,
#view-parto-relatorio .rel-jan{border-top:1px solid var(--border-soft,#F0E9D6); padding-top:14px; margin-top:14px;}
#view-eletiva-relatorio .rel-jan:first-child,
#view-parto-relatorio .rel-jan:first-child{border-top:none; margin-top:0;}
#view-eletiva-relatorio .rel-jan h4,
#view-parto-relatorio .rel-jan h4{font-size:var(--c-corpo); margin:0 0 4px; font-family:var(--fonte-titulo);}
#view-eletiva-relatorio .rel-jan .meta,
#view-parto-relatorio .rel-jan .meta{font-size:var(--c-nota); color:var(--muted,#8F8676); margin-bottom:8px;}
#view-eletiva-relatorio table,
#view-parto-relatorio table{width:100%; border-collapse:collapse; font-size:var(--c-apoio); margin-top:8px;}
#view-eletiva-relatorio td,
#view-parto-relatorio td,
#view-eletiva-relatorio th,
#view-parto-relatorio th{padding:5px 4px; border-bottom:1px solid var(--border-soft,#F0E9D6);
text-align:left; color:var(--ink-soft,#423C33);}
#view-eletiva-relatorio th,
#view-parto-relatorio th{font-size:var(--c-etiqueta); text-transform:uppercase; letter-spacing:0.06em; color:var(--muted,#8F8676); font-weight:700;}
#view-eletiva-relatorio .rel-acoes,
#view-parto-relatorio .rel-acoes{display:flex; gap:10px; flex-wrap:wrap; margin-top:28px;}
#view-eletiva-relatorio .rel-validade,
#view-parto-relatorio .rel-validade{font-size:var(--c-nota); color:var(--muted,#8F8676); margin-top:10px; line-height:1.6;}
#view-eletiva-relatorio .rel-rodape,
#view-parto-relatorio .rel-rodape{margin-top:30px; padding-top:18px; border-top:1px solid var(--border-soft,#F0E9D6);
font-size:var(--c-nota); color:var(--muted,#8F8676); line-height:1.7;}
@media print{
#view-eletiva-relatorio header,
#view-parto-relatorio header,
#view-eletiva-relatorio .rel-acoes,
#view-parto-relatorio .rel-acoes,
.nav-menu,
.nav-burger{display:none !important;}
#view-eletiva-relatorio details.rel-tec,
#view-parto-relatorio details.rel-tec{border:none; background:none;}
#view-eletiva-relatorio details.rel-tec > summary,
#view-parto-relatorio details.rel-tec > summary{display:none;}
#view-eletiva-relatorio .rel-tec-corpo,
#view-parto-relatorio .rel-tec-corpo{padding:0;}
#view-eletiva-relatorio .rel-corpo h2,
#view-parto-relatorio .rel-corpo h2{page-break-after:avoid;}
}
/* ====== ESCOLHA ASTROLÓGICA PARA PARTO PROGRAMADO — 31/08/2026 ==============
Aqui mora SÓ o que é novo. A capa, os blocos, as listas, o preço, o `details` da
técnica e o relatório inteiro vêm do desenho da eletiva: o `eletiva-o-objetivo.css`
e o `eletiva-o-relatorio.css` ganharam `#view-parto` e `#view-parto-relatorio` como
seletores gêmeos, em vez de este arquivo repetir as mesmas oitenta regras.
POR QUE GEMEAR EM VEZ DE COPIAR: são os mesmos componentes, com os mesmos nomes de
classe, no mesmo lugar do fluxo. Uma segunda cópia não diverge no dia em que nasce;
diverge no dia em que alguém arruma o espaçamento de um cartão e não do outro — que
é a mesma lição que este projeto já pagou com as cinco listas de palavras banidas.
------------------------------------------------------------------------- */
/* O AVISO DA PRIMEIRA DOBRA. Ele NÃO é o `.elo-aviso` da eletiva, que é uma tarja
vermelha de ressalva no fim da página. Este define o produto e abre a página, então
é sóbrio e legível — vermelho aqui, num assunto de gestação, alarma sem informar. */
/* O LATÃO SAIU DAS DUAS CAIXAS — 02/09/2026, junto com a capa `capa-malva` que a tela
passou a vestir. É a mesma passada que o `tela-de-produto.css` já tinha feito nos
botões e nos números da página do produto: enquanto o fundo é tingido pela leitura e
o filete continua dourado, sobra na tela um pedaço que pertence ao pergaminho de
antes. A reserva em cada `var()` é o latão de sempre — se um dia a classe da capa não
chegar, as caixas saem como sempre foram. */
#view-parto .pp-aviso{background:var(--card-alt,#FBF6EA); border:1px solid var(--border,#E7DCBE);
border-left:3px solid var(--capa-botao, var(--brass,#AB7C3B)); border-radius:var(--radius-md,12px);
padding:20px 22px; margin-bottom:20px;}
#view-parto .pp-aviso b{display:block; margin-bottom:8px; font-size:var(--c-nota); letter-spacing:0.09em;
text-transform:uppercase; color:var(--capa-botao, var(--brass-dark,#7E5A28));}
#view-parto .pp-aviso p{font-size:var(--c-corpo); line-height:1.7; color:var(--ink-soft,#423C33); margin:0 0 10px;}
#view-parto .pp-aviso p:last-child{margin-bottom:0;}
@media(max-width:640px){ #view-parto .pp-aviso{padding:16px 18px;} }
/* O TÍTULO QUEBRA EQUILIBRADO — 02/09/2026, e é o "espaçamento mais harmonioso" que a
dona pediu, com o exemplo dela em duas linhas:
Escolha astrológica
para parto programado
Ela escreveu o corte que queria, e não é o que a quebra normal faz: essa enche a
primeira linha até a borda ("Escolha astrológica para parto") e joga "programado"
sozinho para baixo — a palavra órfã de que ela reclamou também nas páginas de mapa.
O `balance` reparte as duas linhas em pesos iguais, e o ponto de corte natural passa
a ser justamente antes do "para".
NÃO É UM `` do `.elo-bloco` herdavam a margem de baixo do reajuste de base, e três
parágrafos longos colados viram um bloco só de texto — que é justamente o que a aba
"Como funciona" é. A regra vale para TODOS os blocos desta tela, e não só para
aquele: eles têm a mesma forma, e arrumar um só é como duas metades da mesma página
passam a ter espaçamentos diferentes. */
#view-parto .elo-bloco p{margin-bottom:16px; line-height:1.75;}
#view-parto .elo-bloco p:last-child{margin-bottom:0;}
/* O nome do produto dentro do resumo da compra. Ele é uma linha de identificação, e não
um título: fica no degrau do corpo do texto, e não num tamanho próprio. */
#view-parto .pp-resumo-nome{font-size:var(--c-corpo); margin:0 0 4px;}
/* O FORMULÁRIO DO MERCADO PAGO MUDOU-SE PARA O `forma-de-pagamento.css` — 07/09/2026.
Estavam aqui o botão branco e a fonte de interface, copiados do `tela-de-produto.css`
— a metade das regras que o componente precisa, o que deixava o resto (o respiro das
opções, os títulos, o terreno do rótulo centrado) só na tela das leituras. A cópia
pela metade é o que a mudança de casa desfaz: agora as três telas que cobram leem a
mesma folha. Ver o cabeçalho de lá. */
/* O TÍTULO DA FILEIRA DE DEPOIMENTOS SAIU — 11/09/2026, com a regra que o vestia. Ele
dizia "Quem já passou pela leitura", e a dona o tirou das três telas de uma vez ("já é
autoexplicativo todo o restante"). A fileira em si (`.test-row`) continua vindo pronta
do `metodo-testemunhos-faq-e-rodape.css`; aqui nunca se redesenhou nada dela. */
/* O campo mais o botão de acrescentar, lado a lado. */
#view-parto .pp-junta,
#view-parto-relatorio .pp-junta{display:flex; gap:8px; align-items:stretch;}
#view-parto .pp-junta input,
#view-parto-relatorio .pp-junta input{flex:1 1 auto; min-width:0; margin-bottom:0;}
#view-parto .pp-junta button,
#view-parto-relatorio .pp-junta button{flex:0 0 auto; white-space:nowrap;}
/* AS FICHAS. Cada data e cada horário viram uma, e é isto que faz a tela dizer a mesma
coisa que o banco guarda: um CONJUNTO, e não duas pontas de um intervalo. */
#view-parto .pp-fichas,
#view-parto-relatorio .pp-fichas{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; min-height:26px;}
#view-parto .pp-ficha,
#view-parto-relatorio .pp-ficha{display:inline-flex; align-items:center; gap:6px;
background:var(--card-alt,#FBF6EA); border:1px solid var(--border,#E7DCBE);
border-radius:999px; padding:5px 6px 5px 12px; font-size:var(--c-apoio); color:var(--ink,#1B160F);}
#view-parto .pp-ficha button,
#view-parto-relatorio .pp-ficha button{border:0; background:transparent; cursor:pointer;
font-size:var(--c-corpo); line-height:1; padding:2px 6px; border-radius:999px;
color:var(--muted,#8F8676);}
#view-parto .pp-ficha button:hover,
#view-parto-relatorio .pp-ficha button:hover{background:rgba(0,0,0,0.06); color:var(--ink,#1B160F);}
/* A CAIXA DA CONFIRMAÇÃO MÉDICA. Ela é a regra principal do produto, e por isso não é
uma linha miúda no meio do formulário: tem moldura, tem respiro e o texto inteiro
fica visível — um aceite que precisa ser rolado para ser lido não foi lido. */
#view-parto .pp-confirmacao{margin-top:22px; padding:16px 18px; border-radius:var(--radius-md,12px);
background:var(--card-alt,#FBF6EA); border:1px solid var(--capa-botao, var(--brass,#AB7C3B));}
#view-parto .pp-check,
#view-parto-relatorio .pp-check{display:flex; align-items:flex-start; gap:10px; cursor:pointer;
font-size:var(--c-apoio); line-height:1.65; color:var(--ink-soft,#423C33); margin:0 0 8px; text-transform:none;
letter-spacing:normal; font-weight:400;}
#view-parto .pp-check:last-child,
#view-parto-relatorio .pp-check:last-child{margin-bottom:0;}
#view-parto .pp-check input,
#view-parto-relatorio .pp-check input{flex:0 0 auto; margin:3px 0 0; width:17px; height:17px;}
/* A PRATELEIRA DA PÁGINA INICIAL NÃO EXISTE MAIS — 01/09/2026, e é a quarta e última
forma do bloco no mesmo dia. Ele foi retângulo de texto próprio, virou `.poster-card`
numa prateleira só dele, virou faixa larga com arte à esquerda — e a dona disse a
coisa certa: "não é para existir um bloco, é apenas o cartão de parto na seção
correspondente, igual todos os outros mapas".
As três formas anteriores tinham o mesmo defeito de fundo: o produto estava FORA do
catálogo, e cada tentativa era uma moldura nova para disfarçar isso. Agora ele é um
slug em `CATALOGO_GRUPOS`, na fileira "Família e raízes", e não precisa de regra de
estilo nenhuma — o cartão dele é o `.poster-card` de todos os outros.
Por isso não há mais nada aqui: nem o `#parto-na-home`, nem a `.parto-faixa`. */
/* O FECHO DESTA PÁGINA NÃO PRECISA DE LARGURA PRÓPRIA — 03/09/2026, e duas linhas que
estiveram aqui contam por quê.
Elas nasceram com a primeira versão do fecho (a `ppVestirOFechoDaLoja`), que colava as
seções DENTRO da `.el-wrap` de 760 px desta tela: ali as regras escritas com
`#view-product` na frente não alcançavam a cópia, e em tela larga o texto da
Metodologia encolhia dentro do cartão enquanto o rodapé saía mais largo que a página.
O desenho que ficou (`nucleo/as-secoes-de-sempre.js`) pendura as seções na própria
tela, irmãs da coluna e não filhas dela, e o rodapé é da PÁGINA — fora de todas as
telas. As duas correções deixaram de ter o que corrigir, e regra que não conserta
nada é regra que confunde quem for mexer nesta tela depois. */
/* ==========================================================================
OS TRÊS PONTOS DO MAPA GRÁTIS — o cartão da troca, 13/09/2026
==========================================================================
Decisão da dona: o resultado gratuito passa a explicar o Sol, a Lua e o Ascendente de
quem gerou o mapa, em troca do e-mail. Este arquivo é o cartão onde isso acontece.
ELE É O ÚLTIMO BLOCO DA TELA, e o desenho diz isso: fundo de cartão como os outros, sem
moldura chamativa, sem cor de aviso. A ficha que saiu daqui em 01/09 — "Guarde o seu
mapa", e-mail e senha entre os aspectos e o catálogo — era um formulário no MEIO do
caminho; este vem depois de o mapa inteiro estar entregue e salvável, e o que ele devolve
nasce no lugar dele.
NENHUM NÚMERO DE FONTE AQUI, e é a regra da casa: todo tamanho sai de um degrau da escala
(`--t-bloco`, `--c-lede`, `--c-corpo`, `--c-apoio`). A única medida crua é de espaço e de
coluna, que não são tipografia. */
.os-tres-pontos{
background:var(--card); border:1px solid var(--border-soft);
border-radius:var(--radius-lg); padding:26px 28px;
}
.tres-pontos-titulo{
font-size:var(--t-bloco); margin:0 0 8px;
}
.tres-pontos-lede{
font-size:var(--c-lede); color:var(--ink-soft); line-height:1.6; margin:0 0 18px; max-width:52ch;
}
/* O FORMULÁRIO É DE UM CAMPO SÓ, e a linha é a mesma dos outros do site: rótulo em cima,
campo de 16 px (o mínimo que impede o iOS de dar zoom ao toque — está escrito no
`tokens-e-base.css`), caixa de consentimento e botão. */
.tres-pontos-form{max-width:460px;}
.tres-pontos-form label{
display:block; font-size:var(--c-apoio); color:var(--muted); margin-bottom:6px;
}
.tres-pontos-form input[type=email]{
width:100%; padding:13px 14px; border:1px solid var(--border); border-radius:var(--radius-sm);
background:var(--card); color:var(--ink); font-family:inherit;
}
.tres-pontos-form .btn-primary{width:100%; margin-top:14px;}
/* A caixa de consentimento é o componente compartilhado (`.consent-row`); aqui só o rótulo
dela volta a ser um rótulo de texto, e não o de campo acima. */
.tres-pontos-form .consent-row span{font-size:var(--c-apoio);}
.tres-pontos-form .consent-row{margin-bottom:0 !important;}
/* ---------- O QUE A TROCA DEVOLVE ----------
Três blocos, um por ponto. Em coluna no celular e em três colunas quando cabe: eles são
irmãos e do mesmo tamanho, e lado a lado se leem como um conjunto — que é o que são. */
.tres-pontos-textos:not(:empty){display:grid; gap:22px; margin-top:4px;}
@media (min-width:760px){
.tres-pontos-textos:not(:empty){grid-template-columns:repeat(3, minmax(0, 1fr)); gap:26px;}
}
.tres-pontos-bloco h4{
font-size:var(--t-cartao); margin:0 0 8px;
}
.tres-pontos-bloco p{
font-size:var(--c-corpo); color:var(--ink-soft); line-height:1.7; margin:0 0 10px;
}
.tres-pontos-link{
font-size:var(--c-apoio); color:var(--brass-dark); font-weight:600; text-decoration:none;
border-bottom:1px solid currentColor;
}
.tres-pontos-link:hover{color:var(--brass-deep);}
/* O BLOCO DE QUEM NÃO SABE A HORA não é um erro e não se pinta como um: ele é o convite
mais forte da tela para a pessoa voltar com o horário de nascimento — e voltar é o que
transforma um mapa sem casas no mapa de verdade dela. Fundo de apoio, e nada de vermelho. */
.tres-pontos-sem-hora{
background:var(--card-alt); border:1px dashed var(--border); border-radius:var(--radius-md);
padding:16px 18px;
}
.tres-pontos-sem-hora h4{color:var(--muted);}
.tres-pontos-erro{font-size:var(--c-apoio); color:var(--muted); line-height:1.6; margin:0;}
.tres-pontos-erro a{color:var(--brass-dark);}
/* NO COMPUTADOR ELE FECHA A GRADE. As seis linhas da `.resultado-grid` são escritas uma a
uma no `pagina-inicial-e-formulario.css` (roda, cabeçalho, posições, grade, elementos,
aspectos, salvar) — uma ficha sem linha declarada cairia onde sobrasse. Esta é a sétima,
e ocupa as duas colunas porque é do mapa inteiro, como os aspectos e o botão de salvar. */
@media (min-width:900px){
.resultado-section .os-tres-pontos{grid-column:1 / -1; grid-row:7;}
}
/* ================= ASTROLOGIA DA GRAVIDEZ — o painel da leitura =================
31/08/2026.
Ele mora dentro de um `.pos-table-card`, que já dá a moldura, o fundo e o respiro — o
que está aqui é só o que a moldura não sabe desenhar: o resumo em pares rótulo/valor,
os cartões de janela do parto, a linha do tempo e a tabela dos ciclos lunares.
AS CORES DA TENDÊNCIA NÃO SÃO SEMÁFORO, e essa foi a decisão de desenho mais
importante deste arquivo. Verde-amarelo-vermelho diria "boa, mediana, ruim" sobre
datas de parto — que é exatamente o que o produto está proibido de dizer. As três
classes são a MESMA cor em três intensidades: quanto mais forte a tinta, mais coisas
do mapa coincidem naquela janela. Intensidade fala de destaque; cor fala de juízo.
E o `--brass` continua sendo SÓ ornamento, nunca texto — a regra está no `:root` do
`tokens-e-base.css` e vale aqui igual. */
/* ---------- o resumo do topo ---------- */
.grav-resumo{
display:grid;
gap:2px;
margin-bottom:22px;
border:1px solid var(--border);
border-radius:10px;
overflow:hidden;
background:var(--border);
}
.grav-resumo-item{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:baseline;
gap:6px 14px;
padding:11px 14px;
background:var(--card);
}
.grav-resumo-rotulo{
font-size:var(--c-nota);
letter-spacing:.04em;
text-transform:uppercase;
color:var(--ink-soft);
}
.grav-resumo-valor{
font-size:var(--c-corpo);
font-weight:600;
color:var(--ink);
text-align:right;
}
.grav-resumo-destaque{ background:var(--card-alt); }
.grav-resumo-destaque .grav-resumo-valor{ font-size:var(--t-cartao); }
/* ---------- títulos internos ---------- */
.grav-titulo{
margin:26px 0 6px;
font-size:var(--c-corpo);
font-weight:700;
color:var(--ink);
}
.grav-nota{
margin:0 0 12px;
font-size:var(--c-apoio);
color:var(--ink-soft);
line-height:1.6;
}
/* ---------- as janelas do parto ---------- */
.grav-janelas{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
gap:12px;
margin-bottom:12px;
}
.grav-janela{
border:1px solid var(--border);
border-left-width:4px;
border-radius:8px;
padding:12px 14px;
background:var(--card);
}
/* A mesma tinta, três intensidades — ver o cabeçalho deste arquivo. */
.grav-janela.grav-muito-alta{ border-left-color:#C25B7E; background:rgba(194,91,126,.10); }
.grav-janela.grav-alta{ border-left-color:#C98BA0; background:rgba(201,139,160,.07); }
.grav-janela.grav-moderada{ border-left-color:#D8B6C2; background:transparent; }
.grav-janela-data{
margin:0;
font-size:var(--t-cartao);
font-weight:700;
color:var(--ink);
}
.grav-janela-tendencia{
margin:2px 0 0;
font-size:var(--c-apoio);
font-weight:600;
color:var(--ink);
}
.grav-janela-ig,
.grav-janela-hora{
margin:2px 0 0;
font-size:var(--c-apoio);
color:var(--ink-soft);
}
.grav-janela-motivos{
margin:9px 0 0;
padding-left:16px;
font-size:var(--c-apoio);
color:var(--ink-soft);
line-height:1.65;
}
.grav-janela-motivos li{ margin-bottom:2px; }
.grav-ressalva{
margin:0 0 4px;
font-size:var(--c-apoio);
line-height:1.65;
color:var(--ink-soft);
}
/* ---------- a linha do tempo ---------- */
.grav-linha{
margin:0;
padding-left:0;
list-style:none;
}
.grav-linha > li{
position:relative;
padding:0 0 16px 18px;
border-left:2px solid var(--border);
}
.grav-linha > li:last-child{ border-left-color:transparent; padding-bottom:0; }
.grav-linha > li::before{
content:"";
position:absolute;
left:-6px; top:5px;
width:10px; height:10px;
border-radius:50%;
background:var(--brass, #B08D57);
}
.grav-linha-data{
display:block;
font-weight:700;
font-size:var(--c-corpo);
color:var(--ink);
}
.grav-linha ul{
margin:5px 0 0;
padding-left:16px;
font-size:var(--c-apoio);
color:var(--ink-soft);
line-height:1.65;
}
/* ---------- a tabela dos ciclos lunares ----------
A caixa rola SOZINHA no celular. Sem ela, quatro colunas de datas empurram a página
inteira para o lado — e página que rola na horizontal no celular é página que parece
quebrada mesmo estando certa. */
.grav-tabela-caixa{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.grav-tabela{
width:100%;
min-width:460px;
border-collapse:collapse;
font-size:var(--c-apoio);
}
.grav-tabela th,
.grav-tabela td{
text-align:left;
padding:7px 10px;
border-bottom:1px solid var(--border);
vertical-align:top;
}
.grav-tabela th{
font-size:var(--c-etiqueta);
letter-spacing:.04em;
text-transform:uppercase;
color:var(--ink-soft);
font-weight:600;
}
.grav-tabela td{ color:var(--ink); }
.grav-tabela tr:last-child td{ border-bottom:none; }
/* ---------- os detalhes técnicos e o aviso ---------- */
.grav-tecnico{
margin-top:22px;
border:1px dashed var(--border);
border-radius:8px;
padding:10px 14px;
background:var(--card-alt);
}
.grav-tecnico > summary{
cursor:pointer;
font-size:var(--c-apoio);
font-weight:600;
color:var(--ink);
}
.grav-tecnico p{
margin:10px 0 0;
font-size:var(--c-apoio);
line-height:1.7;
color:var(--ink-soft);
}
.grav-tecnico strong{ color:var(--ink); }
.grav-aviso{
margin:20px 0 0;
padding-top:14px;
border-top:1px solid var(--border);
font-size:var(--c-nota);
line-height:1.7;
color:var(--ink-soft);
}
/* ---------- o bloco da gestação no formulário de compra ----------
Os campos opcionais moram num FECHADO: são vinte, e um formulário de compra
com vinte campos à vista assusta antes de ajudar. Quem não sabe nenhum deles precisa
poder ignorá-los sem rolar por cima de todos. */
.gravidez-extras{
margin:18px 0 4px;
border:1px dashed var(--border);
border-radius:8px;
padding:10px 14px;
background:var(--card-alt);
}
.gravidez-extras > summary{
cursor:pointer;
font-size:var(--c-corpo);
font-weight:600;
color:var(--ink);
}
.gravidez-extras > summary span{
font-weight:400;
color:var(--ink-soft);
}
.gravidez-grupo{
margin:18px 0 2px;
font-size:var(--c-nota);
letter-spacing:.05em;
text-transform:uppercase;
font-weight:700;
color:var(--ink-soft);
}
/* ================= DEPOIS DO NASCIMENTO =================
31/08/2026 — o item 31 da especificação.
AS TRÊS TARJAS NÃO SÃO NOTA, e a decisão é a mesma que as cores das janelas do parto já
tomaram: nada de verde-amarelo-vermelho. "Confirmou", "chegou perto" e "passou longe"
descrevem a DISTÂNCIA entre o que foi apontado e o que aconteceu — e a que passou longe
precisa aparecer com a mesma clareza da que confirmou, porque é ela que prova que a
comparação é honesta. Por isso as três têm o mesmo peso visual: muda a tinta, não o
tamanho nem o destaque. */
.nasc-veredito{
margin:0 0 4px;
padding:11px 14px;
border-radius:8px;
border:1px solid var(--border);
border-left-width:4px;
font-size:var(--c-corpo);
font-weight:600;
line-height:1.55;
color:var(--ink);
}
.nasc-veredito.nasc-perto{ border-left-color:#3F7D5A; background:rgba(63,125,90,.09); }
.nasc-veredito.nasc-meio{ border-left-color:#B08D57; background:rgba(176,141,87,.09); }
.nasc-veredito.nasc-longe{ border-left-color:#8F6E8A; background:rgba(143,110,138,.09); }
.nasc-tarja{
display:inline-block;
white-space:nowrap;
padding:2px 8px;
border-radius:999px;
font-size:var(--c-etiqueta);
font-weight:600;
letter-spacing:.02em;
}
.nasc-tarja.nasc-perto{ background:rgba(63,125,90,.14); color:#2C5A40; }
.nasc-tarja.nasc-meio{ background:rgba(176,141,87,.16); color:#6B5324; }
.nasc-tarja.nasc-longe{ background:rgba(143,110,138,.14); color:#6A4F66; }
.nasc-corrigir{
margin:14px 0 0;
font-size:var(--c-apoio);
}
.nasc-corrigir a{ color:var(--brass-dark, #7E5A28); }
/* ---------- as pontes para os outros dois produtos ----------
Elas dizem na tela a fronteira comercial deste produto: aqui o bebê e o vínculo aparecem
em traços largos, e quem quiser a leitura inteira de cada um tem para onde ir. O desenho
é discreto de propósito — é oferta depois da entrega, não anúncio no meio dela. */
.nasc-ponte{
display:flex;
gap:14px;
align-items:flex-start;
margin-top:14px;
padding:14px;
border:1px dashed var(--border);
border-radius:10px;
background:var(--card-alt);
}
.nasc-ponte-glifo{
flex:0 0 auto;
font-size:24px;
line-height:1;
color:var(--brass, #B08D57);
}
.nasc-ponte-titulo{
margin:0 0 4px;
font-size:var(--c-corpo);
font-weight:700;
color:var(--ink);
}
.nasc-ponte-texto{
margin:0 0 8px;
font-size:var(--c-apoio);
line-height:1.65;
color:var(--ink-soft);
}
.nasc-ponte-botao{
display:inline-block;
font-size:var(--c-apoio);
font-weight:600;
color:var(--brass-dark, #7E5A28);
}
#nascimentoRodaCaixa{ margin-top:18px; }
#nascimentoTexto{ margin-top:18px; }
/* ==========================================================================
O FORMULÁRIO DO MERCADO PAGO — UMA CÓPIA SÓ, PARA AS TRÊS TELAS QUE COBRAM
==========================================================================
07/09/2026. Queixa da dona, com a foto do tablet: "tipo a página das eletivas está
estranho a forma de pagamento".
O QUE ELA ESTAVA VENDO, e não era gosto — era uma regra do site alcançando por dentro
um componente de terceiro. O `eletiva-o-objetivo.css` veste os campos daquela tela
assim:
#view-eletiva-objetivo input, #view-parto input { width:100%; height:42px; ... }
e o formulário do Mercado Pago é montado DENTRO dessa tela. Os botões de escolha dele
são `input[type=radio]`, então cada um virava um retângulo branco de 48 px ocupando a
largura inteira, com o nome do meio de pagamento espremido ao lado. É o que aparece na
foto: duas caixas vazias enormes e, à direita delas, "Cartão de crédito" e "Pix".
O `input[type=checkbox]` já tinha exceção escrita ali (a pílula dos dias da semana
ensinou); o `radio` não tinha, porque nenhum campo NOSSO é radio — o único que existe na
tela é de outra pessoa.
E FALTAVA O RESTO INTEIRO. As regras que fazem o formulário do cobrador parecer deste
site — a fonte de interface em vez da serifa, o botão de pagar branco com borda, o
rótulo centrado — existiam duas vezes e nas duas presas a um id de tela:
`#view-product #paymentBrick_container` (as leituras) e `#view-parto #pp-brick` (o parto,
e só metade delas). A Astrologia eletiva não estava em nenhuma das duas, e por isso abria
o pagamento cru.
AQUI ELAS SÃO UMA SÓ, e o seletor lista os três contêineres. A lição está escrita no
`componentes-reutilizaveis.css`, no dia em que o TÍTULO do pagamento passou por isto
mesmo: "um seletor com id é assim — resolve a tela de hoje e esconde o problema de
amanhã". Amanhã chegou na tela seguinte.
POR QUE ID E NÃO CLASSE, e por que este arquivo é o ÚLTIMO da `ordem.txt`: quem precisa
perder é `#view-eletiva-objetivo input` (um id, um elemento). Uma classe
(`.forma-de-pagamento input`) tem peso menor e perderia em qualquer posição da cascata —
especificidade ganha de ordem, sempre. Aqui os seletores têm id, e o item 1 tem DOIS, o
que resolve o empate sem depender só da ordem. Nenhum `!important` novo foi preciso; os
que existem aqui são os do botão, e são os mesmos de antes (o componente escreve a cor
dele em estilo embutido).
O ITEM 1 É O CONSERTO; OS ITENS 2 A 5 SÃO A IDENTIDADE. O primeiro tira o site da frente
e vale só nas duas telas onde ele atrapalha; os outros dizem como o formulário do
cobrador se parece com este site, e valem nas três. A diferença está escrita em cada um.
Uma tela nova que cobre acrescenta o id dela a estes seletores — ou, melhor, monta o
componente num contêiner com um dos ids que já estão aqui. */
#paymentBrick_container,
#elo-brick,
#pp-brick{min-height:60px;}
/* ---- 1. O SITE NÃO VESTE OS CAMPOS DO COBRADOR ----
Só nas DUAS telas onde a regra de tela alcança o componente. A tela das leituras fica de
fora de propósito: lá o molde dos campos é `#view-product .birth-form input`, e o
formulário do cobrador não está dentro do `.birth-form` — nenhuma regra nossa chega até
ele, e escrever um desfazimento ali só teria como efeito apagar o desenho do PRÓPRIO
Mercado Pago. (Medido: uma sonda `input` dentro do `#paymentBrick_container` sai com o
tamanho do navegador, e não com os 50 px do nosso molde.)
`revert` DEVOLVE A PROPRIEDADE AO NAVEGADOR, e é por isso que a lista é curta e escolhida
a dedo. Ele não desfaz só a regra nossa: desfaz TODAS as declarações de autor, inclusive
as do Mercado Pago. Nas propriedades daqui isso é o que se quer — são exatamente as que o
nosso molde de campo distorce, e um campo com a geometria do navegador é infinitamente
melhor do que um botão de escolha virado retângulo de 48 px. Numa propriedade a mais
seria estrago: apagaria o desenho deles sem nada em troca.
O `font-size` FICA DE FORA, e não é esquecimento: o nosso molde põe 16 px, e 16 px é o
piso que impede o iOS de dar zoom na página quando o dedo toca o campo. Reverter devolveria
os 13,33 px do navegador para qualquer campo em que o Mercado Pago não escreva um tamanho —
e o campo em que isso aconteceria é o do número do cartão. */
#view-eletiva-objetivo #elo-brick input,
#view-eletiva-objetivo #elo-brick select,
#view-eletiva-objetivo #elo-brick textarea,
#view-parto #pp-brick input,
#view-parto #pp-brick select,
#view-parto #pp-brick textarea{
width:revert; max-width:revert; min-width:revert; height:revert; line-height:revert;
padding:revert; border:revert; border-radius:revert; background:revert; box-sizing:revert;
}
/* ---- 1-B. O RÓTULO TAMBÉM É DELES — 11/09/2026 ----
Achado pela sonda da régua "o site não veste o formulário do cobrador", que nesta passada
passou a perguntar quanto ESPAÇO a nossa folha escreve dentro do componente. A resposta
nas duas telas era 16 px, e vinha daqui:
#view-eletiva-objetivo label, #view-parto label{
display:block; font-size:…; font-weight:600; color:…; margin:16px 2px 6px; }
É o defeito de 07/09 com outra tag. Aquele dia consertou o `input` — que era o que a foto
do tablet mostrava — e deixou o `label` de fora porque ninguém tinha olhado para ele. E o
Mercado Pago desenha SEIS: o número do cartão, o vencimento, o código de segurança, o nome
do titular, o documento e o e-mail. Cada um levava 22 px de margem que não é dele, num
formulário cuja altura ELE calcula.
REVERTEM SÓ `display` E `margin`, e a escolha a dedo é a mesma disciplina do item 1: o
`revert` não desfaz só a regra nossa, desfaz as declarações de autor TODAS, inclusive as
do Mercado Pago. Nestas duas o estrago é zero — `display` e `margin` de um rótulo dentro
do formulário dele são geometria, e geometria é dele. Já `font-size`, `font-weight` e
`color` ficam de fora de propósito: são IDENTIDADE, é o mesmo trabalho que o item 2 faz
com a família da fonte, e reverter devolveria o rótulo à cor e ao peso de fábrica do
navegador — que é fonte de outro site na tela em que se digita o cartão.
A TELA DAS LEITURAS CONTINUA FORA, pelo mesmo motivo escrito no item 1: lá o molde é
`#view-product .birth-form label`, e o formulário do cobrador não mora dentro do
`.birth-form`. Medido com a mesma sonda: 0 px de espaço escrito por nós. */
#view-eletiva-objetivo #elo-brick label,
#view-parto #pp-brick label{
display:revert; margin:revert;
}
/* ---- 2. A FONTE É A DA INTERFACE, E NUNCA A SERIFA ----
O porquê tem data: em 31/08/2026 os títulos do site ganharam a Fraunces, e as regras de
título das telas passaram a vestir de SERIFA o formulário inteiro do cobrador — cada
rótulo, cada campo e o botão de pagar. Formulário de cartão em serifa não parece
editorial: parece um site que não é o que diz ser, na tela em que a pessoa digita o
número do cartão. Foi queixa da dona em 02/09 ("aba de pagamento, forma de pagamento não
deve ser serifada").
O `text-transform` e o `letter-spacing` estão junto porque o site tem rótulos em caixa
alta com espaçamento, e herdá-los aqui viraria "CARTÃO DE CRÉDITO" dentro do
componente.
O `input`, O `select` E O `textarea` ENTRARAM EM 07/09/2026, e é conserto medido: um
`input` dentro do `#paymentBrick_container` saía em ARIAL — a fonte de fábrica do
navegador. Campo de formulário não HERDA a família de fonte (a folha do navegador dá uma
própria a ele), então uma lista de tags que não o nomeia deixa justamente o campo de
e-mail, o do número do cartão e o do nome impresso fora da regra. Numa tela em que o
resto é a fonte da interface, isso são três campos com cara de outro site no lugar em que
ela custa mais caro.
E ISTO NÃO BRIGA COM O ITEM 1 logo acima: lá o `revert` devolve a GEOMETRIA ao navegador
e não menciona a família — a lista de lá foi escolhida a dedo, e `font-family` não está
nela.
A LISTA CONTINUA SENDO DE TAGS, e não um `*`, de propósito: `#paymentBrick_container *`
pesa menos que `#view-product h3` e devolveria a serifa aos títulos de dentro do
formulário na tela das leituras. Tag por tag, o peso empata e ganha quem vem por último
na `ordem.txt` — que é este arquivo. */
#paymentBrick_container h1, #paymentBrick_container h2, #paymentBrick_container h3,
#paymentBrick_container h4, #paymentBrick_container h5, #paymentBrick_container label,
#paymentBrick_container span, #paymentBrick_container p, #paymentBrick_container button,
#paymentBrick_container div, #paymentBrick_container input, #paymentBrick_container select,
#paymentBrick_container textarea,
#elo-brick h1, #elo-brick h2, #elo-brick h3, #elo-brick h4, #elo-brick h5,
#elo-brick label, #elo-brick span, #elo-brick p, #elo-brick button, #elo-brick div,
#elo-brick input, #elo-brick select, #elo-brick textarea,
#pp-brick h1, #pp-brick h2, #pp-brick h3, #pp-brick h4, #pp-brick h5,
#pp-brick label, #pp-brick span, #pp-brick p, #pp-brick button, #pp-brick div,
#pp-brick input, #pp-brick select, #pp-brick textarea{
font-family:var(--fonte-interface);
text-transform:none;
letter-spacing:normal;
}
#paymentBrick_container h1, #paymentBrick_container h2, #paymentBrick_container h3, #paymentBrick_container h4,
#elo-brick h1, #elo-brick h2, #elo-brick h3, #elo-brick h4,
#pp-brick h1, #pp-brick h2, #pp-brick h3, #pp-brick h4{
color:var(--ink); line-height:1.4; font-size:var(--c-corpo); font-weight:600;
}
/* ---- 3. O RESPIRO DAS OPÇÕES É DO COBRADOR, E NÃO NOSSO — 11/09/2026 ----
Aqui havia quatro linhas de aparência inocente:
#paymentBrick_container label, … [role="radio"], … [role="radiogroup"] > *{
padding-top:4px; padding-bottom:4px; }
#paymentBrick_container input[type="radio"]{ margin-right:10px; }
Elas foram escritas em 07/09 como "respiro entre as opções", e a palavra RESPIRO é o
engano inteiro: `padding-top:4px` não ACRESCENTA quatro píxeis a coisa nenhuma — ele
SUBSTITUI o que estava lá. E o que estava lá era o respiro que o Mercado Pago dá às
linhas dele, que é várias vezes maior.
O QUE A DONA FOTOGRAFOU EM 11/09 ("aba de forma de pagamento tá esquisita com bug"), e as
duas capturas medem a mesma coisa:
· a linha "Cartão de crédito" ficou com 44 px de altura e a do "Pix" com 39;
· o ícone redondo que o próprio cobrador desenha dentro delas tem 38 px — ou seja, a
arte é mais alta que a linha que a carrega. Na captura o círculo do Pix atravessa a
borda de baixo da caixa, e o do cartão atravessa o filete que separa as duas opções;
· com a opção do cartão aberta, a linha do Pix sobe por cima do campo de e-mail.
E O ESTRAGO ERA DOBRADO, porque a `tela-de-produto.css` abre com `*{box-sizing:border-box}`
— que alcança a página inteira, o formulário do cobrador incluído. Com `border-box`, uma
altura escrita pelo Mercado Pago passa a CONTER o nosso `padding`: os 4 + 4 não empurram a
caixa para baixo, eles comem 8 px do miolo onde o ícone precisa caber.
ENTÃO A REGRA SAIU INTEIRA, e nada entrou no lugar. É a mesma lição que o item 1 aqui em
cima já tinha escrito com outras palavras — "numa propriedade a mais seria estrago:
apagaria o desenho deles sem nada em troca". Lá a conclusão foi sobre uma lista de
`revert` escolhida a dedo; aqui ela vale para o sentido contrário: a nossa folha não
escreve GEOMETRIA dentro de um componente que não é nosso. Cor, fonte e o botão de pagar,
sim — são o que o item 2 e o item 4 fazem, e são identidade. Altura, espaço interno e
margem de linha, não: quem sabe de que tamanho a linha precisa é quem desenha o ícone
dentro dela.
Quem for tentar mexer no espaçamento das opções de novo começa por aqui: o caminho é o
`customVariables` do `o-cobrador-nas-tres-telas.js`, que é a porta que o próprio Mercado
Pago abriu para isso — e não um seletor com id passando por cima dele. */
/* ---- 4. O BOTÃO DE PAGAR É BRANCO ----
02/09/2026, a pedido da dona ("botão branco/transparente").
ELE É DESENHADO PELO MERCADO PAGO, e não por nós: a cor dele vem do `baseColor` que o
JavaScript manda nas `customVariables`, e esse mesmo `baseColor` pinta também os acentos
do formulário (a marca da opção escolhida, os links). Trocar o `baseColor` por branco
apagaria os acentos junto com o botão — então quem troca é a folha de estilo, aqui, e só
o botão. Daí os `!important`: o componente escreve a cor dele em estilo embutido.
O TEXTO SAI NA COR DA LEITURA, e é a única forma de o botão continuar legível: cada
`--capa-botao` foi escurecida até o BRANCO em cima dela passar de 4,5:1 (a conta está em
cada linha do `capas-e-cores.css`), e uma cor que passa contra branco passa igual com os
papéis trocados — o contraste é uma razão entre as duas, e ela não sabe qual está na
frente.
E A BORDA NÃO É ENFEITE: um botão branco sobre o cartão branco do pagamento não teria
contorno nenhum, e "transparente" viraria "invisível" — que é o oposto do pedido. */
#paymentBrick_container button,
#elo-brick button,
#pp-brick button{
margin-top:18px;
background:var(--card) !important;
color:var(--capa-botao, var(--brass-dark)) !important;
border:1px solid var(--capa-botao, var(--brass)) !important;
box-shadow:var(--shadow-1) !important;
}
#paymentBrick_container button:hover,
#elo-brick button:hover,
#pp-brick button:hover{
background:var(--capa-fundo, var(--bg)) !important;
box-shadow:var(--shadow-2) !important;
}
/* ---- 5. O TERRENO PARA O RÓTULO FICAR CENTRADO ----
A palavra "Pagar" saía 10,7 px à direita do centro — achado da dona em 03/09 e MEDIDO na
captura dela, pela cor da borda. Duas tentativas de resolver por CSS falharam (o que
empurra não é um elemento filho: sobra pseudo-elemento ou estilo embutido dentro de um
componente que não abrimos). Quem centra hoje é o `centrarORotuloDoBotao`, no
`catalogo-e-compra.js`: ele MEDE onde a palavra caiu e compensa a diferença no espaço
interno. O CSS aqui só prepara o terreno — conteúdo centrado, para a compensação ter
efeito. A história inteira das duas tentativas está no `catalogo-e-compra.js`. */
#paymentBrick_container button,
#elo-brick button,
#pp-brick button{
display:flex !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
}
#paymentBrick_container button + button,
#elo-brick button + button,
#pp-brick button + button{margin-top:10px;}
/* ==========================================================================
A LOJA — a vitrine, a página do produto, o carrinho e o caixa
==========================================================================
Nasceu em 18/09/2026 com o desenho da casa (pergaminho e latão). Em 19/09 a dona pediu,
numa linha: "quero que fique igual a interface do Nuvemshop" — e a referência não
precisou ser descrita, porque ela já tinha mandado quatro capturas da loja que tem lá.
O QUE MUDOU, LIDO DAQUELAS TELAS:
· o fundo é BRANCO, e não o pergaminho. Uma loja de terceiro não tem paleta de marca
no fundo: ela tem branco atrás da foto do produto, porque a foto é a cor da página;
· o cartão do produto PERDEU O CARTÃO — sem borda, sem sombra, sem canto redondo. A
foto quadrada e o texto solto no branco;
· os cantos encolheram de 16 px para 4. Canto muito redondo é linguagem de aplicativo;
loja é retângulo;
· o botão é SÓLIDO, ESCURO e da largura inteira, e não o vermelho-terra arredondado
das telas de venda da astrologia;
· a tipografia perdeu a serifa. O título da loja é o mesmo sem-serifa do corpo, pesado
e apertado — a `Fraunces` fica para a astrologia, que é onde ela tem o que dizer.
O QUE NÃO VEIO JUNTO, e é decisão escrita: o ROXO do selo do carrinho na captura. Ele é
a cor do tema dela na Nuvemshop, não da marca dela. Aqui o selo é o `--rust`, que é a cor
de ação deste site desde 31/08. Copiar a paleta de um fornecedor seria trocar a
identidade dela pela dele — e o dia em que ela trocasse de fornecedor, a loja ficaria com
a cor de um lugar onde ela não está mais.
---------------------------------------------------------------------------
OS TOKENS DA LOJA, E POR QUE ELES EXISTEM
---------------------------------------------------------------------------
O `CLAUDE.md` manda: "regra nova de estilo escolhe um degrau, nunca um número". A escala
de nove degraus continua valendo aqui — `--c-corpo`, `--c-apoio`, `--c-nota` e
`--t-display` são usados direto. O que esta loja tem de próprio é a PALETA e o RAIO, e
eles entram como token com nome, no escopo das quatro telas, e não como número espalhado.
ESCOPADOS NAS QUATRO TELAS de propósito: assim nenhuma regra daqui alcança a astrologia
por acidente, e a pergunta "por que este branco está aqui?" tem resposta num lugar só.
ELA ENTRA DEPOIS DE `tela-de-produto.css` NA ORDEM, e é de propósito: a página do
produto da loja divide componentes com a página de produto dos mapas (`.eyebrow`, a
`.lede`, os botões), e entre regras de mesmo peso vence a última.
========================================================================== */
#view-loja, #view-loja-produto, #view-carrinho, #view-loja-checkout,
#loja-molde-do-topo, #loja-folha-fundo{
--loja-fundo:#FFFFFF;
--loja-fundo-suave:#FAFAFA;
/* O PRETO NÃO É #000. Preto puro sobre branco puro vibra na tela e cansa em texto
corrido; este é o quase-preto que a captura mostra, e é o que quase toda loja usa. */
--loja-tinta:#1A1A1A;
--loja-tinta-suave:#4A4A4A;
--loja-mudo:#767676; /* 4,54:1 sobre o branco — passa na WCAG AA para texto normal */
--loja-linha:#E4E4E4;
--loja-linha-forte:#CFCFCF;
/* O RAIO DE LOJA É 4, e não os 16 do app. Ver o bloco do alto. */
--loja-raio:4px;
--loja-raio-pill:999px;
}
/* O FUNDO DA PÁGINA INTEIRA vira branco em `/loja/`, e só lá: a pergunta `:has(#view-loja)`
só é verdade no endereço que serve as telas da loja — nos outros o recorte do build já
tirou essa `` do documento. Se o navegador não entender `:has`, o pergaminho fica
atrás das telas, que também têm fundo próprio: degrada sem quebrar. */
body:has(#view-loja){background:var(--loja-fundo);}
#view-loja, #view-loja-produto, #view-carrinho, #view-loja-checkout{
background:var(--loja-fundo); color:var(--loja-tinta-suave);
/* A tela ocupa o alto inteiro para o rodapé escuro do site não subir no meio de uma
vitrine curta — que é o que acontecia com a loja de um produto só. */
min-height:100vh;
}
/* ---------- A BARRA E A BUSCA ---------- */
/* Ela é CLONADA para dentro das quatro telas pela `lojaVestirAsTelas()`. O molde fica
escondido e nunca aparece; quem aparece são as cópias. */
#loja-molde-do-topo{display:none;}
.loja-topo{position:sticky; top:0; z-index:50; background:var(--loja-fundo);
border-bottom:1px solid var(--loja-linha);}
.loja-topo-barra{display:grid; grid-template-columns:44px 1fr 44px; align-items:center;
gap:8px; max-width:1080px; margin:0 auto; padding:10px 16px;}
.loja-menu{width:44px; height:44px; display:flex; align-items:center; justify-content:center;
background:none; border:none; cursor:pointer; color:var(--loja-tinta); padding:0;}
.loja-menu-riscos{display:block; width:20px;}
.loja-menu-riscos span{display:block; height:2px; background:currentColor; border-radius:2px;
margin:4px 0;}
/* O RISCO DO MEIO É MAIS CURTO, que é o desenho do menu na captura. */
.loja-menu-riscos span:nth-child(2){width:14px;}
/* O NOME DA LOJA É O CENTRO DA BARRA, e é ele que faz a barra deixar de ser um vazio com
dois botões nas pontas. Peso 700 e o espaçamento apertado são o que a captura mostra. */
.loja-marca{justify-self:center; font-size:var(--c-citacao); font-weight:700;
letter-spacing:-0.02em; color:var(--loja-tinta); text-decoration:none; white-space:nowrap;
font-family:var(--fonte-interface);}
.loja-botao-carrinho{position:relative; width:44px; height:44px; display:flex;
align-items:center; justify-content:center; background:none; border:none; cursor:pointer;
color:var(--loja-tinta); padding:0; justify-self:end;}
.loja-icone-carrinho{width:22px; height:22px;}
.loja-selo-carrinho{position:absolute; top:3px; right:1px; min-width:18px; height:18px;
border-radius:var(--loja-raio-pill); background:var(--rust); color:#fff;
font-size:var(--c-micro); font-weight:700; display:flex; align-items:center;
justify-content:center; padding:0 5px; line-height:1;}
.loja-busca{display:flex; align-items:center; gap:8px; max-width:1080px; margin:0 auto;
padding:0 16px 12px;}
/* 16 px no campo, sempre: abaixo disso o iOS dá zoom na página quando o dedo o toca. É a
exceção que a escala tipográfica abre, e `--c-lede` é exatamente 16. */
.loja-busca input{flex:1; font-size:var(--c-lede); padding:12px 14px;
border:1px solid var(--loja-linha-forte); border-radius:var(--loja-raio);
background:var(--loja-fundo); color:var(--loja-tinta); min-width:0;
/* O X nativo do `type=search` no WebKit fica colado na lupa e some no escuro. */
-webkit-appearance:none; appearance:none;}
.loja-busca input::placeholder{color:var(--loja-mudo);}
.loja-busca button{width:44px; height:44px; display:flex; align-items:center;
justify-content:center; background:none; border:none; cursor:pointer;
color:var(--loja-tinta); padding:0; margin-left:-56px;}
.loja-busca button svg{width:20px; height:20px;}
/* ---------- A CAIXA DA PÁGINA ---------- */
.loja-pagina{max-width:1080px; margin:0 auto; padding:0 16px 72px;}
/* A MIGALHA. "Início . Amuletos" — o ponto entre os nomes é o separador da captura, e não
uma barra: ele é mais leve e não parece um endereço de arquivo. */
.loja-migalha{display:flex; flex-wrap:wrap; align-items:center; gap:8px;
font-size:var(--c-apoio); color:var(--loja-mudo); padding:18px 0 10px;}
.loja-migalha a{color:var(--loja-mudo); text-decoration:none;}
.loja-migalha a:hover{color:var(--loja-tinta); text-decoration:underline;}
.loja-migalha .loja-migalha-sep{color:var(--loja-linha-forte);}
.loja-migalha .loja-migalha-aqui{color:var(--loja-tinta-suave);}
.loja-cabeca{padding-bottom:14px;}
.loja-cabeca h1, .loja-titulo-tela{font-size:var(--t-display); line-height:1.1;
letter-spacing:-0.02em; color:var(--loja-tinta); font-weight:700; text-wrap:balance;
/* A SERIFA FICA PARA A ASTROLOGIA. O `h1` do site herda a `--fonte-titulo`, e numa loja
ela soa editorial onde o que se quer é produto. */
font-family:var(--fonte-interface); margin:0 0 4px;}
.loja-titulo-tela{padding:6px 0 18px;}
/* ---------- ORDENAR E FILTRAR ---------- */
/* DUAS CÉLULAS DE MEIA LARGURA, com filete entre elas e em cima e embaixo. É o desenho da
captura, e ele é assim porque a barra é a única coisa entre o título e os produtos: ela
precisa ser lida como uma régua, e não como dois botões flutuando. */
.loja-ferramentas{display:grid; grid-template-columns:1fr 1fr;
border-top:1px solid var(--loja-linha); border-bottom:1px solid var(--loja-linha);
margin-top:6px;}
.loja-ferramenta{display:flex; align-items:center; justify-content:center; gap:10px;
min-height:56px; background:none; border:none; cursor:pointer; padding:0 12px;
font-size:var(--c-corpo); font-weight:500; color:var(--loja-tinta);
font-family:var(--fonte-interface); position:relative;}
.loja-ferramenta + .loja-ferramenta{border-left:1px solid var(--loja-linha);}
.loja-ferramenta svg{width:19px; height:19px; flex:none;}
.loja-ferramenta-selo{min-width:18px; height:18px; border-radius:var(--loja-raio-pill);
background:var(--rust); color:#fff; font-size:var(--c-micro); font-weight:700;
display:flex; align-items:center; justify-content:center; padding:0 5px; line-height:1;}
.loja-conta{font-size:var(--c-nota); color:var(--loja-mudo); padding:16px 0 0;}
/* ---------- A VITRINE ---------- */
/* DUAS COLUNAS NO CELULAR, como na captura. `auto-fill` com um mínimo de 150 px dá duas num
telefone comum, três num tablet e quatro num computador — sem uma única consulta de
mídia, e sem um número de coluna escrito para cada tamanho. */
.loja-grade{display:grid; gap:28px 16px; padding:18px 0 0;
grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));}
/* O CARTÃO NÃO É UM CARTÃO. Sem borda, sem sombra, sem canto, sem fundo — a foto quadrada e
o texto embaixo, no branco. É a mudança que mais faz a vitrine parecer a da captura, e a
que mais custa a aceitar: o cartão com sombra é o reflexo de quem desenha aplicativo. */
.loja-cartao{display:block; text-decoration:none; color:inherit; background:none;
border:none; box-shadow:none; border-radius:0;}
.loja-cartao.is-esgotado{opacity:0.55;}
.loja-cartao-foto{position:relative; aspect-ratio:1/1; background:var(--loja-fundo-suave);
overflow:hidden; border-radius:var(--loja-raio);}
/* O `
` É UM ELEMENTO DE VERDADE NO DESENHO, e não uma casca invisível — 19/09/2026.
Ele nasce `inline`, então sem esta regra a `` embrulha os dois — sem isso o alvo
seria o quadradinho de 16 px, que no dedo é o tamanho de errar. */
.cx-aceite{
display: flex;
align-items: flex-start;
gap: 10px;
margin: -4px 0 4px;
cursor: pointer;
/* Um degrau abaixo do corpo: é uma escolha secundária ao lado de campos obrigatórios, e
a tipografia tem de dizer isso antes de a pessoa ler. */
font-size: var(--c-apoio);
line-height: 1.5;
color: var(--loja-mudo);
}
.cx-aceite input[type="checkbox"]{
/* O quadradinho não encolhe quando o texto quebra em duas linhas. */
flex: 0 0 auto;
width: 16px;
height: 16px;
/* Alinha com a primeira linha do texto em vez de flutuar no topo da caixa. */
margin-top: 2px;
accent-color: var(--loja-tinta);
}