/* ==========================================================================
   O DESENHO DO APP COMEÇA AQUI — e o índice dele é a própria pasta.
   ==========================================================================
   Até 30/08/2026 este cabeçalho era um ÍNDICE DE Ctrl+F: dezoito linhas dizendo por qual
   texto procurar para chegar a "HERO", a "FAQ", a "TELA DE PRODUTO". Ele existia porque
   tudo isso morava num arquivo só, dentro do `index.html`.

   Agora cada uma daquelas seções é um ARQUIVO em `design/`, e a lista deles está na
   `design/ordem.txt` — que é também a ordem em que são colados, e portanto a ordem da
   cascata. Um índice escrito à mão ao lado de uma pasta que responde a mesma pergunta é a
   segunda verdade que fica para trás: bastaria alguém criar um arquivo novo e não vir aqui
   somar uma linha.

   ESTE ARQUIVO É O PRIMEIRO DA ORDEM, e é de propósito: o que está abaixo — os tokens e o
   reajuste de base — é do que todos os outros 28 dependem.
   ========================================================================== */
/* AS FONTES SAÍRAM DAQUI EM 27/08/2026 — viraram um <link> lá em cima, ao lado do
   `preconnect`. Um `@import` só é DESCOBERTO depois que o navegador lê esta folha de
   estilo inteira; até lá o `preconnect` estava aquecido e ninguém tinha pedido nada. O
   <link> é achado pelo leitor antecipado no primeiro instante da página. Não traga de
   volta: o endereço é o mesmo, o que muda é a hora em que o pedido sai. */

/* ---------- TOKENS / VARIÁVEIS ----------
   Paleta original preservada (pergaminho + latão); refinada para mais contraste,
   profundidade (escala de elevação) e uma camada "noturna" discreta usada em
   pontos de destaque (halo do emblema, orbe de carregamento) — a referência
   visual é o céu por trás do pergaminho, não um tema escuro à parte. */
:root{
  /* A BORDA DEIXOU DE SER CARAMELO — 31/08/2026, a pedido da dona: "essa borda
     caramelo/bege me irrita". Ela era `#E7DCBE`, uma cor SÓLIDA de pergaminho, e isso
     tinha duas consequências. A primeira é de gosto, e é dela: um caramelo desenhando o
     contorno de cada cartão do app inteiro. A segunda é de sistema, e apareceu quando as
     páginas passaram a ser tingidas pela cor da leitura: uma borda bege num cartão dentro
     de uma página violeta não pertence à página — ela pertence ao pergaminho de antes.

     Agora é TINTA TRANSPARENTE: o mesmo preto-terra do texto a 10% e a 6%. Transparente,
     ela pega a cor do que está atrás — bege sobre o pergaminho, violeta sobre a página
     violeta — e nunca mais briga com o fundo. É a mesma razão pela qual o `--card-alt`
     deixou de ser um bege escrito e virou branco translúcido.

     Os dois valores sólidos ficam anotados aqui para quem quiser comparar:
     --border era #E7DCBE, --border-soft era #F0E9D6, --card-alt era #FBF7EC. */
  --bg:#F8F3E7; --bg-deep:#EEE3C7; --card:#FFFFFF;
  --card-alt:rgba(255,255,255,0.62);
  --border:rgba(31,26,18,0.10); --border-soft:rgba(31,26,18,0.06);
  --brass:#AB7C3B; --brass-dark:#7E5A28; --brass-deep:#5F4320; --brass-light:#F1E4C8; --brass-glow:rgba(171,124,59,0.35);
  /* O AMARELO DA RODA — 02/09/2026, pedido da dona: "faz um fundo amarelinho (da paleta
     da roda)". Os dois tons não foram escolhidos a olho: saíram AMOSTRADOS do próprio
     `roda-pergaminho`, a aquarela que é o emblema da página inicial — o pergaminho do
     centro dela é #F2E6D0 e as estrelinhas douradas ficam na casa do #E0C078.
     O `--areia` é o pergaminho da roda puxado meio grau para o amarelo, para a seção se
     LER como uma faixa própria e não como o fundo da página um tom abaixo. Medido antes
     de ficar: 5,71:1 para o `--rust`, 9,05:1 para o `--ink-soft` e 4,68:1 para o
     `--muted` — os três passam na WCAG AA. E o cartão branco, que sobre o pergaminho da
     página tinha 1,11 de degrau, sobe para 1,21: a fileira ganha relevo de brinde. */
  --areia:#F7E9C6; --areia-estrela:#E0C078;
  /* O AMARELO FORTE DAS CINCO ESTRELAS — 02/09/2026, pedido da dona ("a cor do 5
     estrelas: amarelo forte"). Ele não foi inventado: é o tom da ARTE DO PIN que ela
     mandou para esta mesma seção, amostrado do arquivo — (252, 168, 66). E, por acaso
     que vale registrar, é praticamente o mesmo amarelo com que o PRÓPRIO GOOGLE desenha
     as estrelas nas capturas de tela dela: (255, 176, 56). Ou seja, a fileira passa a
     usar a cor que a pessoa já viu quando leu a avaliação no lugar de origem.
     ELE É GLIFO DE DESENHO, e não texto: as cinco estrelas já têm `aria-label`, então
     quem não vê a tela ouve "Cinco estrelas" e não depende da cor. É a mesma exceção
     que a escala tipográfica abre para número e glifo usados como DESENHO. Dito o que
     custa: 1,94:1 sobre o cartão branco, contra os 3,7:1 do latão que ele substitui —
     a troca DESCE o contraste, e é uma escolha de estilo feita de olhos abertos. */
  --estrela-forte:#FCA842;
  /* --muted era #8B8172 → 3,46:1 sobre o pergaminho, abaixo do mínimo de 4,5:1
     da WCAG AA para texto normal. Este tom mantém a mesma temperatura e sobe
     para 4,6:1. O --brass continua o mesmo, mas só para ORNAMENTO (bordas,
     ícones, fundos) — nunca para texto: para texto, use --brass-dark (5,6:1). */
  --ink:#1B160F; --ink-soft:#423C33; --muted:#6F6659; --rust:#95402D; --success:#2E7D4F;
  /* O VERMELHO-TERRA PASSOU A SER COR DE AÇÃO — 31/08/2026, a pedido. Ele já existia na
     paleta e já era usado como cor de ERRO (status de falha, caixas de alerta), e continua
     sendo: os dois papéis convivem porque se distinguem pela FORMA, não pela cor — o erro
     é texto pequeno, a ação é um bloco sólido com texto branco. Quem for mexer aqui saiba
     que mexe nos dois papéis de uma vez.
     Medido antes de entrar: branco sobre o #95402D dá 6,89:1, ACIMA dos 6,21:1 que o latão
     dava — a troca subiu o contraste do botão em vez de baixar. O tom fundo do hover dá
     9,03:1. As sombras acompanham: sombra de latão sob botão vermelho suja o tom. */
  --rust-deep:#7A3324;
  --shadow-rust: 0 10px 24px rgba(122,51,36,0.30);
  --shadow-rust-lg: 0 16px 34px rgba(122,51,36,0.34);
  --midnight:#141019;
  --gold-line: linear-gradient(90deg, transparent, var(--brass-dark) 50%, transparent);

  /* elevação — mesma cor-base em opacidades crescentes, pra empilhar consistente */
  --shadow-1: 0 2px 8px rgba(36,29,18,0.06);
  --shadow-2: 0 8px 22px rgba(36,29,18,0.09);
  --shadow-3: 0 16px 36px rgba(36,29,18,0.12);
  --shadow-4: 0 26px 56px rgba(36,29,18,0.16);
  --shadow-brass: 0 10px 24px rgba(126,90,40,0.30);
  --shadow-brass-lg: 0 16px 34px rgba(126,90,40,0.34);

  /* AS DUAS FONTES DO APP — 31/08/2026, e elas viram TOKEN por dois motivos.
     O primeiro é a pergunta da dona: "a fonte das páginas é a melhor para a interface?
     Lembrando que vai para Apple, precisa ser de alto nível". O segundo é que a resposta
     estava escrita em 72 lugares — `font-family:var(--fonte-interface)` copiado por doze
     arquivos —, e resposta escrita 72 vezes é resposta que ninguém troca.

     A INTERFACE PASSA A PEDIR A FONTE DO SISTEMA PRIMEIRO. Num iPhone e num Mac isso é a
     SF Pro, a fonte que a Apple desenhou para as telas dela: é o que faz um app parecer
     nativo em vez de parecer um site dentro de um app. Ela não é baixada (já está no
     aparelho), então some um pedido de rede e some o meio segundo de texto trocando de
     forma. A Inter continua logo atrás, para Android e Windows — ela é justamente o
     desenho aberto mais próximo da SF, então quem não é Apple vê quase a mesma coisa.

     OS TÍTULOS GANHARAM SERIFA EM 31/08/2026, escolhida pela dona: a **Fraunces**. Uma sans
     no título diz "startup"; a marca aqui é aquarela, pergaminho e astrologia, e a Fraunces
     é uma serifa quente, de traço antigo, desenhada para tamanhos grandes (ela tem um eixo
     ÓPTICO — `opsz` — que engrossa o traço nos tamanhos pequenos e afina nos grandes, e é
     por isso que o `font-optical-sizing` fica ligado logo abaixo).

     A RESERVA ANTES DELA CHEGAR NÃO É "serif" GENÉRICA: no iPhone e no Mac é a Iowan Old
     Style e a Palatino, duas serifas boas que já estão no aparelho. Com `display=swap`, o
     título aparece numa serifa decente no primeiro instante e troca para a Fraunces quando
     ela chega — em vez de piscar em Times New Roman.

     E A SERIFA É SÓ DOS TÍTULOS. Ela estava, por um descuido meu, em 69 lugares que não são
     título — etiqueta de 11 px, célula de tabela, texto de cartão —, porque quando os dois
     tokens eram iguais isso não aparecia. Numa serifa aparece: cada um daqueles voltou para
     a `--fonte-interface`, e o que ficou com a Fraunces são os títulos, os números grandes e
     as frases de destaque. */
  --fonte-interface:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', 'Inter', Roboto, system-ui, sans-serif;
  --fonte-titulo:'Fraunces', 'Iowan Old Style', Palatino, 'Palatino Linotype', Georgia, serif;

  /* ==========================================================================
     A ESCALA TIPOGRÁFICA — 01/09/2026
     ==========================================================================
     Pergunta da dona: "existe padrão de tamanho entre título, subtítulo, corpo?".
     A resposta medida era NÃO, e a medida é o argumento: 491 declarações de `font-size`
     nas 30 folhas, em 36 TAMANHOS DIFERENTES. O mesmo `h2` saía em sete tamanhos, o `h3`
     em cinco, e o texto corrido em onze — de 11,5 px a 19 px. Não havia escala; havia um
     número escolhido de cada vez, e cada um deles parecia certo sozinho.
     É isso que se vê e se chama de "três fontes diferentes": as FAMÍLIAS sempre foram
     três e só três (a do sistema na interface, a Fraunces nos títulos, a Noto Sans
     Symbols nos glifos — medido em sete telas). O que estava fora do lugar era o TAMANHO.

     OS NOVE DEGRAUS, e o papel de cada um. Quem for acrescentar uma regra escolhe um
     destes, e não um número novo — é a única forma de a escala continuar existindo daqui
     a três meses.

       --t-display   abertura de tela. Um por tela, no máximo.
       --t-secao     título de seção dentro de uma tela ("Metodologia", nome de prateleira)
       --t-bloco     título de um bloco ou de uma janela ("Encomendar minha análise")
       --t-cartao    título de cartão (o nome de cada leitura na vitrine)
       --c-citacao   a frase em serifa itálica, quando ela é o destaque do parágrafo
       --c-lede      o parágrafo de abertura, logo abaixo de um título
       --c-corpo     texto corrido. É o degrau padrão: na dúvida, é este.
       --c-apoio     descrição de cartão, legenda, texto de segundo plano
       --c-nota      nota de rodapé, aviso miúdo, ajuda de campo
       --c-etiqueta  rótulo em caixa alta e cabeçalho de tabela
       --c-micro     selo, tarja, contador — o menor tamanho que o site usa

     COMO A ESCALA FOI APLICADA, para quem for conferir: cada declaração antiga foi para o
     degrau MAIS PRÓXIMO. No corpo do texto nenhum elemento andou mais que meio pixel —
     12,5 virou 13, 15 virou 14,5, 11 virou 10,5 —, então nada mudou de tamanho aos olhos e
     mesmo assim onze tamanhos viraram cinco. Foi de propósito: uma escala que se instala
     mexendo na tela inteira é uma escala que a dona rejeita no primeiro print.

     O QUE NÃO ENTRA NA ESCALA, e por quê: número e glifo usados como DESENHO — o 66 px do
     placar da sinastria, o 74 px do símbolo na capa do cartão, o 40 px da lua que carrega,
     o preço grande da eletiva. Eles não são tipografia, são figura: o tamanho deles
     responde à caixa onde moram, e não à hierarquia do texto. Cada um está anotado onde
     mora. Os CAMPOS DE FORMULÁRIO também ficam de fora, e por um motivo duro: abaixo de
     16 px o iOS dá zoom na página quando o dedo toca o campo. Ali o número não é gosto. */
  --t-display: clamp(30px, 8.5vw, 44px);
  --t-secao:   clamp(26px, 3.4vw, 32px);
  --t-bloco:   20px;
  --t-cartao:  16px;
  --c-citacao: 18px;
  --c-lede:    16px;
  --c-corpo:   14.5px;
  --c-apoio:   13px;
  --c-nota:    12px;
  --c-etiqueta:10.5px;
  --c-micro:   9.5px;

  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
  --dur-fast:140ms; --dur-base:240ms; --dur-slow:480ms;
}
*{box-sizing:border-box; margin:0; padding:0;}
/* O PUXÃO PARA BAIXO NÃO RECARREGA MAIS A PÁGINA — 02/09/2026, e ele entra junto com o
   zoom da roda porque a queixa era uma só: "ao dar zoom no gráfico, a página dá um bug e
   recarrega".
   O gesto de beliscar passou a ser da roda (ver `o-zoom-da-roda.css`), mas sobrava a outra
   metade: o navegador do celular recarrega a página quando o dedo desce e o topo já
   chegou, e depois de aproximar e arrastar é FÁCIL bater no topo sem querer. Aqui isso
   deixa de acontecer — e não se perde nada: recarregar esta página é o botão do navegador,
   nunca um gesto que precisa existir. */
html{scroll-behavior:smooth; overscroll-behavior-y:contain;}
/* Enquanto o dicionário de espanhol não passou, a página fica invisível: um piscar de
   português numa página que a pessoa abriu em espanhol é pior que meio segundo de branco.
   A classe é posta pelo `netlify-build.sh` SÓ na cópia /es/, e cai de três formas — pelo
   tradutor, pelo `setTimeout` de segurança, ou nunca sendo posta (que é o caso do
   português). Nenhuma delas depende do dicionário existir. */
html.traduzindo body{visibility:hidden;}
/* O SITE NÃO TEM EMOJI — 26/08/2026.
   Quem fala aqui são os glifos astrológicos (♈…♓, ☉, ☽, ♀, ♄) e mais nada. O problema é
   que quase todos eles são, para o Unicode, caracteres de dupla apresentação: sem instrução
   nenhuma, iOS e Android desenham ♀ e os doze signos como emoji colorido, e o mapa astral
   passa a ter figurinha no lugar de símbolo. O `font-variant-emoji:text` declarado aqui em
   cima diz "desenhe a forma de texto" para a página inteira, e não só nos pontos onde
   alguém lembrou de pedir — que era o estado até hoje (a roda em SVG pedia, a lista de
   aspectos pedia, o resto não). Onde o navegador for velho demais para conhecer a
   propriedade, quem segura são os seletores de variação U+FE0E do HTML. */
body{font-family:var(--fonte-interface); background:var(--bg); color:var(--ink-soft); line-height:1.68; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-size:var(--c-lede); font-variant-emoji:text; -webkit-font-variant-emoji:text;}
/* O ENTRELETRA AFROUXOU COM A SERIFA: -0,017em era a medida de uma sans, e numa serifa de
   traço variável ele fecha as contrafomas e embola o texto grande. -0,004em mantém o título
   compacto sem grudar. O `font-optical-sizing` é o que faz a Fraunces usar o eixo óptico
   dela — traço mais grosso no pequeno, mais fino no grande. */
h1,h2,h3,h4{font-family:var(--fonte-titulo); font-weight:600; color:var(--ink); letter-spacing:-0.004em; line-height:1.16; font-optical-sizing:auto;}
/* O TAMANHO PADRÃO DE CADA TÍTULO — 01/09/2026, e ele fechou o último buraco da escala.
   Até aqui `h1..h4` tinham família, peso e cor, mas NENHUM tamanho: um título sem regra
   própria caía no padrão do navegador (1,5em para o h2, ou seja 23,3 px), que não é degrau
   nenhum desta escala e muda de navegador para navegador. Era o que fazia "O que chega
   até você" sair a 24 px numa tela em que todos os outros títulos de seção saem a 26.
   Com esta linha, quem escrever um `<h2>` novo amanhã e não lembrar de estilizá-lo já
   nasce na escala. Regra que só funciona quando alguém lembra dela não é padrão: é sorte. */
h1{font-size:var(--t-display);}
h2{font-size:var(--t-secao);}
h3{font-size:var(--t-cartao);}
h4{font-size:var(--c-nota);}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1080px; margin:0 auto; padding:0 32px;}
img,svg{display:block; max-width:100%;}
button{font-family:inherit; cursor:pointer;}
svg text{font-variant-emoji:text; -webkit-font-variant-emoji:text; font-family:'Noto Sans Symbols','Noto Sans Symbols 2','Segoe UI Symbol','Inter',sans-serif;}
#wheel-hero, #wheel-result{shape-rendering:geometricPrecision;}
a, button, input, summary, .lib-card, .poster-card, .test-card{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);}
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible{outline:2px solid var(--brass-dark); outline-offset:3px; border-radius:4px;}
table, .pos-table td, .pos-table th{font-variant-numeric:tabular-nums;}
::selection{background:var(--brass-light); color:var(--ink);}
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border); border-radius:10px; border:2px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:var(--brass);}

@keyframes fadeInUp{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
@keyframes softPulse{0%,100%{opacity:1;} 50%{opacity:0.72;}}
@keyframes shimmer{0%{background-position:-200% 0;} 100%{background-position:200% 0;}}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

.ornament{display:flex; align-items:center; justify-content:center; gap:14px; color:var(--brass-dark); font-size:var(--c-apoio); opacity:0.75; padding:6px 0 0;}
.ornament::before, .ornament::after{content:""; width:64px; height:1px; background:var(--gold-line);}

/* O TRAÇO DO SOBRETÍTULO SAIU — 30/08/2026, a pedido da dona: "remover esse traço de
   todo app porque ele é muito ia". Era um filete de 28px desenhado por `.eyebrow::before`
   antes de cada sobretítulo ("ANÁLISE ASTROLÓGICA", "ASTROLOGIA ELETIVA", "DEPOIMENTOS"),
   e mais dois flanqueando os sobretítulos da aba do horóscopo e da aba do assinante.
   Foram os três lugares — se um deles ficasse, o traço continuaria aparecendo em parte
   do app e a queixa voltaria com um print de outra tela.

   O `gap` fica: ele só separa filhos, e sem o pseudo-elemento não há o que separar.
   Fica escrito para ninguém "restaurar" o filete achando que foi perda acidental. */
.eyebrow{font-size:var(--c-nota); letter-spacing:0.16em; text-transform:uppercase; color:var(--brass-dark); margin-bottom:18px; display:flex; align-items:center; gap:11px; font-weight:600;}
/* O RÓTULO EM VERMELHO — 01/09/2026, a pedido da dona para a Astrologia eletiva
   ("ASTROLOGIA ELETIVA em vermelho paleta do site"). É o `--rust`, o mesmo vermelho-terra
   do botão que fecha a compra e do título do formulário de nascimento — não um vermelho
   novo, que seria uma cor a mais numa paleta que já tem trinta e três.
   É uma CLASSE, e não um `style=` na tag, porque o mesmo rótulo pode aparecer noutra tela
   um dia: cor escrita na tag é cor que a segunda tela não herda. Sobre o pergaminho ele
   mede 6,7:1 — folgado na WCAG AA, inclusive nos 12 px em caixa alta deste rótulo. */
.eyebrow-rust{color:var(--rust);}
.section-head{max-width:600px; margin:0 auto 48px; text-align:center;}
.section-head p{color:var(--ink-soft); font-size:var(--c-corpo);}
/* Fundo era var(--brass): branco sobre #AB7C3B dá 3,70:1 — reprova na WCAG AA
   (4,5:1) justamente no botão que fecha a venda. Com --brass-dark sobe para
   6,21:1, sem sair da paleta. O hover escurece mais um passo. */
.btn-primary{background:var(--rust); color:#fff; font-weight:600; font-size:var(--c-corpo); letter-spacing:0.01em; padding:15px 30px; border:none; border-radius:var(--radius-sm); box-shadow:var(--shadow-rust); position:relative; overflow:hidden;}
.btn-primary::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0)); opacity:0; transition:opacity var(--dur-base) var(--ease);}
.btn-primary:hover{background:var(--rust-deep); transform:translateY(-1px); box-shadow:var(--shadow-rust-lg);}
.btn-primary:hover::after{opacity:1;}
.btn-primary:active{transform:translateY(0) scale(0.98); box-shadow:var(--shadow-rust);}
.btn-primary:disabled{opacity:0.55; cursor:not-allowed; transform:none; box-shadow:none;}

/* A CAPA MOSTRA O SÍMBOLO, NUNCA O EMOJI — 31/08/2026, a pedido da dona do projeto.

   Os doze signos (♈…♓) são os únicos glifos desta loja que o Unicode marca com
   apresentação de EMOJI por padrão. Sem quem diga o contrário, o aparelho serve a fonte
   colorida, e a capa do produto aparece com um desenho de emoji no lugar do símbolo
   astrológico — foi assim que o ♋ da Astrologia da maternidade chegou ao celular dela.

   SÃO DUAS METADES, e uma sozinha não resolve: o `\uFE0E` depois do glifo, nos dados
   (`app/roda-de-sinastria.js`, `app/nucleo/catalogo-e-compra.js`, `app/eletiva-a-vitrine.js`), e
   esta regra, que pede ao navegador a fonte de SÍMBOLO em vez da de emoji. A régua já
   existia em dois lugares — a `astrologia-mundial.js` põe o seletor na gravura, e a capa
   da vitrine já trazia estas três declarações —, mas a capa redonda da página do produto e
   a capa do cartão da biblioteca nunca tinham recebido nenhuma das duas.

   O seletor da biblioteca é o GLIFO, e não a capa inteira: dentro da mesma capa moram o
   selo e o relógio da produção, e trocar a fonte deles trocaria a letra de dois textos que
   não têm símbolo nenhum.

   Fica AQUI, e numa regra só, porque três cópias das mesmas três declarações é a receita
   de a quarta capa nascer sem elas. Quem criar uma capa nova acrescenta o seletor a esta
   lista — e não copia o bloco. */
.poster-cover .glyph-bg,
#view-product .hero-glyph,
.lib-card-cover .lib-card-glyph,
.elo-glifo,
.recebe-card .g{
  font-variant-emoji:text; -webkit-font-variant-emoji:text;
  font-family:'Noto Sans Symbols','Noto Sans Symbols 2','Segoe UI Symbol','Inter',sans-serif;
}
/* ==========================================================================
   AS CAPAS — a cor de cada leitura, num vocabulário só.
   ==========================================================================
   POR QUE ESTE ARQUIVO EXISTE, e a data importa: 31/08/2026, a pedido da dona do projeto.
   A queixa dela veio com exemplo: "Mapa de Espiritualidade e Magia e o de Vidas Passadas
   têm o mesmo símbolo e o mesmo tom de roxo"; "os de estudos têm praticamente a mesma capa
   todos"; "amor também". Três queixas, um defeito só — e o defeito era de ARQUITETURA,
   não de gosto.

   O QUE HAVIA ANTES: vinte e sete classes chamadas `.cover-1` … `.cover-27`, numeradas por
   ordem de chegada. Quem criava um produto novo pegava o primeiro número livre e escrevia
   um gradiente ali. Numerar por chegada tem duas consequências que a vitrine paga:

   · a cor de um produto não tem NOME — `cover-17` não diz roxo, então ninguém percebe que
     o 8 e o 17 são o mesmo roxo até ver os dois cartões lado a lado no celular;
   · o número é um recurso DISPUTADO. Em 31/08 quatro produtos nasceram no mesmo dia, em
     quatro sessões que não sabiam umas das outras, e os quatro escolheram `cover-24` —
     está tudo escrito no arquivo que este aqui substitui.

   O QUE HÁ AGORA: um vocabulário de trinta e três cores com NOME (`capa-ouro`, `capa-vinho`,
   `capa-turquesa`), e cada uma define as mesmas dez variáveis. Duas sessões que escolhem
   `capa-vinho` para produtos diferentes produzem um conflito VISÍVEL na leitura do diff,
   e a conferência da tela reprova antes de ir ao ar (ver `conferir_a_tela.js`, a régua
   "as capas: nenhuma repetida na prateleira, nenhuma órfã"). Cor com nome é cor que se
   percebe repetida.

   AS DEZ VARIÁVEIS, e por que são dez:
   · `--capa-clara`, `--capa-media`, `--capa-funda` — as três paradas do gradiente da capa.
   · `--capa-botao` e `--capa-botao-forte` — o botão do cartão e o da página, e o tom do
     hover. NÃO são a `--capa-media`: o texto do botão é branco, e a média de metade destas
     cores reprovaria a WCAG AA. Cada `--capa-botao` foi ESCURECIDA até o branco em cima
     dela passar de 4,5:1 — o número medido está no comentário de cada linha.
   · `--capa-fundo` e `--capa-fundo-forte` — o "fundo mais claro" que a página do produto
     passou a usar. NÃO são a cor da capa misturada no pergaminho: misturar uma cor escura
     num papel claro ESCURECE mais do que tinge, e o violeta a 8,5% saía cinza — foi medido
     numa captura antes de virar isto. O que tinge é guardar o matiz e a saturação e subir a
     luminosidade até perto da do papel, que é exatamente a relação entre o pergaminho
     #F8F3E7 e o latão que ele sempre teve.

     A LUMINOSIDADE DESCEU DE 94,5% PARA 90,5% (e a do forte, de 89,5% para 87%) EM
     02/09/2026, e o motivo é uma queixa medida: "as abas que deveriam estar branca estão
     todas na cor do fundo da página, tipo monocromático" — dita sobre a Astrocartografia,
     o Onde Morar e o Mapa do estudante, mas verdadeira nas 33.
     A conta explica: a 94,5% o fundo ficava a 3,5 pontos do branco do cartão. Medido em
     píxel, o degrau entre a página e o cartão era de 8 a 20 níveis por canal — menos do
     que a sombra do próprio cartão, então o que separava os dois era a sombra, e não a
     cor. A 90,5% o degrau passa a 25-45 níveis: o cartão volta a ser BRANCO sobre um papel
     tingido, em vez de duas folhas quase iguais.
     E o número é MENOR que os 93,7% do pergaminho de propósito: na página inicial o
     branco se separa do papel também pela temperatura (o pergaminho é quente e o cartão
     é neutro), e metade destas 33 cores é fria — nelas a temperatura não ajuda, e só a
     luminosidade separa. Um número só para as 33 é o que impede que a próxima cor fria
     nasça invisível.
   · `--capa-vidro` — o mesmo `--capa-fundo` com transparência, para a barra de cima da
     página do produto, que é translúcida.
   · `--capa-brilho` — a cor do botão a 30% de opacidade, para o halo do campo em foco. Ele
     PRECISA ser translúcido: o halo cai por cima da borda do campo, e uma cor sólida
     apagaria a borda em vez de envolvê-la.
   · `--capa-sombra` — a sombra do botão, tingida da cor da capa. Sombra de latão embaixo
     de botão turquesa suja o tom; esta acompanha.

   COMO USAR: a classe vai no ELEMENTO DE FORA (o `.poster-card`, o `#view-product`, o
   `.lib-card`), nunca só na capa. As variáveis descem por herança, e é por isso que o
   botão do cartão consegue ser da cor da capa sem ninguém repetir a cor no JavaScript.

   QUEM ESCOLHE A COR DE CADA PRODUTO é o `ARTE_DOS_PRODUTOS`, em `app/roda-de-sinastria.js`
   — um lugar só, lido pelo cartão, pela página do produto e pela biblioteca.

   E AS CORES TÊM UM SEGUNDO EMPREGO, do lado do Mapa eletivo: lá elas dizem PLANETA. As 33
   estão repartidas em sete famílias disjuntas — dourados do Sol, prateados da Lua, azuis e
   verde-azulados de Mercúrio, rosas de Vênus, vermelhos de Marte, púrpuras de Júpiter,
   escuros e terrosos de Saturno — e a capa de cada eleição sai do significador dela
   (`EL_ARTE_PLANETA`, em `app/eletiva-a-vitrine.js`). A disjunção é o que faz a leitura
   valer nos dois sentidos, e é cobrada pela conferência da tela: cartão rosa é venusiano,
   sempre. Quem for acrescentar cor a uma família tira de outra, ou cria uma nova aqui.

   Do lado dos produtos as cores NÃO dizem planeta — dizem identidade da leitura, e as duas
   coisas convivem porque nunca dividem a mesma fileira, com uma exceção: a prateleira
   "Estudos" da página inicial, onde o Mapa do estudante (azul, mercurial ele também) fica
   ao lado dos objetivos de estudo.
   ========================================================================== */

/* ---------- O VOCABULÁRIO: trinta e três cores com nome ---------- */
/* quentes — do ouro ao castanho */
.capa-ouro{--capa-clara:#E2BF8D; --capa-media:#B8863F; --capa-funda:#3C2B1A; --capa-botao:#966D33; --capa-botao-forte:#7B5A2A; --capa-fundo:#F0EADE; --capa-fundo-forte:#EBE0D0; --capa-vidro:rgba(240,234,222,0.86); --capa-brilho:rgba(150,109,51,0.30); --capa-sombra:rgba(60,43,26,0.28);} /* ouro solar — branco no botão: 4.63:1 */
.capa-cobre{--capa-clara:#ECA67D; --capa-media:#C2662F; --capa-funda:#3F2216; --capa-botao:#B25D2B; --capa-botao-forte:#954E24; --capa-fundo:#F1E4DD; --capa-fundo-forte:#EFD9CD; --capa-vidro:rgba(241,228,221,0.86); --capa-brilho:rgba(178,93,43,0.30); --capa-sombra:rgba(63,34,22,0.28);} /* cobre queimado — branco no botão: 4.67:1 */
.capa-ambar{--capa-clara:#F2C294; --capa-media:#D4863A; --capa-funda:#472B16; --capa-botao:#A76524; --capa-botao-forte:#8A531E; --capa-fundo:#F1E7DD; --capa-fundo-forte:#EFDDCD; --capa-vidro:rgba(241,231,221,0.86); --capa-brilho:rgba(167,101,36,0.30); --capa-sombra:rgba(71,43,22,0.28);} /* âmbar — branco no botão: 4.63:1 */
.capa-mel{--capa-clara:#E1CA91; --capa-media:#B89642; --capa-funda:#3C301B; --capa-botao:#8B7132; --capa-botao-forte:#715C28; --capa-fundo:#F0EBDE; --capa-fundo-forte:#EBE4D0; --capa-vidro:rgba(240,235,222,0.86); --capa-brilho:rgba(139,113,50,0.30); --capa-sombra:rgba(60,48,27,0.28);} /* mel — branco no botão: 4.65:1 */
/* O TRIGO CHEGOU NA MESCLA — 31/08/2026, com a Astrologia da gravidez, o quinto produto do
   dia a disputar uma classe numerada (ela nasceu no `cover-24`, que já era da Maternidade,
   e tinha ido para o `cover-28`). É o dourado que a sessão dela escolheu, agora com nome, e
   pelo mesmo motivo que ela deu: nenhuma outra capa de "Família e raízes" é dourada. */
.capa-trigo{--capa-clara:#F0CD87; --capa-media:#D19A2E; --capa-funda:#433115; --capa-botao:#946D21; --capa-botao-forte:#77581A; --capa-fundo:#F1EBDD; --capa-fundo-forte:#EFE3CD; --capa-vidro:rgba(241,235,221,0.86); --capa-brilho:rgba(148,109,33,0.30); --capa-sombra:rgba(67,49,21,0.28);} /* trigo dourado — branco no botão: 4.68:1 */
.capa-caqui{--capa-clara:#CDAD73; --capa-media:#8B6F3D; --capa-funda:#2F251A; --capa-botao:#8B6F3D; --capa-botao-forte:#725B32; --capa-fundo:#EDE9E0; --capa-fundo-forte:#E9E2D3; --capa-vidro:rgba(237,233,224,0.86); --capa-brilho:rgba(139,111,61,0.30); --capa-sombra:rgba(47,37,26,0.28);} /* cáqui dourado — branco no botão: 4.73:1 */
.capa-castanho{--capa-clara:#CB8C56; --capa-media:#7A5230; --capa-funda:#2A1D17; --capa-botao:#7A5230; --capa-botao-forte:#604126; --capa-fundo:#F0E7DE; --capa-fundo-forte:#EADDD2; --capa-vidro:rgba(240,231,222,0.86); --capa-brilho:rgba(122,82,48,0.30); --capa-sombra:rgba(42,29,23,0.28);} /* castanho de terra — branco no botão: 6.82:1 */
.capa-terracota{--capa-clara:#E4826A; --capa-media:#A8462E; --capa-funda:#381916; --capa-botao:#A8462E; --capa-botao-forte:#8C3A26; --capa-fundo:#F1E0DD; --capa-fundo-forte:#EED4CE; --capa-vidro:rgba(241,224,221,0.86); --capa-brilho:rgba(168,70,46,0.30); --capa-sombra:rgba(56,25,22,0.28);} /* terracota — branco no botão: 5.87:1 */
.capa-coral{--capa-clara:#E5B192; --capa-media:#C0703F; --capa-funda:#3E251A; --capa-botao:#A96337; --capa-botao-forte:#8E532F; --capa-fundo:#F1E5DD; --capa-fundo-forte:#ECD9CF; --capa-vidro:rgba(241,229,221,0.86); --capa-brilho:rgba(169,99,55,0.30); --capa-sombra:rgba(62,37,26,0.28);} /* coral — branco no botão: 4.66:1 */
.capa-pessego{--capa-clara:#EBBD9F; --capa-media:#C97B4A; --capa-funda:#44271A; --capa-botao:#AB6133; --capa-botao-forte:#8F512B; --capa-fundo:#F1E5DD; --capa-fundo-forte:#EDD9CE; --capa-vidro:rgba(241,229,221,0.86); --capa-brilho:rgba(171,97,51,0.30); --capa-sombra:rgba(68,39,26,0.28);} /* pêssego — branco no botão: 4.69:1 */

/* vermelhos e rosas */
.capa-vinho{--capa-clara:#D56488; --capa-media:#8E3350; --capa-funda:#301420; --capa-botao:#8E3350; --capa-botao-forte:#742A41; --capa-fundo:#F0DEE4; --capa-fundo-forte:#EBD0D9; --capa-vidro:rgba(240,222,228,0.86); --capa-brilho:rgba(142,51,80,0.30); --capa-sombra:rgba(48,20,32,0.28);} /* vinho — branco no botão: 7.67:1 */
.capa-framboesa{--capa-clara:#DE91AC; --capa-media:#B2456B; --capa-funda:#3A1827; --capa-botao:#B2456B; --capa-botao-forte:#983B5C; --capa-fundo:#F0DEE4; --capa-fundo-forte:#EAD2DA; --capa-vidro:rgba(240,222,228,0.86); --capa-brilho:rgba(178,69,107,0.30); --capa-sombra:rgba(58,24,39,0.28);} /* framboesa — branco no botão: 5.31:1 */
.capa-rosa{--capa-clara:#E1B6CD; --capa-media:#B56A93; --capa-funda:#3E2033; --capa-botao:#AD5987; --capa-botao-forte:#974B74; --capa-fundo:#EDE0E7; --capa-fundo-forte:#E7D4DE; --capa-vidro:rgba(237,224,231,0.86); --capa-brilho:rgba(173,89,135,0.30); --capa-sombra:rgba(62,32,51,0.28);} /* rosa antigo — branco no botão: 4.62:1 */
/* A MALVA NASCEU PARA VÊNUS — 31/08/2026. A orquídea saiu da família venusiana das eleições
   porque é a capa do produto "Magnetismo e beleza", e a coleção Beleza é injetada na MESMA
   fileira que ele: um terço dos objetivos sairia na cor do produto vizinho, e o produto é
   quem some. Vênus sem a orquídea ficava com dois tons para doze objetivos de "Beleza" —
   metade da fileira repetida. Este é o terceiro. */
.capa-malva{--capa-clara:#E4B4CE; --capa-media:#C77FA6; --capa-funda:#482038; --capa-botao:#B45387; --capa-botao-forte:#9E4575; --capa-fundo:#EDE0E7; --capa-fundo-forte:#E9D3DF; --capa-vidro:rgba(237,224,231,0.86); --capa-brilho:rgba(180,83,135,0.30); --capa-sombra:rgba(72,32,56,0.28);} /* malva — branco no botão: 4.66:1 */
.capa-orquidea{--capa-clara:#D1A3D1; --capa-media:#A05CA0; --capa-funda:#351F37; --capa-botao:#A05CA0; --capa-botao-forte:#894F89; --capa-fundo:#ECE1EC; --capa-fundo-forte:#E6D6E6; --capa-vidro:rgba(236,225,236,0.86); --capa-brilho:rgba(160,92,160,0.30); --capa-sombra:rgba(53,31,55,0.28);} /* orquídea — branco no botão: 4.63:1 */

/* roxos — e os dois que a dona apontou moram aqui: `capa-violeta` (profundo, da
   Espiritualidade e Magia) e `capa-ametista` (clara, das Vidas Passadas). A distância
   entre eles é de LUMINOSIDADE, e não de matiz: dois roxos do mesmo tom só se distinguem
   quando estão lado a lado, e na vitrine eles não estão — estão a uma rolagem de distância,
   que é onde a memória da cor falha. */
.capa-ameixa{--capa-clara:#AE83B5; --capa-media:#6E4C74; --capa-funda:#271B2B; --capa-botao:#6E4C74; --capa-botao-forte:#5A3E5E; --capa-fundo:#EBE1EC; --capa-fundo-forte:#E3D6E6; --capa-vidro:rgba(235,225,236,0.86); --capa-brilho:rgba(110,76,116,0.30); --capa-sombra:rgba(39,27,43,0.28);} /* ameixa — branco no botão: 7.12:1 */
.capa-violeta{--capa-clara:#AD9BDB; --capa-media:#6A4EB0; --capa-funda:#251B3C; --capa-botao:#6A4EB0; --capa-botao-forte:#5B4397; --capa-fundo:#E4E0ED; --capa-fundo-forte:#D9D3E9; --capa-vidro:rgba(228,224,237,0.86); --capa-brilho:rgba(106,78,176,0.30); --capa-sombra:rgba(37,27,60,0.28);} /* violeta profundo — branco no botão: 6.31:1 */
.capa-ametista{--capa-clara:#C5ADEB; --capa-media:#A98BD8; --capa-funda:#331D55; --capa-botao:#885FC9; --capa-botao-forte:#7544C0; --capa-fundo:#E5DDF1; --capa-fundo-forte:#DBCFEC; --capa-vidro:rgba(229,221,241,0.86); --capa-brilho:rgba(136,95,201,0.30); --capa-sombra:rgba(51,29,85,0.28);} /* ametista clara — branco no botão: 4.62:1 */
.capa-lilas{--capa-clara:#C0B2E6; --capa-media:#7C63BE; --capa-funda:#281D43; --capa-botao:#7C63BE; --capa-botao-forte:#674BB3; --capa-fundo:#E4DEF0; --capa-fundo-forte:#D8D2EA; --capa-vidro:rgba(228,222,240,0.86); --capa-brilho:rgba(124,99,190,0.30); --capa-sombra:rgba(40,29,67,0.28);} /* lilás — branco no botão: 4.79:1 */

/* azuis */
.capa-indigo{--capa-clara:#9093D3; --capa-media:#4C4FA0; --capa-funda:#1C1B37; --capa-botao:#4C4FA0; --capa-botao-forte:#414388; --capa-fundo:#E0E0ED; --capa-fundo-forte:#D4D5E8; --capa-vidro:rgba(224,224,237,0.86); --capa-brilho:rgba(76,79,160,0.30); --capa-sombra:rgba(28,27,55,0.28);} /* índigo — branco no botão: 7.16:1 */
.capa-noite{--capa-clara:#656EB0; --capa-media:#3A3F63; --capa-funda:#181826; --capa-botao:#3A3F63; --capa-botao-forte:#2D314C; --capa-fundo:#E1E4EC; --capa-fundo-forte:#D6D7E6; --capa-vidro:rgba(225,228,236,0.86); --capa-brilho:rgba(58,63,99,0.30); --capa-sombra:rgba(24,24,38,0.28);} /* azul da noite — branco no botão: 10.14:1 */
.capa-marinho{--capa-clara:#5D88CC; --capa-media:#33507E; --capa-funda:#151C2E; --capa-botao:#33507E; --capa-botao-forte:#294065; --capa-fundo:#DEE5F0; --capa-fundo-forte:#D2DBEA; --capa-vidro:rgba(222,229,240,0.86); --capa-brilho:rgba(51,80,126,0.30); --capa-sombra:rgba(21,28,46,0.28);} /* azul-marinho — branco no botão: 8.11:1 */
.capa-azul{--capa-clara:#90ADD7; --capa-media:#4A6FA5; --capa-funda:#1C2538; --capa-botao:#4A6FA5; --capa-botao-forte:#3F5E8C; --capa-fundo:#E0E5ED; --capa-fundo-forte:#D3DCE8; --capa-vidro:rgba(224,229,237,0.86); --capa-brilho:rgba(74,111,165,0.30); --capa-sombra:rgba(28,37,56,0.28);} /* azul de tinta — branco no botão: 5.11:1 */
.capa-aco{--capa-clara:#B6C7D8; --capa-media:#6E8BA8; --capa-funda:#242D3B; --capa-botao:#5A7896; --capa-botao-forte:#4D6680; --capa-fundo:#E1E7EC; --capa-fundo-forte:#D6DDE6; --capa-vidro:rgba(225,231,236,0.86); --capa-brilho:rgba(90,120,150,0.30); --capa-sombra:rgba(36,45,59,0.28);} /* azul-aço — branco no botão: 4.61:1 */
/* A PRATA NASCEU PARA A LUA — 31/08/2026, na segunda passada das capas. As eleições
   eletivas passaram a ser pintadas pelo PLANETA que as rege, e a Lua não tinha família de
   cor: o céu e o aço sozinhos davam dois tons, e há eleições lunares suficientes (mudança,
   casa, agricultura, filhos, pets) para os dois vizinhos saírem iguais. */
.capa-prata{--capa-clara:#C0CBD8; --capa-media:#93A3B5; --capa-funda:#2C3340; --capa-botao:#61768E; --capa-botao-forte:#536478; --capa-fundo:#E1E7EC; --capa-fundo-forte:#D6DDE6; --capa-vidro:rgba(225,231,236,0.86); --capa-brilho:rgba(97,118,142,0.30); --capa-sombra:rgba(44,51,64,0.28);} /* prata da Lua — branco no botão: 4.67:1 */
.capa-ceu{--capa-clara:#B4CEE4; --capa-media:#6B98BE; --capa-funda:#203144; --capa-botao:#4778A2; --capa-botao-forte:#3C6689; --capa-fundo:#E0E7ED; --capa-fundo-forte:#D3DFE9; --capa-vidro:rgba(224,231,237,0.86); --capa-brilho:rgba(71,120,162,0.30); --capa-sombra:rgba(32,49,68,0.28);} /* azul do céu — branco no botão: 4.67:1 */

/* verdes */
.capa-turquesa{--capa-clara:#74D0C1; --capa-media:#3D8F82; --capa-funda:#182F2F; --capa-botao:#378175; --capa-botao-forte:#2C685E; --capa-fundo:#DFEEED; --capa-fundo-forte:#D3E9E5; --capa-vidro:rgba(223,238,237,0.86); --capa-brilho:rgba(55,129,117,0.30); --capa-sombra:rgba(24,47,47,0.28);} /* turquesa — branco no botão: 4.62:1 */
.capa-esmeralda{--capa-clara:#54D0B1; --capa-media:#2E7E6A; --capa-funda:#142A28; --capa-botao:#2E7E6A; --capa-botao-forte:#246454; --capa-fundo:#DEF0EC; --capa-fundo-forte:#D1EBE5; --capa-vidro:rgba(222,240,236,0.86); --capa-brilho:rgba(46,126,106,0.30); --capa-sombra:rgba(20,42,40,0.28);} /* esmeralda — branco no botão: 4.87:1 */
.capa-agua{--capa-clara:#A9D7C5; --capa-media:#5FA98C; --capa-funda:#213631; --capa-botao:#447F68; --capa-botao-forte:#386855; --capa-fundo:#E1ECE9; --capa-fundo-forte:#D5E6E0; --capa-vidro:rgba(225,236,233,0.86); --capa-brilho:rgba(68,127,104,0.30); --capa-sombra:rgba(33,54,49,0.28);} /* verde-água — branco no botão: 4.69:1 */
.capa-verde{--capa-clara:#9BBE78; --capa-media:#5F7A44; --capa-funda:#22291C; --capa-botao:#5F7A44; --capa-botao-forte:#4D6337; --capa-fundo:#E7ECE1; --capa-fundo-forte:#DDE6D6; --capa-vidro:rgba(231,236,225,0.86); --capa-brilho:rgba(95,122,68,0.30); --capa-sombra:rgba(34,41,28,0.28);} /* verde de folha — branco no botão: 4.82:1 */
.capa-limao{--capa-clara:#B7DD6C; --capa-media:#7A9E33; --capa-funda:#2A3317; --capa-botao:#617D28; --capa-botao-forte:#4C6220; --capa-fundo:#EBF1DD; --capa-fundo-forte:#E2ECCF; --capa-vidro:rgba(235,241,221,0.86); --capa-brilho:rgba(97,125,40,0.30); --capa-sombra:rgba(42,51,23,0.28);} /* verde-limão — branco no botão: 4.69:1 */

/* neutros */
.capa-ardosia{--capa-clara:#99A1AD; --capa-media:#5E6570; --capa-funda:#222229; --capa-botao:#5E6570; --capa-botao-forte:#4E535D; --capa-fundo:#E1E5EC; --capa-fundo-forte:#D6DCE6; --capa-vidro:rgba(225,229,236,0.86); --capa-brilho:rgba(94,101,112,0.30); --capa-sombra:rgba(34,34,41,0.28);} /* cinza-ardósia — branco no botão: 5.88:1 */
.capa-grafite{--capa-clara:#818398; --capa-media:#4A4B57; --capa-funda:#1C1B22; --capa-botao:#4A4B57; --capa-botao-forte:#3A3A44; --capa-fundo:#E1E4EC; --capa-fundo-forte:#D6D7E6; --capa-vidro:rgba(225,228,236,0.86); --capa-brilho:rgba(74,75,87,0.30); --capa-sombra:rgba(28,27,34,0.28);} /* grafite — branco no botão: 8.62:1 */

/* ---------- ONDE ELAS PINTAM ----------
   As três capas do aplicativo — a do cartão da vitrine, a redonda da página do produto e a
   do cartão da biblioteca — são o MESMO gradiente com raios diferentes, e passaram a ser
   escritas uma vez só. Antes eram três: uma em `.cover-N`, outra num `style=` montado pelo
   JavaScript da página do produto, e a terceira noutro `style=` da biblioteca. Três cópias
   é como o Mapa Matrix acabou dourado no cartão e roxo na página do produto — desde 24/08,
   o dia em que ele nasceu, até hoje, sem que nada reclamasse: nenhuma régua comparava as
   duas listas por COR, só por existência.

   O valor de reserva no `var()` não é enfeite: cartão sem classe de capa sairia com fundo
   transparente — um retângulo branco com um glifo branco em cima, ilegível e sem erro
   nenhum no console. Com a reserva ele sai dourado, que é errado mas visível. */
.poster-cover,
#view-product .hero-glyph,
.lib-card-cover,
.elo-glifo{
  background:
    radial-gradient(115% 95% at 24% 8%, var(--capa-clara, #E2BF8D) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(158deg, var(--capa-media, #B8863F) 0%, var(--capa-funda, #3C2B1A) 100%);
}

/* ---------- A AQUARELA POR CIMA DA COR ----------
   31/08/2026, a pedido da dona: "o foco é deixar o app bonito agora; se inspire nessas
   imagens". As imagens que ela mandou são as artes que este repositório JÁ TEM: os doze
   `signo-<nome>-noite-240.webp` que a aba do horóscopo serve. Quem escolhe qual delas pinta
   cada capa é o `ARTE_DOS_PRODUTOS` (pelo regente do produto) e a `casa_tema` de cada
   eleição (Casa 1 é Áries, Casa 12 é Peixes).

   `overlay` É A ESCOLHA QUE FAZ ISSO FUNCIONAR, e foi decidida comparando cinco tratamentos
   lado a lado numa página de teste. Nele o claro da pintura clareia e o escuro escurece, de
   modo que a figura e o céu pintado aparecem SEM tirar a cor da leitura — um cartão de Vênus
   continua rosa, só deixa de ser liso. Com `mix-blend-mode:color` a arte vira dona da luz e
   todas as capas escurecem juntas: as trinta e três cores viravam três.

   O QUE NÃO ESTÁ AQUI, E FOI TIRADO NO MESMO DIA: um céu de estrelinhas douradas desenhado
   em SVG, mais um grão de papel, mais uma vinheta — três texturas que EU inventei e que
   ninguém pediu. A resposta da dona foi de uma linha: "eu nao pedi estrelinhas". A capa usa
   a arte dela e a cor; o que aparecer de estrela nas capas é o que a própria aquarela já
   tem pintado. Quem for acrescentar textura aqui: pergunte antes.

   `position:relative` NÃO É ENFEITE NA LINHA ABAIXO — foi o defeito da primeira tentativa.
   A camada é `position:absolute; inset:0`, e `inset` se mede contra o ANTEPASSADO
   POSICIONADO mais próximo. A `.poster-cover` já era relativa; o círculo do produto e o da
   eleição não eram — e a camada deles se mediu contra a TELA, cobrindo a página inteira por
   cima do texto. O `isolation` é o par disso: sem ele, a camada de z-index -1 iria para trás
   do fundo do próprio elemento, e a arte sumiria embaixo do degradê. */
/* `overflow:hidden` ENTROU EM 01/09/2026, e é o que faltava para os dois REDONDOS.
   A queixa da dona foi "bug no símbolo da página dos mapas, como se o recortado
   continuasse aparecendo" — e era exatamente isso: a arte de baixo saía QUADRADA por trás
   do círculo, com o disco por cima dela.

   O PORQUÊ, que vale escrito: `border-radius` recorta o FUNDO do próprio elemento, mas não
   recorta filho nenhum — nem um pseudo-elemento — a menos que haja `overflow:hidden`. O
   degradê, que é fundo, obedecia ao círculo; a aquarela, que é uma camada `::before`, não
   obedecia a nada. As duas capas RETANGULARES (`.poster-cover` e `.lib-card-cover`) já
   traziam o `overflow` em casa e por isso nunca mostraram o defeito — o que escondeu, por
   um dia, que a regra que CRIA a camada nunca tinha dito quem a recorta.
   Agora diz, no mesmo lugar em que a camada nasce, para os quatro de uma vez. */
/* A `.combina-arte` SAIU DESTAS DUAS LISTAS EM 08/09/2026, e sair delas é a mudança inteira
   — do mesmo jeito que entrar tinha sido, em 07/09.

   A lista de "leituras que combinam" virou a ESTEIRA da vitrine, a pedido da dona, e o
   cartão dela é o `.poster-card`: a miniatura quadrada de 48 px deixou de existir, e quem
   pinta a arte agora é a `.poster-cover`, que já está na lista, primeira. Nenhuma receita de
   aquarela mudou — mudou quem a usa. */
.poster-cover, #view-product .hero-glyph, .lib-card-cover, .elo-glifo{isolation:isolate; position:relative; overflow:hidden;}
.poster-cover::before, #view-product .hero-glyph::before, .lib-card-cover::before, .elo-glifo::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--arte); background-size:cover; background-position:center;
  mix-blend-mode:overlay; opacity:0.62;
}
/* Nos círculos, o recorte sobe um pouco para pegar a figura e não só o céu de baixo. */
#view-product .hero-glyph::before, .elo-glifo::before{background-position:center 38%;}
/* O GLIFO VIRA SELO — canto de baixo, pequeno, com sombra. No meio da capa ele disputava com
   a figura pintada e as duas saíam sujas; no canto, ele assina. A sombra existe porque a
   aquarela tem partes claras: sem ela o símbolo some sobre a nuvem. */
.poster-cover .glyph-bg{
  font-size:40px; opacity:0.5; top:auto; bottom:2px; left:auto; right:12px;
  text-shadow:0 2px 10px rgba(20,16,25,0.55);
}
/* Dentro de `@media (hover:hover)` pela mesma razão da regra gêmea em
   `vitrine-e-carrossel.css`: num aparelho de toque este `:hover` gruda depois do toque, e
   `:hover` que mexe no desenho é o que faz o primeiro toque ser gasto sem abrir nada. */
@media (hover:hover) and (pointer:fine){
  .poster-card:hover .poster-cover .glyph-bg{transform:scale(1.06) rotate(-3deg);}
}
/* ---------- COMPONENTE REUTILIZÁVEL: CARTÃO ----------
   Toda superfície "flutuante" do site (tabelas, listas, formulários de login,
   depoimentos, FAQ, sinastria) parte de UMA destas duas receitas — nunca
   redeclara fundo/borda/raio/sombra do zero. Cada contexto abaixo só ajusta o
   que realmente é específico dele (padding, margem, hover, pseudo-elementos).
   .card          → conteúdo secundário / listas (raio médio, elevação leve)
   .card-prominent → protagonista da tela — mapa, formulário de entrada, placar
                      (raio grande, elevação mais alta) */
.card, .test-card, #view-product .answers-card, #view-product .method-card,
#view-product .faq-card, #view-product .testimonial-card, #view-synastry .syn-person{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-1);
}
.card-prominent, .pos-table-card, .lib-login-box{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-2);
}
.card-interactive, .pos-table-card{transition:box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);}
/* O CARAMELO ESCRITO À MÃO SAIU DAQUI TAMBÉM — 01/09/2026. Era `#DCCB9C`, um bege
   sólido, sobrevivente da paleta anterior ao dia em que `--border` virou tinta
   transparente (31/08, "essa borda caramelo/bege me irrita"). Ele só aparecia com o mouse
   em cima, e por isso escapou daquela varredura: a borda ficava bem-comportada em repouso
   e virava caramelo ao ser tocada. A tinta transparente a 18% é a MESMA `--border` do
   repouso, um passo mais forte — ela escurece de acordo com o fundo em vez de trocar de
   cor, que é a diferença que a queixa apontava. */
.card-interactive:hover{box-shadow:var(--shadow-3); border-color:rgba(31,26,18,0.18);}

/* ---------- COMPONENTE REUTILIZÁVEL: BOTÃO CONTORNADO ----------
   Segunda ação (nunca a principal da tela) — "voltar", "testar de novo",
   "sair". Contorno em latão, preenche ao passar o mouse. */
.btn-outline, #view-synastry .syn-secondary{
  background:transparent; border:1px solid var(--brass-dark); color:var(--brass-dark);
  font-weight:600; font-size:var(--c-corpo); padding:14px 24px; border-radius:var(--radius-sm); cursor:pointer;
}
.btn-outline:hover, #view-synastry .syn-secondary:hover{background:var(--brass-light); transform:translateY(-1px);}
.btn-outline:active, #view-synastry .syn-secondary:active{transform:translateY(0) scale(0.98);}

/* ---------- COMPONENTE REUTILIZÁVEL: O RECADO DE ERRO COM BOTÃO — 03/09/2026 ----------
   Três telas dependem de rede e paravam com a frase do erro e mais nada: a aba da Lua, a
   Astrologia Mundial e a vitrine da Astrologia eletiva. A da Eletiva chegava a pedir
   "recarregue a página" — que é o único conselho que um app INSTALADO não pode seguir,
   porque lá não há barra de endereço.
   Quem monta é a `recadoDeErroComRetentativa`, no `nucleo/o-que-os-tres-usam.js`. Aqui só
   mora o respiro entre a frase e o botão: a cor e a borda são as do `.btn-outline`, que já
   é o botão de segunda ação deste projeto. */
.recado-erro-frase{margin:0 0 14px;}

/* ---------- COMPONENTE REUTILIZÁVEL: NAVEGAÇÃO ENTRE ÁREAS DA CONTA ----------
   Faixa de atalhos (Hoje / Meu mapa / Horóscopo / Biblioteca) repetida em toda
   tela "logada" — cada uma mostra as OUTRAS três, nunca um link pra si mesma
   (mesmo padrão que a Biblioteca já usava). Antes, ir de "Hoje" pra "Meu Mapa"
   exigia voltar ao catálogo público e entrar de novo; agora é sempre 1 toque. */
.area-nav-wrap{border-bottom:1px solid var(--border-soft); background:rgba(248,243,231,0.6);}
.area-nav{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:12px 0;}
.area-nav::-webkit-scrollbar{display:none;}
.area-nav a, .pill-nav-link{
  flex:none; font-size:var(--c-apoio); font-weight:600; color:var(--ink-soft); padding:8px 15px;
  border-radius:var(--radius-pill); border:1px solid var(--border); background:var(--card); white-space:nowrap; cursor:pointer;
}
.area-nav a:hover, .pill-nav-link:hover{border-color:var(--brass); color:var(--brass-dark); background:var(--brass-light);}
.area-nav a:active, .pill-nav-link:active{transform:scale(0.96);}

/* ==========================================================================
   AS REGRAS DA PONTE SAÍRAM DAQUI — 08/09/2026, com os dois cartões que elas vestiam.
   Eram o `#elo-ponte`, o `.ponte-card`, o `.ponte-glyph`, o título, o parágrafo e o
   botão: um cartão sóbrio que apontava, da leitura, para a eleição irmã, e da eleição
   para a leitura. A dona removeu o primeiro de manhã ("Remove", sobre a foto da tela);
   o segundo saiu à tarde, quando a esteira de sugestões chegou às três telas que cobram
   cartão e passou a fazer o mesmo trabalho no tamanho de um cartão de prateleira.

   REGRA DE ESTILO SEM ELEMENTO NA TELA É PESO MORTO — e este repositório já registrou
   por que ela some junto: a folha continua sendo baixada por todo mundo, e no dia em que
   alguém escrever uma classe com nome parecido, a regra órfã pinta o elemento novo.

   O QUE VALE A PENA GUARDAR, porque é sobre desenho e não sobre este cartão: o par que a
   ponte apontava não se perdeu (é o primeiro cartão da esteira eletiva, ver
   `elDesenharSugestoes`), e a lição do título de duas frases está escrita no
   `mapas/roda-de-sinastria.js`, onde a função que o cortava morava.
   ========================================================================== */



/* ---------- COMPONENTE REUTILIZÁVEL: A ABERTURA DO PAGAMENTO — 03/09/2026 ----------
   Pedido da dona: "a aba forma de pagamento… deve ser igual em todos os produtos e abas".

   TRÊS TELAS DESTE SITE COBRAM — as 33 páginas de produto, o parto programado e a
   Astrologia eletiva —, e até hoje cada uma abria o pagamento de um jeito. A das leituras
   dizia "Forma de pagamento" com tratamento próprio e mostrava as bandeiras; as outras duas
   diziam "Pagamento" num `<h3>` cru, sem bandeira nenhuma. E não era descuido de texto: as
   regras existiam, mas escritas sob `#view-product`, então não alcançavam as outras duas.
   Um seletor com id é assim — resolve a tela de hoje e esconde o problema de amanhã.

   Aqui elas são de CLASSE, e quem quiser a mesma abertura escreve a mesma classe. As
   bandeiras são desenhadas pela `desenharAsMarcas` a partir da lista única de selos, que o
   build confere contra a pasta — nenhuma tela escreve nome de arquivo à mão. */
/* O RESPIRO DE BAIXO É 20 px, E ELE VEIO DE OUTRA PASSADA DE HOJE — não invente 6 aqui.
   Era 6 px, e isso só funcionava enquanto havia uma frase de abertura entre o título e o
   formulário: ela saiu a pedido da dona e levou junto os 18 px de margem que tinha, e o
   título passou a encostar no formulário de pagamento. "Muito espremido em cima", disse
   ela. Os 20 px devolvem o vão que a frase ocupava, sem devolver a frase.
   ESTA REGRA E AQUELE CONSERTO ATRAVESSARAM-SE numa mescla: aquela passada mexeu no número
   enquanto esta mudava a regra de lugar (`#view-product` → classe). Resolver ficando com um
   dos dois lados apagaria o outro; o número é o de lá, o lugar é o daqui. */
.payment-brick-title{
  font-family:var(--fonte-interface); font-size:var(--c-lede);
  margin-bottom:20px; display:flex; align-items:center; gap:8px;
}
.payment-brick-title.brick-secure::before{content:none;}
.payment-intro{font-size:var(--c-apoio); color:var(--muted); margin-bottom:18px; line-height:1.6;}
/* A tira de bandeiras. `object-fit:contain` porque as oito artes oficiais não têm proporção
   comum, e as duas alturas (cartão e palavra) são o que impede o quadrado da Amex de parecer
   minúsculo ao lado da tira do Google Pay — a conta inteira está no `gaveta-de-navegacao.js`,
   junto da lista. */
.meio-marcas{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:7px;}
.meio-marcas img{width:auto; object-fit:contain;}
.meio-marcas .marca-cartao{height:22px; max-width:46px;}
.meio-marcas .marca-palavra{height:18px; max-width:58px;}
/* Fora da tela do produto a tira abre o bloco do pagamento em vez de fechar uma opção, e aí
   ela precisa de um respiro embaixo — é ela que separa o título do formulário do cobrador. */
.marcas-da-abertura{margin-top:2px; margin-bottom:16px;}


/* ---------- AS LEITURAS QUE COMBINAM COM ESTA ----------
   AS DEZ REGRAS DA `.combina-linha` SAÍRAM DAQUI — 08/09/2026. A lista empilhada de 07/09
   virou a ESTEIRA da vitrine, a pedido da dona ("uma esteira rotativa com mapas de
   sugestão"), e uma esteira já tem cartão, encaixe e setas desenhados: são os da
   `.poster-row`, no `vitrine-e-carrossel.css`.

   FICA O REGISTRO DO QUE SE PERDEU DE PROPÓSITO, porque o comentário antigo defendia o
   contrário com um bom argumento: a linha compacta punha símbolo, nome e preço na mesma
   altura do olho, e o cartão de vitrine empurra o preço para baixo da dobra. O que mudou não
   foi o argumento — foi o LUGAR. No meio da página, onde a lista estava, cada sugestão
   custava altura de rolagem; no fim da página, correndo para o lado, dez cartões custam a
   mesma altura que um. E o cartão diz o que a linha não dizia: a descrição da leitura e o
   prazo de entrega. */
/* ---------- HEADER (sem marca) ---------- */
header{position:sticky; top:0; z-index:50; background: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);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:18px 32px; max-width:1080px; margin:0 auto;}
/* A BARRA VAI AO CANTO NA TELA LARGA — 05/09/2026, a pedido da dona: "barra menu/idioma
   estão muito centrais, não deviam estar mais no canto por ser tablet/pc?".

   Ela está certa, e a conta mostra por quê: com o teto de 1.080 o menu ficava a 175 px da
   borda numa janela de 1.365 e a 342 px numa de 1.700 — QUANTO MAIOR A TELA, MAIS PARA
   DENTRO, que é o contrário do que se espera de uma barra de navegação.

   O teto de 1.080 é do TEXTO, e o motivo dele é bom: linha comprida cansa o olho. Barra de
   navegação não tem esse problema — ela tem dois controles nas pontas, e o que se espera
   deles é justamente a ponta. Medida de leitura aplicada a coisa que não é leitura.

   O QUE ISSO CUSTA, e está dito para quem vier depois: o menu deixa de nascer na mesma
   vertical do título da página. Era alinhamento de propósito (ver o comentário no
   `tela-de-produto.css`), e foi trocado pelo canto de propósito também. */
@media (min-width:1000px){
  .nav{max-width:none; padding-inline:40px;}
}
/* A ALTURA DA BARRA, ESCRITA UMA VEZ — 01/09/2026.
   Ela não é escolhida: é a soma da linha acima com o controle mais alto do topo — 18 px de
   respiro em cima, 38 px do botão do menu e do seletor de idioma, 18 px embaixo. Fica AQUI,
   colada na regra que a produz, porque quem mexer no respiro do `.nav` tem de mexer neste
   número no mesmo movimento.

   QUEM USA: a página inicial, que puxa a faixa da arte para debaixo da barra (ver
   `pagina-inicial-e-formulario.css`). Se os dois se desencontrarem, a arte deixa de encostar
   no alto da tela e sobra uma tira creme — e é isso que a conferência da tela passou a medir,
   para o desencontro não esperar um print de celular. Provado por sabotagem no dia: com o
   respiro em 30 px e o token em 74, a régua reprova dizendo "a faixa começa em 24 px". */
:root{--altura-da-barra:74px;}
/* O VIDRO DA BARRA QUANDO HÁ ARTE POR BAIXO — 03/09/2026, e ele virou token no dia em que
   a SEGUNDA tela ganhou arte no topo (a Astrologia eletiva, ver `eletiva-a-vitrine.css`).

   A barra é `rgba(248,243,231,0.85)` em toda tela, e isso está certo onde não há nada atrás
   dela além do fundo liso. Nas telas que abrem com arte, a dona escolheu o contrário em
   01/09 — "a aba fixa poderia ser desta cor ou a continuação da imagem de fundo pra ficar
   mais harmônico" —, e o vidro precisa deixar a arte passar: 52% em vez de 85%.

   ESCRITO AQUI, e não nas duas telas, porque era o mesmo número em dois arquivos — e o
   segundo é sempre o que ninguém atualiza. A conferência da tela mede a opacidade desta
   barra na página inicial (ela reprova acima de 0,85), então mexer neste número é mexer
   numa régua: 0,52 passa com folga. */
:root{--vidro-sobre-arte:rgba(248,243,231,0.52);}
/* A `.nav-links-desktop` E A `.nav-cta` SAÍRAM EM 01/09/2026, junto com o único elemento
   que as usava: o botão "Entrar na minha conta", que foi para o menu a pedido da dona.
   Regra de CSS sem elemento é peso morto que a próxima pessoa lê tentando entender onde
   aquilo aparece — e a resposta seria "em lugar nenhum". */
.logo-placeholder{width:160px; height:20px;} /* reservado para logótipo/nome depois */

/* ---------- COMPONENTE REUTILIZÁVEL: GAVETA DE NAVEGAÇÃO ----------
   Painel off-canvas que desliza da ESQUERDA, com overlay escurecendo a página —
   padrão de app. Substitui o dropdown antigo, que não comportava a árvore de
   navegação inteira (seções + um item por produto). */
/* SEM MOLDURA, e à ESQUERDA. Duas decisões que se somam neste botão.

   À esquerda porque a gaveta entra pela esquerda: abrir um painel do lado esquerdo com um
   botão no canto direito é o gesto contrário ao que a tela faz, e foi assim que ele saiu —
   o botão nasceu como último elemento do `.nav`.

   Sem moldura porque a caixa branca de 38 px que ele tinha desenhava um retângulo que
   competia com o conteúdo e ainda assim não dizia "clicável" — cartão branco é o que o
   resto da página usa para CONTEÚDO. Quem diz que ali se clica é a cor: `--brass-dark`, o
   dourado dos botões de venda e dos títulos de seção. `--brass-dark` e não `--brass`
   porque a régua deste arquivo reserva o `--brass` a ornamento (5,6:1 contra 3,7:1), e o
   ícone virou a ÚNICA pista de que existe um controle aqui. O alvo continua 38 × 38 px:
   sumiu a moldura, não a área de toque.

   `order`, e não recortar e colar o `<button>`: ele é o último elemento de CATORZE
   cabeçalhos, e é logo antes dele que o seletor de idioma é injetado (`montarAcoesDoTopo`).
   Mudar a ordem no HTML seria mudar catorze blocos e o ponto de injeção do JavaScript para
   conseguir o que uma linha de CSS resolve na tela. */
.nav-burger{
  order:-1;
  flex:none; width:38px; height:38px; border-radius:var(--radius-sm);
  border:none; background:transparent; display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:4px; padding:0;
}
/* Mesma decisão da seta, logo acima: sem moldura, e a cor faz o trabalho. As barras
   crescem de 17×1,5 para 19×2 px — traço fino que dependia da borda para ser notado
   desaparece quando a borda sai. */
.nav-burger span{display:block; width:19px; height:2px; background:var(--capa-botao, var(--brass-dark)); border-radius:2px; transition:background var(--dur-base) var(--ease);}
.nav-burger:hover span{background:var(--capa-botao-forte, var(--brass-deep));}

/* ---------- O SELETOR DE IDIOMA, NO TOPO ----------
   Um botão com globo, o NOME DO IDIOMA ESCRITO e uma seta; por baixo dele, a lista dos
   três, cada um com a sua bandeira e o seu nome. Ele diz duas coisas de uma vez: em que
   idioma você está, e que há outros para escolher.

   O NOME ESCRITO ENTROU EM 31/08/2026, no lugar da bandeira redonda solta que estava
   aqui. A bandeira sozinha responde "que país?", e a pergunta de quem chega é "que
   idioma?" — não são a mesma pergunta: a bandeira dos Estados Unidos não é o inglês da
   Austrália, e um mexicano não se reconhece na da Espanha. Pior: um disco de 38 px com
   um desenho dentro não diz que é clicável nem que é sobre idioma, então quem chegava
   numa página no idioma errado precisava adivinhar que aquele disco era a saída.

   E o nome de cada idioma é escrito NO PRÓPRIO IDIOMA — "English", "Español" —, porque
   quem precisa trocar é justamente quem não lê a página em que está. "Inglês" só é
   reconhecido por quem já lê português.

   O botão é injetado por JavaScript em TODO `header .nav` (são 14 telas), e não escrito
   à mão em cada uma. Catorze cópias do mesmo bloco é como se descobre, meses depois, que
   treze mudaram e uma não.

   As bandeiras são SVG desenhado, e não os emoji 🇧🇷/🇺🇸/🇪🇸: emoji de bandeira não
   existe em Windows (sai "BR" em duas letras) e este site não usa emoji. */
/* Sem `margin-right`: com o menu à esquerda, o seletor passou a ser o último elemento do
   cabeçalho, e qualquer folga aqui o desalinharia da margem direita da página. */
.nav-acoes{display:flex; align-items:center; gap:10px; margin-left:auto;}
.nav-idiomas{position:relative; flex:none;}
/* SEM CAIXA BRANCA E SEM MOLDURA — 31/08/2026, a pedido da dona: "os botões tipo do
   idioma/menu poderia ser png/transparente pra sempre combinar com o fundo da tela atual".
   É a mesma decisão que o menu de três barras já tinha tomado aqui em cima, agora pelo
   motivo novo: desde que as páginas passaram a ser tingidas pela cor da leitura, uma
   pílula branca com borda bege no cabeçalho é a única coisa da tela que não sabe em que
   página está. Transparente, ela é sempre a cor do fundo — e a cor do texto é a da leitura
   aberta (`--capa-botao`), com o latão de reserva nas telas que não têm capa.
   O alvo continua 38 px de altura: sumiu a moldura, não a área de toque. */
.nav-idioma-atual{
  display:inline-flex; align-items:center; gap:8px;
  height:38px; padding:0 10px; border-radius:999px;
  border:none; background:transparent; cursor:pointer;
  color:var(--capa-botao, var(--brass-dark)); font-size:var(--c-apoio); font-weight:600; line-height:1;
}
.nav-idioma-atual:hover{background:rgba(31,26,18,0.06);}
.nav-idioma-globo{width:18px; height:18px; flex:none; display:block;}
.nav-idioma-globo svg{width:100%; height:100%; display:block;}
/* A seta gira quando a lista abre — é ela que diz, sem palavra nenhuma, que o painel
   aberto embaixo saiu daqui. */
.nav-idioma-seta{width:13px; height:13px; flex:none; display:block; transition:transform var(--dur-base) var(--ease);}
.nav-idioma-seta svg{width:100%; height:100%; display:block;}
.nav-idiomas.aberta .nav-idioma-seta{transform:rotate(180deg);}
/* O nome não quebra em duas linhas nem espreme o cabeçalho: numa tela de 320 px o
   cabeçalho é o menu mais este botão, e "Português" cabe inteiro. */
.nav-idioma-nome{white-space:nowrap;}

.nav-idiomas-lista{
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  display:flex; flex-direction:column; align-items:stretch; gap:2px;
  min-width:180px; padding:6px; border-radius:14px; background:#fff;
  border:1px solid var(--border-soft); box-shadow:0 10px 30px rgba(30,26,20,0.16);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), visibility var(--dur-base);
}
.nav-idiomas.aberta .nav-idiomas-lista{opacity:1; visibility:visible; transform:translateY(0);}
/* A LINHA INTEIRA É O ALVO, e não só a bandeira. Um alvo de 34 px é o mínimo que uma
   diretriz de toque aceita; uma linha de 180 × 38 px é o que um polegar acerta sem mirar
   — e é onde o nome do idioma está, que é o que a pessoa está lendo quando decide. */
.nav-idioma-opcao{
  display:flex; align-items:center; gap:10px;
  padding:7px 10px; border-radius:9px;
  color:var(--ink-soft); font-size:var(--c-corpo); line-height:1.2;
}
.nav-idioma-opcao:hover{background:var(--brass-light); color:var(--brass-dark);}
.nav-bandeira{
  width:26px; height:19px; border-radius:3px; overflow:hidden; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border-soft);
}
/* `slice` no `preserveAspectRatio` de cada SVG faz a bandeira COBRIR a moldura em vez de
   caber dentro dela — sem isso sobrariam fatias vazias nas pontas. */
.nav-bandeira svg{width:100%; height:100%; display:block;}
/* O idioma em que já se está fica marcado: sem isso a lista mostra três iguais e não diz
   onde você está. Cor e peso, e não só uma borda: é o que se lê de relance. */
.nav-idioma-opcao.is-ativa{background:var(--brass-light); color:var(--brass-dark); font-weight:600;}
.nav-idioma-opcao.is-ativa .nav-bandeira{border-color:var(--brass);}

/* O VÉU ATRÁS DA GAVETA e o aperto do cabeçalho em tela estreita. Os dois vieram do
   `botao-do-whatsapp.css`, apagado em 31/08/2026 junto com o botão flutuante — nunca
   foram do botão, moravam ali só porque foram escritos no mesmo dia. Ficam no fim deste
   arquivo, que é onde estavam na cascata: o `botao-do-whatsapp.css` vinha logo depois
   deste, então esta é a mesma posição relativa a todo o resto. */
.nav-scrim{
  position:fixed; inset:0; z-index:190; background:rgba(20,16,25,0.42);
  opacity:0; pointer-events:none; transition:opacity var(--dur-base) var(--ease);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.nav-scrim.show{opacity:1; pointer-events:auto;}
@media (max-width:520px){
  /* Em tela estreita o cabeçalho tem menu + idioma, e os paddings de 32px do `.nav` não
     deixam os dois caberem com folga. */
  .nav{padding-left:16px; padding-right:16px; gap:7px;}
  .nav-acoes{gap:7px;}
}
/* ==========================================================================
   OS DOIS BOTÕES DE CANTO — 02/09/2026
   ==========================================================================
   Este arquivo é a volta do `botao-do-whatsapp.css`, apagado em 31/08 quando a dona mandou
   tirar o botão verde, e traz um segundo botão junto. Os dois pedidos vieram na mesma lista:
   "botão voltar flutuante?" e "sumiu o ícone de whatsapp?".

   ELES MORAM FORA DE TODAS AS `<div id="view-*">`, pelo mesmo motivo da gaveta de navegação:
   são da PÁGINA, e não de uma tela. Dentro de uma delas, sumiriam nas outras quinze — e
   reapareceriam duplicados no dia em que alguém copiasse o bloco.

   POR QUE VOLTAM NUM ARQUIVO SÓ, e não cada um no seu: eles dividem a reserva de espaço do
   rodapé (`--flutuante-*`) e não podem ocupar o mesmo canto. Duas folhas mandando na mesma
   faixa de 56 px é como uma delas cresce e cobre a outra sem ninguém entender por quê.

   O ARQUIVO ENTRA NA `design/ordem.txt` NA MESMA POSIÇÃO que o antigo tinha: logo depois do
   `cabecalho-gaveta-e-idioma.css`. O montador do visual RECUSA a montagem se a lista e a
   pasta discordarem, então quem apagar este arquivo tem de apagar a linha de lá também.
   ========================================================================== */
:root{--flutuante-tamanho:56px; --flutuante-margem:20px;}

/* A base dos dois: mesmo tamanho, mesmo raio, mesma elevação e a mesma resposta ao toque.
   O que muda entre eles é a cor, o canto e o ícone. */
.botao-flutuante{
  position:fixed; bottom:var(--flutuante-margem); z-index:120;
  width:var(--flutuante-tamanho); height:var(--flutuante-tamanho); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; padding:0;
  transition:transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease),
             opacity var(--dur-base) var(--ease), visibility var(--dur-base) var(--ease);
}
/* O realce de passagem fica dentro de `@media (hover:hover)` pela razão que o
   `vitrine-e-carrossel.css` explica por inteiro: num aparelho de toque o `:hover` gruda
   depois do toque, e `:hover` que MEXE no desenho faz o primeiro toque ser gasto aplicando
   o hover em vez de acionar o botão. Num botão de canto de 56 px isso é a diferença entre
   ele funcionar e ele parecer quebrado. */
@media (hover:hover) and (pointer:fine){
  .botao-flutuante:hover{transform:scale(1.06);}
}
.botao-flutuante:active{transform:scale(0.94);}
.botao-flutuante svg{width:30px; height:30px; display:block;}

/* ---------- O WHATSAPP, à direita ----------
   Verde do WhatsApp, e não a cor da leitura: este botão não é do site, é da marca que ele
   abre. Um botão de WhatsApp em violeta ou em latão não é reconhecido como o que é, e o
   reconhecimento é a única coisa que ele tem para oferecer num canto de tela. */
.zap-flutuante{
  right:var(--flutuante-margem);
  background:#25D366; box-shadow:0 6px 20px rgba(37,211,102,0.42);
}
@media (hover:hover) and (pointer:fine){
  .zap-flutuante:hover{box-shadow:0 10px 26px rgba(37,211,102,0.5);}
}
.zap-flutuante svg{fill:#fff;}

/* ---------- O VOLTAR, à esquerda ----------
   ELE NASCE ESCONDIDO e aparece depois de a pessoa rolar, e as duas metades disso importam:
   no alto da página o botão de voltar não serve para nada (a tela anterior está a um gesto
   do topo) e ainda cobre o começo do conteúdo; a 400 px de rolagem, numa página de produto
   que tem 6.500 px no celular, ele passa a ser a única forma visível de sair sem procurar o
   menu.
   O escondido é `visibility` MAIS `opacity`, e não `display:none`: com `display` a transição
   não acontece — o botão pisca na tela em vez de aparecer. Com `visibility` ele também sai
   da ordem de tabulação e da leitura de tela enquanto está escondido, que é o que
   `opacity:0` sozinho não faz.
   A COR É O LATÃO, SEMPRE, e não a cor da leitura — vale dizer por quê, porque a primeira
   tentativa foi `var(--capa-botao, var(--brass-dark))` e ela NÃO FUNCIONA: as variáveis de
   capa moram na classe do `#view-product`, e este botão é filho direto do `<body>`, irmão
   das telas. Herança em CSS desce, não atravessa — de fora da tela, `--capa-botao` não
   existe e só a reserva vale. Medido nas cinco páginas: `rgb(126, 90, 40)` em todas.
   E fica assim de propósito. Ele é peça da CASCA, como o cabeçalho e a gaveta: um botão de
   voltar que trocasse de cor a cada leitura deixaria de ser reconhecido como o mesmo botão
   justo quando a pessoa mais precisa achá-lo sem procurar. */
.voltar-flutuante{
  left:var(--flutuante-margem);
  background:var(--brass-dark);
  box-shadow:0 6px 20px rgba(126,90,40,0.34);
  opacity:0; visibility:hidden;
}
.voltar-flutuante.aparece{opacity:1; visibility:visible;}
@media (hover:hover) and (pointer:fine){
  .voltar-flutuante:hover{box-shadow:0 10px 26px rgba(126,90,40,0.42);}
}
.voltar-flutuante svg{fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}

@media (max-width:520px){
  :root{--flutuante-tamanho:52px; --flutuante-margem:16px;}
}

/* QUEM CHEGA AO FIM DA PÁGINA NÃO PODE TER O ÚLTIMO LINK TAPADO. A conta é a mesma que o
   arquivo antigo fazia, e o `!important` é pelo mesmo motivo: o `padding` do rodapé é
   escrito na forma curta (`padding:50px 0 32px`) no
   `metodo-testemunhos-faq-e-rodape.css`, que vem DEPOIS deste na cascata, e a forma curta
   apaga a longa. Os 32 px são o respiro que o rodapé sempre teve; o resto é o espaço que os
   botões ocupam. */
footer{padding-bottom:calc(32px + var(--flutuante-tamanho) + var(--flutuante-margem)) !important;}

/* Quem pediu para o aparelho parar de animar não recebe o aparecer nem o crescer — recebe o
   botão, que é o que ele veio fazer. */
@media (prefers-reduced-motion: reduce){
  .botao-flutuante{transition:none;}
}
/* ---------- PAINEL DE ADMINISTRAÇÃO ----------
   Esta tela é a única do app que NÃO é vitrine: ninguém vem aqui sentir nada, vem
   conferir se entrou dinheiro e se quem pagou recebeu. Por isso ela tem corpo de texto
   maior, o cinza dos rótulos escurecido e os números em `tabular-nums` — aqui um número
   lido errado é uma decisão errada sobre o negócio.

   (A família declarada aqui é a mesma Inter do resto do site desde 26/08/2026, quando a
   serifada saiu de tudo. A regra continua existindo pelo `tabular-nums` e pelo
   `letter-spacing:0`, que são o que esta tela precisa e o resto do site não.) */
#view-admin, #view-admin h1, #view-admin h2, #view-admin h3, #view-admin h4,
#view-admin b, #view-admin strong, #view-admin button, #view-admin table{
  font-family:var(--fonte-interface);
  font-variant-numeric:tabular-nums;   /* números alinham em coluna e comparam à vista */
  letter-spacing:0;
}
#view-admin h3{font-size:var(--t-bloco); font-weight:700; color:var(--ink); letter-spacing:-0.01em;}
.adm-wrap{max-width:680px; margin:0 auto; padding:8px 24px 60px;}
.adm-titulo{font-size:var(--t-secao); font-weight:700; color:var(--ink); margin:8px 0 4px; letter-spacing:-0.02em;}
.adm-sub{font-size:var(--c-corpo); color:var(--ink-soft); margin-bottom:22px; line-height:1.5;}
.adm-nota{font-size:var(--c-apoio); color:var(--ink-soft); line-height:1.6; margin:-6px 0 16px;}
.adm-numeros{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px;}
.adm-numero{background:var(--card-alt,#F5F0E4); border-radius:var(--radius-sm,8px); padding:14px 10px; text-align:center;}
.adm-numero b{display:block; font-size:26px; font-weight:700; color:var(--ink); line-height:1.15;}
.adm-numero span{display:block; font-size:12px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; margin-top:5px; line-height:1.3;}
.adm-numero em{display:block; font-style:normal; font-size:13.5px; font-weight:600; color:var(--brass-dark); margin-top:4px;}
.adm-gr{width:100%; height:auto; display:block; margin-bottom:6px;}
.adm-gr-legenda{display:flex; justify-content:space-between; font-size:var(--c-apoio); color:var(--ink-soft); margin-bottom:16px;}
.adm-lista{list-style:none; margin:0; padding:0;}
.adm-lista li{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; padding:11px 2px; border-bottom:1px solid var(--border-soft); font-size:var(--c-corpo); color:var(--ink); line-height:1.5;}
.adm-lista li:last-child{border-bottom:none;}
.adm-lista .adm-nome{flex:1 1 130px; min-width:0;}
.adm-lista li.adm-clicavel{cursor:pointer;}
.adm-lista li.adm-clicavel:hover{background:var(--card-alt,#F5F0E4); border-radius:6px;}
.adm-lista .adm-quando{margin-left:auto; font-size:var(--c-apoio); color:var(--ink-soft); white-space:nowrap;}
.adm-lista .adm-quem{display:block; font-size:var(--c-apoio); color:var(--muted,#8F8676); overflow-wrap:anywhere;}   /* e-mail comprido não empurra a largura da linha */
.adm-lista .adm-zap{margin-left:0;}   /* o `margin-left:auto` da .adm-acao jogaria o botão para longe do horário */
.adm-selo{font-size:var(--c-nota); font-weight:700; text-transform:uppercase; letter-spacing:0.03em; padding:3px 9px; border-radius:var(--radius-pill,999px); white-space:nowrap;}
/* Contraste subido para passar no AA (4.5:1) sobre os próprios fundos: um selo de
   alerta que não se lê não alerta ninguém. */
.adm-selo.ok{background:#E4EFE3; color:#2F5731;}
.adm-selo.andamento{background:var(--brass-light,#F1E4C8); color:#6A4A1E;}
.adm-selo.alerta{background:#F6DED6; color:#8A3319;}
.adm-vazio{font-size:var(--c-corpo); color:var(--ink-soft);}
.adm-acao{margin-left:auto; flex:none; font-size:var(--c-apoio); font-weight:700; color:var(--brass-dark); background:transparent; border:1px solid var(--brass-dark); border-radius:var(--radius-pill,999px); padding:5px 13px; cursor:pointer; white-space:nowrap;}
.adm-acao:hover{background:var(--brass-light,#F1E4C8);}
.adm-acao:disabled{opacity:.65; cursor:default;}
.adm-barra-prod{display:flex; align-items:center; gap:8px; padding:8px 0; font-size:var(--c-corpo); color:var(--ink);}
.adm-barra-prod i{flex:1; height:8px; border-radius:4px; background:var(--border-soft); overflow:hidden;}
.adm-barra-prod i b{display:block; height:100%; background:var(--brass,#AB7C3B);}
.adm-barra-prod span{font-size:var(--c-apoio); color:var(--ink-soft); white-space:nowrap;}
.adm-subtitulo{font-size:var(--c-apoio); font-weight:700; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft);}
/* A tabela de posições nasceu para a leitura do cliente, onde o cabeçalho miúdo é
   discrição. Aqui é dado operacional, e discrição vira dificuldade. */
#view-admin table.pos-table th{font-size:var(--c-apoio); color:var(--ink-soft); letter-spacing:0.04em;}
#view-admin table.pos-table td{font-size:var(--c-corpo);}
#view-admin .pos-table-card{padding:22px;}

/* ---------- CONFIRMAÇÃO DE COMPRA ---------- */
.compra-ok-scrim{
  position:fixed; inset:0; z-index:210; background:rgba(20,16,25,0.52);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; pointer-events:none; transition:opacity var(--dur-base) var(--ease);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.compra-ok-scrim.show{opacity:1; pointer-events:auto;}
.compra-ok-card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:0 24px 60px rgba(20,16,25,0.28); padding:32px 26px 26px;
  width:min(420px, 100%); text-align:center;
  transform:translateY(10px) scale(0.98); transition:transform var(--dur-base) var(--ease);
}
.compra-ok-scrim.show .compra-ok-card{transform:none;}
.compra-ok-selo{
  width:52px; height:52px; margin:0 auto 16px; border-radius:50%;
  background:var(--brass-light,#F1E4C8); color:var(--brass-dark,#7E5A28);
  display:flex; align-items:center; justify-content:center; font-size:22px;
}
.compra-ok-card h2{font-family:var(--fonte-titulo); font-size:var(--t-bloco); font-weight:600; color:var(--ink); margin:0 0 14px;}
/* Mesma regra do fecho da Aba da Lua: cada frase equilibra as próprias linhas, para
   não sobrar palavra sozinha na última — é um texto curto e centralizado, onde a órfã
   salta aos olhos. */
.compra-ok-linha{font-size:var(--c-corpo); line-height:1.6; color:var(--ink-soft); margin:0 0 12px; text-wrap:balance;}
.compra-ok-nota{font-size:var(--c-apoio); line-height:1.55; color:var(--muted); margin:0 0 12px; text-wrap:balance;}
.compra-ok-card .btn-primary, .compra-ok-card .btn-outline{width:100%; margin-top:10px;}

.nav-drawer{
  position:fixed; top:0; left:0; bottom:0; z-index:200;
  width:min(330px, 86vw); background:var(--card); border-right:1px solid var(--border);
  /* A SOMBRA SÓ EXISTE COM A GAVETA ABERTA — 01/09/2026, e o que a achou foi contar pixel.
     Ela era permanente. Fechada, a gaveta fica em `translateX(-100%)`, mas a SOMBRA não vai
     junto: com 14 px de deslocamento para a direita e 44 px de borrão, uma faixa dela
     sobrava dentro da tela e pintava os trinta primeiros pixels da ESQUERDA de toda página,
     o tempo inteiro. Sobre o pergaminho creme ninguém via. Sobre a seção branca do
     resultado ela apareceu na hora: 224 de cinza contra 255 de branco, medido no PNG.
     Além do desenho, é um borrão de 44 px que o navegador compunha sem parar, e não é de
     graça num celular. */
  transform:translateX(-100%); transition:transform var(--dur-base) var(--ease);
  display:flex; flex-direction:column; overscroll-behavior:contain;
}
.nav-drawer.show{transform:translateX(0); box-shadow:14px 0 44px rgba(20,16,25,0.18);}
.nav-drawer-head{
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; border-bottom:1px solid var(--border-soft);
}
.nav-drawer-title{font-family:var(--fonte-titulo); font-size:var(--c-lede); color:var(--ink);}
.nav-drawer-close{
  width:34px; height:34px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:#fff; color:var(--ink-soft); font-size:17px; line-height:1; display:flex; align-items:center; justify-content:center;
}
.nav-drawer-close:hover{border-color:var(--brass); color:var(--brass-dark);}
.nav-drawer-body{flex:1; overflow-y:auto; padding:10px 10px 28px;}
.nav-drawer-body::-webkit-scrollbar{width:6px;}
.nav-drawer-body::-webkit-scrollbar-thumb{background:var(--border); border-radius:6px;}
.nav-group{
  font-size:var(--c-etiqueta); text-transform:uppercase; letter-spacing:0.11em; color:var(--brass-dark);
  font-weight:700; padding:16px 12px 6px;
}
.nav-drawer-body > .nav-group:first-child{padding-top:6px;}
/* O RÓTULO DE PRODUTO — 31/08/2026. A plataforma virou três produtos, e o menu
   passou a mostrar isso: o `.nav-produto` nomeia o produto, e os `.nav-group` que
   vêm abaixo dele são as seções DENTRO daquele produto.

   Ele pesa mais que o `.nav-group` de propósito — corpo maior, cor da tinta cheia
   e um filete acima — porque a hierarquia tem de se ver antes de se ler. Dois
   rótulos do mesmo tamanho fariam "Horóscopo Lunar" e "Previsões" parecerem o
   mesmo tipo de coisa, que é exatamente o que a separação veio desfazer. */
/* A SERIFA SAIU DAQUI — 02/09/2026, a pedido da dona: "veja, Mapas e Análises está
   escrito em fonte diferente no menu".
   Ela está certa e a regra já existia: a Fraunces é dos TÍTULOS, e um rótulo de menu não é
   título — é etiqueta, o mesmo papel do `.nav-group` logo abaixo dele. Foi a mesma varredura
   de 31/08 que devolveu 69 outros lugares à fonte de interface; este ficou para trás, e por
   isso "Mapas e Análises" saía em serifa no meio de uma lista inteira em sans.
   A HIERARQUIA NÃO SE PERDE, ela muda de instrumento: o rótulo de produto continua maior
   que o `.nav-group`, em tinta cheia contra o latão dele, com o filete acima e peso 600.
   Era isso que o comentário de 31/08 pedia — "a hierarquia tem de se ver antes de se ler" —
   e nada disso dependia da família da letra. */
.nav-produto{
  font-family:var(--fonte-interface); font-size:var(--c-corpo); font-weight:600; color:var(--ink);
  letter-spacing:-0.005em;
  padding:20px 12px 2px; margin-top:10px; border-top:1px solid var(--border);
}
/* O primeiro rótulo de produto não leva filete nem respiro acima — não há nada acima
   dele para separar. O segundo seletor desce um nível desde 01/09/2026: cada grupo do
   `#navSoNoApp` passou a morar numa <div> própria, para o recorte do build conseguir
   tirar o grupo INTEIRO e não só o rótulo. Sem esta descida, o primeiro rótulo de
   `/lunar/` e de `/horoscopo/` voltaria a nascer com filete solto no topo da gaveta. */
.nav-drawer-body > .nav-produto:first-child,
#navSoNoApp > :first-child > .nav-produto:first-child{margin-top:0; border-top:0; padding-top:8px;}
.nav-produto + .nav-group{padding-top:8px;}
.nav-drawer a{
  display:block; font-size:var(--c-corpo); font-weight:500; color:var(--ink-soft); line-height:1.35;
  padding:10px 12px; border-radius:var(--radius-sm);
}
.nav-drawer a:hover{background:var(--brass-light); color:var(--brass-dark);}
.nav-drawer a.is-current{background:var(--brass-light); color:var(--brass-dark); font-weight:600;}
/* "Início" pesa mais que os outros itens para ser achado sem que ninguém precise ler a
   lista inteira — e menos que o "Fazer login" logo abaixo, que continua sendo a ação que
   destrava o resto do menu. Peso e cor, sem caixa: é a mesma decisão do botão do menu. */
.nav-drawer a.nav-inicio{font-weight:700; color:var(--brass-dark);}
/* "Fazer login", logo depois do Início: é a primeira AÇÃO para quem chega sem sessão,
   porque é o passo que destrava todo o resto do menu. Some assim que há sessão. */
.nav-drawer a.nav-login{
  text-align:center; font-weight:700; color:var(--brass-dark);
  background:var(--brass-light); border:1px solid rgba(171,124,59,0.38);
  padding:12px; margin:2px 2px 4px;
}
.nav-drawer a.nav-login:hover{background:var(--brass); color:#fff; border-color:var(--brass);}
.nav-sep{height:1px; background:var(--border-soft); margin:8px 12px;}
@media (max-width:640px){
  /* A linha da `.nav-links-desktop` saiu em 01/09/2026: ela escondia no celular o botão
     que hoje não existe em tela nenhuma (ver `cabecalho-gaveta-e-idioma.css`). */
  header .logo-placeholder{display:none;}
}

/* ---------- HERO ---------- */
.hero{padding:76px 0 110px; background:var(--bg); position:relative;}
/* O PULO DA ÂNCORA `#top` PRECISA DESVIAR DO CABEÇALHO GRUDADO.
   O `header` é `position:sticky` e mede 82 px em toda largura (medido em 31/08 a
   1280, 900, 700 e 390). O respiro do topo do hero é 76 px no desktop e 56 px no
   celular — ou seja, MENOS que o cabeçalho: quem clica num link para `#top` cai numa
   posição em que a primeira coisa do hero fica por baixo dele. Isso já era assim
   antes, com a linha "Astrologia" perdendo 6 px sob um cabeçalho translúcido, e
   ninguém via. Com a roda ali, o corte vira uma reta de ~87 px no alto de um círculo,
   que se enxerga de longe. Os 90 px são os 82 do cabeçalho mais 8 de ar.
   SE O CABEÇALHO MUDAR DE ALTURA, este número muda junto — ele não é calculado. */
#top{scroll-margin-top:90px;}
/* O TEXTO DO HERO ENCOSTOU NA MARGEM DO MENU — 31/08/2026, a pedido: o título centrado
   "não fica na margem do menu". Ele agora nasce onde o traço de cima do menu-sanduíche
   nasce, e a conta é do próprio `.wrap`: o respiro dele é 24 px no celular, e o botão do
   menu põe o desenho a 16 px de padding mais 9 de centragem dentro dos 38 px do botão —
   25 px. Um pixel de diferença que ninguém enxerga, e que nenhum número escrito à mão
   manteria alinhado quando um dos dois respiros mudasse.
   A RODA CONTINUA CENTRADA de propósito: ela é emblema, não texto. Duas coisas coladas à
   esquerda dariam uma coluna, e o que a tela quer é a peça no alto e a fala embaixo.
   O BLOCO SEGUE CENTRADO NO COMPUTADOR — o que mudou é o alinhamento DENTRO dele. Numa
   tela larga a coluna de 640 fica no meio dos 1080, então encostar o texto na margem da
   página o deixaria a meio metro do que ele descreve. */
.hero-content{max-width:640px; margin:0 auto; text-align:left; animation:fadeInUp var(--dur-slow) var(--ease-soft) both;}
/* O DIÂMETRO DA RODA MORA NUMA VARIÁVEL, e não em três números soltos: o halo do
   `::before` é derivado dele. Antes eram 400/470 no desktop e 300/350 no celular, e
   quem mexesse num esquecia o outro — o halo descolava da imagem sem ninguém ver. */
.hero-emblem{
  --roda:min(100vw, 560px);
  display:flex; justify-content:center; margin-bottom:34px; position:relative;
}
.hero-emblem::before{
  content:""; position:absolute; border-radius:50%;
  /* 1,175 × a roda era a proporção dos números antigos (470/400, 350/300). O `min`
     com 100% impede que o halo passe da largura da faixa quando a roda ocupa a tela
     inteira — halo maior que a tela é barra de rolagem horizontal no celular. */
  width:min(calc(var(--roda) * 1.175), 100%); height:min(calc(var(--roda) * 1.175), 100%);
  background:radial-gradient(circle, var(--brass-glow) 0%, rgba(171,124,59,0) 68%);
  animation:softPulse 5s ease-in-out infinite; pointer-events:none;
}
/* SEM MOLDURA — 31/08/2026, a pedido: "não quero moldura ao redor das imagens".
   Saíram os dois anéis do `box-shadow` — o fio de latão (`0 0 0 1px`) e a orla branca
   de 7 px (`0 0 0 7px`). Fica só a sombra de queda, que não é moldura: é a peça
   pousando no papel. A roda já traz o próprio pergaminho, e o disco dela contra o creme
   do app basta para separar as duas coisas. */
/* O TAMANHO JÁ SUBIU DUAS VEZES no mesmo dia: 320 → 400 de manhã, 400 → 560 (e a tela
   inteira no celular) à tarde. Ficam os dois números porque a razão é a mesma — ela é o
   emblema do site — e porque o segundo pulo mostra o que o primeiro não resolveu.
   ISTO OBRIGA O ARQUIVO MAIOR: a 560 px numa tela de densidade 2 o navegador quer
   1120 px de imagem, e a 100vw num celular de densidade 3, ~1170. O maior que existe é
   o `roda-pergaminho-960` — gerado da mesma prancha de 5000 px e com O MESMO
   ENQUADRAMENTO dos outros dois (fator 0,91, achado por busca e conferido: regerar o 640
   daquela fonte dá a mesma diferença que o 960, ou seja, o que sobra é compressão e não
   corte). Ele passa a ser o escolhido em quase toda tela; os 320 e 640 seguem servindo
   as de densidade 1. Enquadramento diferente entre tamanhos seria pior que borrão — a
   roda mudaria de composição conforme a tela de quem abre.
   O `sizes` do `<img>`, o do `<source>` e o `imagesizes` do `preload` no `<head>` são os
   MESMOS três valores, e mudar um sem os outros faz o preload baixar um arquivo que
   ninguém usa. */
/* A ORLA BRANCA NÃO ERA CSS — 31/08/2026, a pedido: "sem essa borda branca em volta".
   Quando os anéis do `box-shadow` saíram, sobrou um fio branco que ninguém tinha posto:
   ele vem DE DENTRO DA IMAGEM. A prancha é um disco sobre fundo branco e o disco não
   encosta na moldura — medido nos seis arquivos, a margem branca chega a 9 px no 960
   (0,94% da largura), e ainda por cima é torta: 9 px à esquerda e 0 à direita. Recortar
   com `border-radius` na própria imagem não resolve, porque o círculo do recorte tem o
   tamanho do QUADRADO, e é a coroa branca entre o disco e o quadrado que aparece.
   A saída é o `<picture>` virar a máscara redonda e a imagem crescer 3% dentro dela:
   1,5% comido de cada lado cobre os 0,94% do pior arquivo com folga para a borda
   esmaecida da aquarela. O zoom não muda a composição — é coroa branca, não desenho.
   MEXER NA PRANCHA É REFAZER ESTA CONTA: outra arte, outra margem. */
.hero-emblem picture{
  display:block; position:relative;
  width:var(--roda); height:var(--roda);
  border-radius:50%; overflow:hidden;
  box-shadow:0 22px 50px rgba(30,22,12,0.26);
}
.hero-emblem-img{
  display:block; width:100%; height:100%; object-fit:cover;
  transform:scale(1.03);
}
/* O TÍTULO É EQUILIBRADO PELO NAVEGADOR — 31/08/2026, a pedido: "jornada" caía sozinha
   na última linha, e uma palavra só embaixo de quatro linhas cheias faz o bloco parecer
   torto mesmo estando centrado. O `text-wrap:balance` reparte as linhas para que todas
   tenham largura parecida, em vez de encher cada uma até o limite e deixar o resto para
   a última. Quem não conhece a propriedade ignora a linha e volta ao rag de antes — não
   quebra nada, só não melhora. */
/* A FRASE DIMINUIU — 31/08/2026, a pedido: "diminui a frase pra ficar mais harmônico".
   Eram 30 px no celular e 46 no computador; agora 26 e 40. No celular isso tira uma linha
   inteira do título, e é a linha a menos que dá o respiro — não o tamanho em si.
   O `text-wrap:balance` fica: alinhado à esquerda ele não iguala margem nenhuma, mas
   continua impedindo a última linha de sobrar com uma palavra só, que era o outro pedido
   do mesmo dia. */
.hero h1{font-size:clamp(26px,3.3vw,40px); line-height:1.24; letter-spacing:-0.018em; text-wrap:balance;}
/* As palavras em destaque do título saíram do latão para o vermelho-terra em 31/08/2026,
   junto com o botão. Medido sobre o creme: 6,22:1, contra os 5,61:1 do latão. */
.hero h1 em{font-style:italic; color:var(--rust);}
.hero p.lede{margin:20px 0 0; font-size:var(--c-lede); color:var(--ink-soft); max-width:460px; line-height:1.65;}
.hero .btn-primary{margin-top:28px;}
@media (max-width:700px){
  .hero{padding:56px 0 84px;}
  /* A RODA VOLTOU PARA DENTRO DA MARGEM — 31/08/2026, no fim do mesmo dia em que saiu
     dela. De manhã ela ocupava a tela inteira (`--roda:100vw` mais margens negativas que
     desfaziam o respiro do `.wrap`), e no celular isso não lê como emblema grande: lê
     como imagem CORTADA. O disco encostava exatamente nas duas beiradas, e o olho de
     quem abre não vê um círculo que cabe — vê um círculo que passou.
     O `100%` faz a conta sozinho, e é por isso que ele está aqui no lugar de um número:
     a roda passa a medir a faixa do `.wrap` já sem o respiro dela, seja qual for o
     respiro. Em 390 px dá 342 — uns 12% menor, o bastante para as beiradas aparecerem.
     O TETO DE 560 px É O MESMO DO DESKTOP, e existe para a tela de 700 não desenhar uma
     roda MAIOR que a do computador: sem ele, a faixa de 652 px de um tablet estreito
     passaria dos 560 do desktop, e o emblema encolheria ao virar a tela. */
  .hero-emblem{--roda:min(100%, 560px);}
}

/* ==========================================================================
   DO TABLET PARA CIMA A CAPA É DE DUAS COLUNAS — 03/09/2026
   ==========================================================================
   Pedido da dona, com cinco prints de um tablet: "abri o site de astrologia no tablet, e
   está muito amador. No mobile está bem mais ajustado, no tablet (e acredito que no
   computador também) está uma porcaria".

   TRÊS DOS CINCO PRINTS SÃO O MESMO DEFEITO, e é este: a roda sozinha ocupando a tela
   inteira, e o título só na tela SEGUINTE. Medido antes de mexer, num tablet de 834 px: a
   capa tinha 1021 px de altura — mais que a janela — e a roda comia 594 deles (560 de disco
   mais 34 de margem). Quem abre o site num tablet vê um círculo grande e nada mais: a frase
   que diz o que o site faz e o botão que o começa nascem abaixo da dobra.

   NO CELULAR A MESMA PILHA FUNCIONA, e é por isso que ela nunca pareceu errada: lá a roda
   mede 342 px e sobram 400 de tela para a frase e o botão. A pilha não é o defeito — o
   defeito é a pilha continuar sendo a única forma de página quando a tela dobra de largura.
   É a diferença que a dona resumiu em duas palavras ("no mobile está bem mais ajustado").

   A CONTA DO LIMITE, e ela é de conteúdo e não de aparelho: a coluna do texto precisa de
   uns 340 px para o título não virar uma palavra por linha. Com a roda em 40% da faixa e o
   vão entre as duas, isso pede uns 760 px de janela — que é onde este bloco começa. Abaixo
   dele nada muda: o celular e o tablet estreito continuam com a pilha aprovada.

   A RODA CONTINUA SENDO O EMBLEMA, só deixa de ser a página inteira: 460 px de teto contra
   os 560 de antes, e ela agora divide a altura com o texto em vez de empurrá-lo para baixo.

   AS CINCO LINHAS DA GRADE SÃO O QUE CENTRA O TEXTO ao lado do disco, e as duas pontas em
   `1fr` são a razão de haver cinco para três elementos: a roda atravessa as cinco, e a
   sobra de altura dela vai para as linhas flexíveis das pontas em vez de ser repartida
   entre o título, a frase e o botão. Sem elas o texto sai esparramado — três blocos
   afastados um do outro, cada um centrado na sua própria fatia.

   O `:not(.de-sempre)` NÃO É ZELO: esta mesma capa é CLONADA no pé de quatro telas como a
   promessa do fecho (ver `app/nucleo/as-secoes-de-sempre.js`), e lá ela mora numa coluna
   estreita de página de venda, com a roda em 360 px e o `.wrap` zerado. Duas colunas dentro
   daquela coluna seriam duas tiras de nada. É a mesma ressalva que a `tela-de-produto.css`
   já faz nas regras da capa dela. */
@media (min-width:760px){
  .hero:not(.de-sempre) .hero-content{
    max-width:1080px;
    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);
  }
  .hero:not(.de-sempre) .hero-emblem{
    grid-column:1; grid-row:1 / span 5;
    align-self:center; justify-self:center;
    margin-bottom:0;
    --roda:min(100%, 460px);
  }
  .hero:not(.de-sempre) h1{grid-column:2; grid-row:2;}
  .hero:not(.de-sempre) p.lede{grid-column:2; grid-row:3; max-width:520px;}
  .hero:not(.de-sempre) .btn-primary{grid-column:2; grid-row:4; justify-self:start;}
}

/* ---------- FORM ---------- */
/* O RESPIRO DE CIMA É A FAIXA DE ARTE — 31/08/2026. Eram 96 px, e o resto da altura vinha
   do título e dos 48 px de margem dele. Com o título dentro do cartão, manter os 96 px
   deixaria o cartão quase encostado no cabeçalho e a roda apareceria numa tira de 20 px:
   a arte que a faixa inteira existe para mostrar viraria uma sobra.
   Os 176 px repõem o que o título ocupava (31 de altura mais 48 de margem) e mantêm o
   cartão onde ele sempre esteve. NO CELULAR ELE VALE DOBRADO, porque o cabeçalho grudado
   come os primeiros 82 px da faixa — sem esta conta, o que sobra de arte é o que passa por
   baixo dele. */
/* O RESPIRO DA ARTE TAMBÉM RESPONDE À ALTURA — 03/09/2026, o mesmo conserto que a faixa
   da Metodologia e das perguntas recebeu hoje, pela mesma fotografia: num tablet deitado
   de 640 px de altura, 176 px de arte mais os 74 da barra grudada empurravam o cartão do
   formulário para 250 px do topo, e ele tem 614 — a pessoa não via o botão sem rolar.
   `min(176px, 22vh)` devolve 141 px nessa tela e mantém os 176 em qualquer janela de 800
   ou mais, que é onde o número foi medido em 31/08. O celular fica onde estava: num
   390x780 os 22vh dão 172, quatro píxeis de diferença que ninguém enxerga. */
.gerar-section{--respiro-da-arte:min(176px, 22vh); padding:var(--respiro-da-arte) 0 88px; border-top:1px solid var(--border); position:relative; overflow:hidden; background:var(--bg);}
/* ---------- A ARTE PASSA POR BAIXO DA BARRA FIXA — 01/09/2026 ----------
   Escolha da dona entre dois exemplos que ela pediu para ver ("a aba fixa poderia ser desta
   cor ou a continuação da imagem de fundo pra ficar mais harmônico"). Ganhou a continuação:
   a aquarela sobe até a borda da tela e a barra vira vidro fosco por cima dela, em vez de uma
   faixa creme cortando a arte na horizontal.

   COMO, E POR QUE ASSIM: a barra é `sticky`, então ela OCUPA lugar no fluxo — a faixa da arte
   começava logo abaixo dela. Puxar a faixa para cima pela altura da barra e devolver a mesma
   altura no respiro de dentro faz a arte começar no alto da tela sem mover um pixel do cartão
   branco. O filete de cima sai junto: ele separava a faixa do que vinha antes, e agora não
   vem nada antes.

   A ALTURA VEM DE UM LUGAR SÓ (`--altura-da-barra`, no `cabecalho-gaveta-e-idioma.css`,
   colada na regra que a produz). Escrever `-74px` aqui seria a mesma medida em dois arquivos
   — e a segunda é a que ninguém atualiza.

   O VIDRO É MAIS TRANSPARENTE AQUI (0,52 contra os 0,85 das outras telas) porque aqui ele tem
   arte por baixo para deixar passar. Nas outras não há nada atrás da barra além do fundo
   liso, e mais transparência ali só deixaria o texto da página atravessar o vidro sem ganho
   nenhum.
   O NÚMERO SAIU DAQUI EM 03/09/2026 e virou o `--vidro-sobre-arte`, no
   `cabecalho-gaveta-e-idioma.css`: a Astrologia eletiva ganhou arte no topo no mesmo
   desenho, e a mesma opacidade escrita em dois arquivos é a que envelhece pela metade. */
#view-catalog header{background:var(--vidro-sobre-arte); border-bottom:0;}
#view-catalog .gerar-section{
  margin-top:calc(-1 * var(--altura-da-barra));
  padding-top:calc(var(--respiro-da-arte) + var(--altura-da-barra));
  border-top:0;
}
/* o <picture> só existe para oferecer WebP com fallback JPEG — ele não deve
   criar caixa nenhuma no layout (a imagem em si é posicionada em absoluto). */
.gerar-section > picture{display:contents;}
/* A ARTE DO FUNDO É A MESMA RODA DO EMBLEMA — 31/08/2026, a pedido. Era o
   `zodiaco-900`, a gravura marrom; passou a ser a `roda-pergaminho-960`, a aquarela que
   já abre a página no `.hero-emblem`. Duas rodas diferentes na mesma tela é o tipo de
   coisa que ninguém sabe nomear e todo mundo sente: a página parecia ter dois autores.
   ISTO ESVAZIA O `zodiaco-*` DE VEZ — ele deixa de ser citado por qualquer página. O
   `netlify-build.sh` continua publicando os seis arquivos de propósito, e o comentário
   dele explica por quê: cartão de link já mandado por aí ainda busca aquele endereço. */
/* ==========================================================================
   O ENQUADRAMENTO DA RODA É UM SÓ, EM TODA LARGURA — 03/09/2026
   ==========================================================================
   Aqui estava `width:min(1500px, 175vw); top:-8%`, e essa dupla é a outra metade do "no
   tablet está uma porcaria" que a dona fotografou. Ela não erra por gosto: erra por
   ARITMÉTICA, e nas duas pontas ao mesmo tempo.

   O `min` faz o disco parar de crescer aos 1500 px, e a partir daí o mesmo desenho muda de
   enquadramento a cada tela:

     · num tablet de 834 px, `175vw` são 1459 — ou seja, o teto ainda não pegou, e o disco
       tem 1,75 tela de largura. Só o miolo dele aparece: uma perna do Aquário, um rabo de
       peixe e um chifre de touro, cada um do tamanho do formulário. É o print dela;
     · num monitor de 1280, o teto pegou: 1500 px são 1,17 tela, e a roda aparece quase
       inteira — que é o único lugar em que este desenho estava certo;
     · num monitor de 1920, os mesmos 1500 px são 0,78 TELA. O disco fica mais estreito que
       a janela, e voltam os cantos creme que o comentário de baixo descreve como o defeito
       que a conta do celular veio resolver.

   O CONSERTO É DERIVAR O EMPURRÃO DO DIÂMETRO, em vez de escrever os dois à mão. A conta
   está demonstrada logo abaixo, na regra do celular, e o que ela diz é: para um disco de
   diâmetro D cobrir a largura L de uma tela na altura do TOPO da faixa, o centro dele
   precisa subir `R − √(R² − (L/2)²)`. Com D = 1,30 L isso dá 0,18 D, e os 0,2 D deste
   arquivo são esse mínimo com folga — é a mesma coisa que os `-26vw` do celular diziam
   (0,2 × 130vw = 26vw), agora escrita de um jeito que continua verdadeira quando D deixa
   de ser 130vw.

   E ELE DEIXA DE SER 130vw NUMA TELA MUITO LARGA, DE PROPÓSITO: o `min` com 1500 px fica.
   Ele não é um erro — é o que impede a arte de virar uma perna de meio metro num monitor
   grande, porque a prancha tem 960 px de origem e 130vw de 1920 seriam 2496 px de imagem
   esticada. Acima de 1153 px de janela o disco para de crescer e a roda passa a se ler como
   uma PEÇA REDONDA pousada atrás do cartão, com o pergaminho da página aparecendo nos
   cantos. Medido nas duas leituras: até 1153 px o disco sangra e a roda envolve o cartão;
   daí para cima ela é um prato. As duas são desenho; o que não era desenho é o tablet.

   A FRONTEIRA DEIXA DE SER UM SALTO, e é isto que a versão antiga não tinha: com o empurrão
   derivado do diâmetro, os dois lados dos 1153 px desenham o mesmo enquadramento — o disco
   cresce com a tela até o teto e depois fica, sem que o corte mude de forma no caminho.
   Antes eram `175vw` de um lado e `1500px` do outro com um `top` em `%`, e a fronteira caía
   em 857 px: exatamente no meio dos tablets.

   A MÁSCARA CONTINUA A MESMA, e continua certa, porque ela é proporcional À IMAGEM: os 70%
   em que a arte se dissolve são 70% da altura dela. Medido depois da troca, a 1280 px: a
   arte acaba aos 749 px de faixa, dentro dos 951 que a faixa tem — ou seja, ela se dissolve
   na tela, e não é cortada pela borda da seção. */
.gerar-section .celestial-bg-photo{
  --disco:min(130vw, 1500px);
  position:absolute; top:calc(-0.2 * var(--disco)); left:50%; transform:translateX(-50%);
  width:var(--disco); max-width:none; height:auto; z-index:0; pointer-events:none;
  opacity:0.55; mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 34%, rgba(0,0,0,0.35) 54%, rgba(0,0,0,0) 70%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 34%, rgba(0,0,0,0.35) 54%, rgba(0,0,0,0) 70%);
}
/* NO CELULAR A ARTE TEM ENQUADRAMENTO PRÓPRIO — e os dois números são UM SÓ desenho.
   Os 175vw do computador foram medidos para a GRAVURA: ela é trama densa de linhas, e
   ampliada a ponto de só um pedaço aparecer continua lendo como textura de pergaminho. A
   aquarela é FIGURA — no mesmo zoom o que sobra numa tela de 390 px é um pedaço de perna
   e uma pata de leão atrás do formulário, e não se reconhece roda nenhuma.
   MAS 100vw COM `top:0` ERA PIOR: a prancha é um DISCO, e um disco da largura exata da
   tela deixa os dois cantos de cima em creme puro. Quem olha não vê "roda que cabe" —
   vê uma borda bege em volta, que foi exatamente o que apareceu na primeira tentativa.
   A conta que resolve os dois: para o disco cobrir a largura inteira NA ALTURA DO TOPO da
   faixa, o centro dele precisa subir até `(largura/2)·√(k²−1)`, onde k é o diâmetro em
   telas. Com k = 1,30 isso dá um topo de −23,5vw; os −26vw são esse limite com folga.
   POR ISSO OS DOIS NÚMEROS ESTÃO EM `vw`, E NÃO UM EM `vw` E OUTRO EM `%`: assim a razão
   entre eles não muda com a largura da tela, e o corte é o MESMO num celular de 360 e num
   de 430. O `top` em `%` seria porcentagem da ALTURA da faixa — que muda com o texto
   dentro dela, e traria os cantos bege de volta sozinha, um dia, sem ninguém mexer aqui.
   MEXER EM UM PEDE REFAZER A CONTA DO OUTRO. Diminuir o k sem descer o topo é reabrir os
   cantos; aumentar o k sem subir o topo é voltar às pernas soltas.
   DESDE 03/09/2026 ESTA CONTA VALE EM TODA TELA, e não só no celular — o porquê está no
   bloco acima. O que sobrou aqui é a única coisa que continua sendo só do celular: a
   opacidade. */
@media (max-width:700px){
  /* A ARTE APARECE MAIS — 0,5 era o resto de quando um véu creme lavava o alto da faixa
     para dar contraste ao texto que ficava aqui. Sem texto e sem véu, a opacidade responde
     só ao desenho: 0,68 é onde a aquarela ganha corpo sem virar mancha atrás do cartão.
     ELA CONTINUA SENDO DOIS NÚMEROS depois de o enquadramento passar a ser um só, e não é
     esquecimento: numa tela pequena a arte é quase toda a página e pode pesar; numa grande
     ela é moldura de um cartão que ocupa um terço da largura, e no mesmo peso ela disputa
     a atenção com o formulário que a página inteira existe para alguém preencher. */
  .gerar-section .celestial-bg-photo{opacity:0.68;}
}
/* ---------- A ARTE CONTINUA EM VOLTA DO CARTÃO — 01/09/2026 ----------
   Pedido da dona, em duas partes. Primeiro: "acima de 'interpretações disponíveis' poderia
   ser a continuação do fundo da aba inicial" — entre o fim do cartão branco e o começo do
   catálogo havia uma tira de creme liso, e a página parecia trocar de fundo no meio do
   caminho. Depois, vendo a primeira versão: "a arte embaixo deve ter mesmo efeito do topo,
   meio transparente, tipo uma continuação ao redor do card de preencher dados".

   É A MESMA RODA, MOSTRADA PELO OUTRO LADO. A camada de cima corta o disco pelo alto
   (vê-se o arco superior); esta corta pelo baixo (`background-position:center bottom`), e
   por isso as figuras chegam em pé, como as de lá. Uma cópia espelhada resolveria o
   enquadramento e deixaria os doze signos de cabeça para baixo.

   NENHUM ARQUIVO NOVO: é a `roda-pergaminho-960`, a mesma que o alto da página e o emblema
   já usam. O `image-set` oferece o WebP e deixa o JPEG de reserva — a linha `url()` acima
   dele é o que os navegadores sem `image-set` leem.

   O DISCO É EMPURRADO PARA FORA DA TELA, e esta é a conta que faltava — 01/09/2026, a
   segunda queixa dela: "faça o mesmo ajuste que fez no topo, no final, para não aparecer o
   redondo; harmonize expandindo + degradê".

   Ela tinha razão sobre o topo: lá o disco é ampliado (130vw) E puxado para cima (−26vw),
   e é o empurrão que faz a BORDA REDONDA sair de cena. Aqui ele estava apoiado na borda de
   baixo (`center bottom`), então o arco do disco entrava na tela e sobrava creme nos cantos.
   Agora ele desce os mesmos 26vw, espelhado.

   A CONTA, escrita porque mexer num número sem ela reabre o arco: um disco de diâmetro k
   telas cobre a largura inteira enquanto a faixa vista fica entre `R − √(R² − (L/2)²)` e
   `R + √(R² − (L/2)²)` contados da base do disco, com R = k·L/2. Com k = 1,30 no celular
   isso dá uma janela de 324 px numa tela de 390 — por isso o empurrão é 26vw (dentro da
   janela) e a altura da faixa caiu de 360 para 300 px (para caber nela). Mexer num pede
   refazer o outro.

   E O ENQUADRAMENTO PASSOU A SER UM SÓ EM TODA TELA — 03/09/2026, junto com o da camada de
   cima e pela mesma razão, que está escrita lá em cima com as medidas: `min(2600px, 175vw)`
   dava 1,75 tela de disco num tablet de 834 px, e nesse zoom o que aparece atrás do cartão
   não é uma roda — é um pedaço de figura. Aqui também o diâmetro passa a ser `130vw` e o
   empurrão passa a SAIR dele (0,2 do diâmetro), que é o mesmo número que os 26vw do celular
   diziam, escrito de um jeito que sobrevive ao teto.
   O TETO DAQUI CONTINUA MAIOR QUE O DE CIMA — 2600 px contra 1500 —, e é de propósito: esta
   camada vive a 42% de opacidade, num filete de 420 px, atrás do cartão branco, e o que ela
   precisa é COBRIR a largura sem mostrar o arco. A de cima é a arte que se vê, e é ela que
   paga o preço da ampliação. Na prática o teto daqui só pega acima de 2000 px de janela.
   O que era o limite de 2600 px continua valendo como aviso: um disco mais estreito que a
   tela reabre o arco, e nenhum empurrão resolve isso.

   A MÁSCARA DISSOLVE NAS DUAS PONTAS, e é a outra metade do "mesmo efeito do topo". A primeira versão tinha o arco em cheio na borda de baixo, encostado numa faixa
   que existia ali; sem a faixa, aquilo virava um corte reto no meio do papel. Agora a arte
   nasce do nada em cima, ganha corpo na altura do cartão — que é onde ela tem de envolver
   — e some de novo antes do catálogo. Nenhuma das duas pontas tem borda.

   E ELA É MAIS LEVE QUE A DE CIMA de propósito: 0,42 contra 0,55 (0,5 contra 0,68 no
   celular). A de cima é a abertura da página e pode pesar; esta passa POR TRÁS do cartão
   branco, e no mesmo peso ela competia com o formulário — que é o que a página inteira
   existe para a pessoa preencher. */
.gerar-section::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:50%; transform:translateX(-50%); bottom:0;
  --disco:min(130vw, 2600px);
  width:var(--disco); height:min(420px, 76vw);
  background-image:url("/assets/roda-pergaminho-960.jpg");
  background-image:image-set(url("/assets/roda-pergaminho-960.webp") type("image/webp"),
                             url("/assets/roda-pergaminho-960.jpg") type("image/jpeg"));
  background-size:100% auto; background-position:center calc(100% + 0.2 * var(--disco)); background-repeat:no-repeat;
  opacity:0.42; mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 22%, rgba(0,0,0,1) 62%, rgba(0,0,0,0.45) 88%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 22%, rgba(0,0,0,1) 62%, rgba(0,0,0,0.45) 88%, rgba(0,0,0,0) 100%);
}
@media (max-width:700px){
  /* SÓ A OPACIDADE SOBROU AQUI — 03/09/2026, quando o enquadramento desta camada passou a
     ser um só em toda tela (o porquê está no bloco de cima). O que era `width:130vw` e
     `background-position` nesta regra subiu para a regra principal, palavra por palavra:
     eram os números do celular, e agora são os números da página.
     A ALTURA TAMBÉM SUBIU, e virou `min(420px, 76vw)`. O `76vw` é o que valia aqui e é a
     metade que manda no celular (296 px numa tela de 390, contra os 300 de antes — três
     píxeis que ninguém enxerga); os 420 px são o teto que valia no computador. Um `min` com
     as duas metades é a mesma faixa nas duas pontas, sem fronteira no meio.
     Conferida a conta do bloco de cima em toda a faixa de larguras: a janela em que o disco
     de 130vw cobre a tela inteira mede 0,805 tela a partir do empurrão, e `min(420px, 76vw)`
     fica dentro dela de 360 px de janela até 1920 — ou seja, o arco não reaparece em
     nenhuma. */
  .gerar-section::after{opacity:0.5;}
}
.parchment-texture{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0.07; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.36  0 0 0 0 0.28  0 0 0 0 0.14  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:220px 220px;
}
.gerar-section > .wrap{position:relative; z-index:1;}
/* NÃO HÁ MAIS VÉU NENHUM SOBRE A ARTE, e a razão é estrutural, não de gosto: desde
   31/08/2026 não há texto sobre ela. O título desceu para dentro do cartão branco e a linha
   `GERE SEU MAPA` deixou de existir. O véu creme que ficava aqui existia só para dar
   contraste a esses dois, e cada versão dele apagava um pedaço da roda para isso.
   QUEM PUSER TEXTO DE VOLTA SOBRE A ARTE traz o problema de volta junto, e a régua é medir
   o contraste do texto sobre o PIXEL MAIS ESCURO da arte atrás dos glifos, contra os 4,5:1
   da WCAG AA — não olhar e achar que dá. Os números que esta faixa já produziu: a linha de
   latão de 12 px media 2,44:1 no celular e 1,35:1 no computador (ela caía em cima do
   carneiro branco); o título de 23 px em `--ink` media 8,80:1 no celular, mas só 3,91:1 no
   computador, onde a prancha está ampliada a 175vw e figuras pintadas ficam bem atrás das
   palavras. Ou seja: no computador, texto sobre esta arte PRECISA de véu. */
/* ---------- CONSENTIMENTO (LGPD) ----------
   Nunca pré-marcado: a LGPD exige manifestação livre e inequívoca, e um
   checkbox que já vem marcado não é consentimento — é pegadinha. O mesmo
   componente serve ao mapa grátis, ao checkout e aos cadastros. */
.consent-row{
  display:flex !important; align-items:flex-start; gap:10px; margin:18px 0 4px !important;
  font-size:var(--c-apoio); font-weight:400 !important; color:var(--ink-soft); line-height:1.5; cursor:pointer;
}
/* A LINHA DO CONSENTIMENTO GANHOU CAIXA — 07/09/2026.
   Ela era texto miúdo cinzento solto entre a senha e o preço, do tamanho e da cor de uma
   nota de rodapé — e é a única linha OBRIGATÓRIA do formulário que não parece um campo.
   Quem desce depressa não a vê, tenta pagar, e o que aparece é uma compra que não anda.

   A CAIXA NÃO É ENFEITE: ela é o que faz a linha ler como parte do formulário e não como
   letra miúda. Fundo e moldura saem dos tokens de sempre (`--card-alt`, `--border-soft`),
   então ela acompanha qualquer troca de paleta sem número combinado aqui.

   O QUE ELA NÃO MEXE: tamanho, peso e cor do texto, a caixa de marcar e o estado
   `.faltando`. Tudo isso é decisão de outras passadas — 01/09 no desenho da caixa nativa,
   02/09 no realce de campo em falta — e continua valendo por cima desta. Só entra o
   terreno em volta.

   E O ESTADO DE FALTA ACOMPANHA: `.faltando` já pinta o texto de ferrugem: a moldura vai
   junto, senão a caixa continuaria bege em volta de um texto vermelho, dizendo duas coisas
   diferentes sobre o mesmo campo. */
.consent-row{
  background:var(--card-alt); border:1px solid var(--border-soft);
  border-radius:var(--radius-sm); padding:12px 14px;
}
.consent-row.faltando{border-color:var(--rust);}
/* A CAIXA DE MARCAR SE DEFENDE DO FORMULÁRIO ONDE ELA CAI — 01/09/2026.
   Ela estava saindo REDONDA, uma bolinha bege, e a causa não estava aqui: estava no
   `.birth-form input{...}`, que descreve um CAMPO DE TEXTO (48 px de altura, moldura de
   1 px, fundo branco, `border-radius:var(--radius-sm)`) e alcança todo `input` que cair
   dentro do formulário — inclusive este. Oito pixels de raio numa caixa de 17 px é um
   círculo; e a moldura mais o fundo branco escritos por cima da caixa nativa apagam o
   desenho que o sistema faria.

   O CONSERTO MORA NO COMPONENTE, E NÃO NO FORMULÁRIO, porque esta mesma linha aparece em
   quatro lugares com quatro donos diferentes (o mapa grátis, o checkout, a captura de conta
   e a sinastria), e cada um deles tem — ou terá — a sua própria regra genérica de `input`.
   Consertar no `.birth-form` deixaria os outros três à espera do próximo formulário que
   escrevesse a mesma coisa. Aqui, a caixa chega inteira em qualquer tela.

   `appearance:checkbox` é a linha que devolve o desenho do sistema (e é o que faz o
   `accent-color` voltar a pintar o visto); as outras desfazem, uma a uma, o que a regra do
   campo de texto tinha escrito. */
.consent-row input[type="checkbox"]{
  -webkit-appearance:checkbox !important; appearance:checkbox !important;
  width:17px !important; height:17px !important; min-width:17px; flex:none;
  padding:0 !important; border:0 !important; border-radius:0 !important;
  background:none !important; box-shadow:none !important; line-height:normal !important;
  margin:1px 0 0; accent-color:var(--brass-dark); cursor:pointer;
}
.consent-row a{color:var(--brass-dark); font-weight:600; text-decoration:underline;}
.consent-row a:hover{color:var(--brass-deep);}
/* E ELA PRECISA VENCER UM SELETOR COM ID — 07/09/2026, e este é o MESMO defeito que o
   rodapé teve, pela terceira vez neste projeto.

   O `tela-de-produto.css` abre com `#view-product a{color:inherit; text-decoration:none;}`.
   Um id vale 100 na conta de especificidade e uma classe vale 10 — então, DENTRO da página
   do produto, a regra de cima perdia: os links "Política de Privacidade" e "Termos de Uso"
   saíam cor de tinta comum e sem sublinhado. Medido no navegador, não deduzido.

   ONDE ISSO IMPORTA: são os dois únicos links da tela que COBRA, e são obrigatórios — a
   caixa de consentimento pede que a pessoa declare ter lido dois documentos que não
   parecem clicáveis. É o oposto do que a linha promete.

   O ARQUIVO JÁ CONHECIA O PROBLEMA e resolveu só metade dele: o comentário do
   `tela-de-produto.css` conta que o mesmo `#view-product a` vencia o `.footer-grid a` e
   deixava os links do rodapé ilegíveis. Lá a saída foi tirar o rodapé de dentro da tela do
   produto — o rodapé não é da tela do produto, e mudar de lugar foi o conserto certo.

   AQUI NÃO DÁ PARA MUDAR DE LUGAR: o consentimento É do formulário de compra, e o
   formulário de compra É da tela do produto. Então a saída é a outra — empatar a
   especificidade. `#view-product` (100) + `.consent-row a` (11) vence os 101 da regra de
   cima por vir depois na folha, e alcança só o que precisa.

   NÃO USEI `!important`: ele venceria também o dia em que alguém quisesse, de propósito,
   pintar este link de outra cor numa tela específica — e a essa altura ninguém lembraria
   por que não consegue. */
#view-product .consent-row a{color:var(--brass-dark); text-decoration:underline;}
.consent-row.faltando{color:var(--rust);}
.consent-row.faltando input[type="checkbox"]{outline:2px solid var(--rust); outline-offset:2px;}

/* ---------- ERRO DE FORMULÁRIO ---------- */
.form-error-box{
  margin-top:18px; padding:16px 18px; border:1px solid #E3C4BB; border-left:3px solid var(--rust);
  border-radius:var(--radius-sm); background:#FDF6F3;
}
.form-error-box strong{display:block; color:var(--rust); font-size:var(--c-corpo); margin-bottom:6px;}
.form-error-box p{font-size:var(--c-apoio); color:var(--ink-soft); margin-bottom:12px; line-height:1.55;}
.form-error-box .btn-outline{padding:9px 18px; font-size:var(--c-apoio);}

.birth-form-checklist{list-style:none; margin-top:20px; display:flex; flex-direction:column; gap:10px;}
.birth-form-checklist li{font-size:var(--c-apoio); color:var(--ink-soft); display:flex; align-items:center; gap:10px;}
.birth-form-checklist .check{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:18px; height:18px; border-radius:50%; background:var(--brass-light); color:var(--brass-dark);
  font-size:var(--c-etiqueta); font-weight:700;
}
.birth-form{max-width:560px; margin:0 auto; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-3); overflow:hidden;}
/* O TÍTULO MORA DENTRO DO CARTÃO — 31/08/2026, a pedido. Ele era um `.section-head` sobre
   a arte, e sair de cima dela é o que dispensa o véu creme nas DUAS telas: no branco do
   cartão o vermelho-terra mede 6,74:1, sem nada por baixo. Nenhum pedaço da roda precisa
   mais ser apagado para alguém conseguir ler.
   O VERMELHO-TERRA, E NÃO O `--ink`: dentro do cartão o preto do texto já é o dos rótulos e
   das respostas, e um título preto no meio deles vira só uma linha maior. O `--rust` é a
   cor do botão que fecha esta mesma faixa — o título e a ação passam a ser a mesma voz.
   O `margin-top:0` é obrigatório: o `h2` do app nasce com margem, e dentro de um cartão de
   28 px de respiro isso empurraria a primeira pergunta para longe sem motivo. */
.birth-form-titulo{margin:0 0 22px; color:var(--rust); font-size:var(--t-bloco); line-height:1.2; text-align:center; text-wrap:balance;}
.birth-form .row2{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.birth-form .row2 > div{min-width:0;}
/* O `select` ANDA JUNTO COM O `input` DESDE 05/09/2026, e a razão de ele ter ficado de fora
   está a algumas linhas daqui: existia `.birth-form select.campo-faltando` — alguém escreveu
   o ESTADO DE ERRO do menu suspenso e nunca o estado normal. Regra de estado sem regra de
   base é um campo que só ganha desenho quando a pessoa erra.
   Sem isto os onze menus do formulário de encomenda saíam com o desenho cru do navegador:
   19 px de altura contra 50 do campo ao lado, fonte de 13,3 px, moldura cinza e canto reto. */
.birth-form input,
.birth-form select{width:100%; max-width:100%; min-width:0; box-sizing:border-box;}
@media (max-width:680px){
  .wrap{padding:0 24px;}
  .birth-form{padding:24px;}
  .birth-form .row2{grid-template-columns:1fr; gap:0;}
}
.birth-form input[type="date"], .birth-form input[type="time"]{
  -webkit-appearance:none; appearance:none; -webkit-min-logical-width:0px; min-width:0;
}
.birth-form label{display:block; font-size:var(--c-apoio); font-weight:600; color:var(--ink); margin:14px 0 6px;}
.birth-form > label:first-child{margin-top:0;}
.birth-form .row2 label{margin-top:14px;}
.birth-form input,
.birth-form select{width:100%; height:48px; padding:0 13px; line-height:48px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:16px; background:#fff; color:var(--ink); -webkit-text-fill-color:var(--ink);}
.birth-form input::placeholder{color:var(--muted); opacity:0.9;}
.birth-form input:hover,
.birth-form select:hover{border-color:#D8C79A;}
.birth-form input:focus,
.birth-form select:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 4px var(--brass-glow);}
.birth-form input[type="date"], .birth-form input[type="time"]{ color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important; }
.birth-form button{width:100%; margin-top:20px;}

/* ---------- O CAMPO QUE FALTOU PREENCHER — 02/09/2026 ----------
   A pedido da dona: "se não, não compra e aparece que precisa preencher tudo". O recado de
   texto fica lá embaixo, ao lado do botão de pagar; esta é a metade que a pessoa vê quando
   a página a leva até o campo, que é longe do recado.

   A MOLDURA É GROSSA E NÃO SÓ COLORIDA: cor sozinha não é sinal — quem não distingue
   vermelho de bege veria dois campos iguais. Dois píxeis de moldura mudam a forma, e forma
   se vê sem cor nenhuma. O fundo é o `--rust` a 6% sobre branco, só o bastante para o olho
   achar o campo enquanto rola a página.

   ELE ESTÁ ESCRITO EM HEXADECIMAL, e não em `color-mix()`, porque seria o primeiro
   `color-mix()` deste projeto: ele só existe do iOS 16.2 em diante, e num iPhone mais
   velho a declaração inteira é descartada — o campo ficaria com moldura vermelha e fundo
   branco, o que ainda funciona, mas é gambiarra escrita de propósito. #F9F4F2 é a mesma
   cor, calculada uma vez. O `rgba` do foco tem o mesmo motivo. */
.birth-form .campo-faltando,
.birth-form input.campo-faltando,
.birth-form select.campo-faltando,
.birth-form textarea.campo-faltando,
#view-product .birth-form input.campo-faltando,
#view-product .birth-form select.campo-faltando,
#view-product .birth-form textarea.campo-faltando{
  border:2px solid var(--rust); background:#F9F4F2;
}
/* O `#view-product` NÃO É ZELO: o formulário de compra mora dentro dele, e a
   `tela-de-produto.css` escreve `#view-product .birth-form input{border:1px solid ...}`.
   Um seletor de classe nunca ganha de um que tem `id`, então sem esta segunda linha a
   moldura vermelha seria escrita e apagada no mesmo carregamento — e a marca que a dona
   pediu simplesmente não apareceria. */
.birth-form input.campo-faltando:focus,
#view-product .birth-form input.campo-faltando:focus{
  border-color:var(--rust); box-shadow:0 0 0 4px rgba(149, 64, 45, 0.18);
}
/* O consentimento NÃO ganha regra nova: a `.consent-row.faltando` lá em cima já existe
   desde que o `consentimento.js` nasceu, e é ela que a barreira da compra acende. Moldura
   numa caixa de 17 px não se veria de todo jeito — o `.consent-row input[type="checkbox"]`
   apaga borda e fundo de propósito, para a caixa sair com o desenho do sistema. */

/* ---------- AUTOCOMPLETE DE CIDADE ---------- */
.autocomplete-wrap{position:relative;}
.autocomplete-list{
  position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff;
  border:1px solid var(--border); border-radius:var(--radius-md); max-height:260px; overflow-y:auto;
  z-index:60; box-shadow:var(--shadow-3); display:none; animation:fadeInUp var(--dur-base) var(--ease-soft) both;
}
.autocomplete-list.show{display:block;}
.autocomplete-item{padding:11px 14px; font-size:var(--c-apoio); color:var(--ink); cursor:pointer; border-bottom:1px solid var(--border-soft); display:flex; flex-direction:column; gap:2px;}
.autocomplete-item:last-child{border-bottom:none;}
.autocomplete-item .ac-sub{color:var(--muted); font-size:var(--c-nota);}
.autocomplete-item:hover, .autocomplete-item.active{background:var(--brass-light);}
.autocomplete-status{padding:11px 14px; font-size:var(--c-apoio); color:var(--muted);}

/* ---------- RESULTADO ---------- */
/* ---------- O MAPA GRÁTIS, NO DESENHO DO RESTO DA PÁGINA — 01/09/2026 ----------
   Pedido da dona: "do mapa gratuito, redesenhe o design para combinar com tudo que já
   construímos até aqui: fontes, cores".

   O QUE ESTAVA FORA DO TOM ERA A LAJE BRANCA. A seção tinha fundo `--card` e um filete em
   cima e outro embaixo: no meio de uma página que agora é pergaminho contínuo, com a
   aquarela correndo por baixo, ela entrava como um bloco de outro material — e, por ser
   branca por dentro, os cartões brancos dela sumiam uns nos outros.

   Agora o fundo é o da página, e quem carrega o branco são os CARTÕES — a mesma gramática
   do formulário de nascimento logo acima e das prateleiras logo abaixo: papel creme, e
   sobre ele as fichas brancas com sombra. Nenhuma cor nova entrou: é o `--card` que já
   era, mudado de lugar. */
/* A SEÇÃO INTEIRA VOLTOU A SER BRANCA — 01/09/2026, a pedido da dona: "essa seção toda
   deve ser branca para o fundo do gráfico ficar branco também".

   E o PORQUÊ dela é o que decide como fazer: o alvo não é a seção, é O FUNDO DO GRÁFICO.
   Um mapa astral é traço escuro sobre claro, e o creme do pergaminho por baixo dele suja o
   branco que um gráfico pede. Pintar só a seção não resolveria: a roda desenha o PRÓPRIO
   fundo (um disco creme, o `paper` do `drawWheel`), e ela continuaria creme dentro de uma
   seção branca. Por isso a mudança é em dois lugares — aqui e na chamada do
   `consentimento.js`, que agora passa `paper:"#FFFFFF"`.

   Isto DESFAZ a decisão de mais cedo hoje, que tirou o branco daqui para a página ficar
   pergaminho contínuo. Fica registrado que foi de propósito, e não esquecimento: quem
   manda no acabamento é a dona, e o argumento dela é melhor — o gráfico é o produto desta
   tela, e o produto pede fundo limpo. */
/* O BRANCO CHEGA E SAI EM DEGRADÊ — 01/09/2026, a pedido da dona: "entre a seção 'Insira
   seus dados de nascimento' e 'Seu resultado gratuito' e a seção 'Escolha uma área' tem
   troca de cores bem secas: bege/branco/bege. Faça um leve degradê para o bege ir pro
   branco e o branco ir para o bege, dando um visual de linha contínua".

   ERAM DOIS CORTES RETOS, e os dois de graça: o `background:var(--card)` desta seção
   encontrava o pergaminho da faixa do formulário em cima e o do catálogo embaixo, numa
   linha de um pixel atravessando a tela. Fundo chapado tem sempre essa borda; o que muda
   é só se ela cai onde alguém olha — e aqui cai duas vezes no meio do caminho da rolagem.

   O DEGRADÊ É DESTA SEÇÃO, E NÃO DAS VIZINHAS, e é isso que faz uma regra resolver os
   dois lados: ela é a única BRANCA entre duas beges, então basta ela nascer e morrer no
   bege delas. Uma faixa de transição em cada vizinha seriam duas regras para manter em
   sincronia com uma terceira cor.

   AS DISTÂNCIAS SÃO MEDIDAS PELO CONTEÚDO, não redondas por gosto: os 150 px de cima
   cobrem o respiro (56) e o sobretítulo, e o branco chega inteiro antes do nome da pessoa;
   os 180 px de baixo começam depois do fim da última tabela e terminam no respiro (72).
   A RODA NUNCA FICA NO DEGRADÊ — ela abre logo abaixo do título, no branco cheio, que é o
   fundo que um gráfico pede (o motivo inteiro está no comentário acima).

   `background-attachment` fica no padrão (`scroll`): o degradê é da CAIXA da seção, e uma
   caixa que cresce com o mapa da pessoa. Preso à janela, ele mudaria de lugar a cada
   rolagem — e a linha contínua que este pedido quer viraria uma faixa que anda. */
.resultado-section{
  display:none; padding:56px 0 72px;
  background:linear-gradient(180deg,
    var(--bg) 0,
    var(--card) 150px,
    var(--card) calc(100% - 180px),
    var(--bg) 100%);
}
.birth-info{margin:12px 0 22px; font-size:var(--c-apoio); color:var(--brass-dark); font-weight:600; letter-spacing:0.02em;}
.resultado-section.show{display:block;}
/* O CABEÇALHO MUDOU DE LUGAR — 03/09/2026, de noite: ele deixou de abrir a seção e passou a
   vir DEPOIS da roda, a pedido da dona ("e se o gráfico for o primeiro a aparecer?"). Com
   isso a margem deixa de ser só embaixo: ele agora tem a roda em cima e as tabelas embaixo,
   e precisa se soltar das duas. O `max-width` fica, e é o que impede a frase de virar uma
   linha de mil píxeis debaixo de um gráfico centrado. */
.resultado-section .section-head{max-width:660px; text-align:left; margin:34px 0 30px;}
.result-lede{margin-top:0; font-size:var(--c-apoio); line-height:1.7; color:var(--ink-soft); text-wrap:pretty;}
.result-notice{margin-top:24px; text-align:left; font-size:var(--c-apoio); line-height:1.65; color:var(--ink-soft); background:var(--card-alt); border:1px solid var(--border); border-radius:var(--radius-md); padding:18px 22px;}
.result-notice strong{display:block; color:var(--brass-dark); font-size:var(--c-nota); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px; font-weight:700;}
.resultado-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:44px; align-items:start; margin-top:40px;}
/* A RODA GANHOU FICHA — 01/09/2026. Ela era um desenho solto sobre o fundo da seção, e
   funcionava enquanto a seção era branca: o traço dela é escuro sobre claro. Sobre o
   pergaminho, com a aquarela por baixo, o mapa perdia o fundo limpo que um gráfico pede.
   A ficha é a MESMA do `.card` do site (fundo, raio, sombra), e não uma moldura nova. */
.wheel-wrap{
  display:flex; justify-content:center;
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-2); padding:18px 14px;
}
/* NO RESULTADO GRÁTIS A FICHA DA RODA SOME, e some para o mapa CRESCER. Sobre a seção
   branca ela não separava mais nada — ficha branca em fundo branco é só um filete e uma
   sombra —, e o que ela cobrava era espaço: 1 px de borda e 14 px de respiro de cada lado,
   que num celular de 390 px é 8% da largura do desenho. Sem ela, mais a margem negativa
   que come metade do respiro do `.wrap`, a roda ganha cerca de 20% de diâmetro.

   A LINHA QUE DIZIA "ela continua no Meu mapa, que segue sobre pergaminho" SAIU em
   06/09/2026, e as duas metades dela caíram no mesmo dia: o `Meu mapa` passou a SER esta
   seção (`#view-mymap .resultado-do-meu-mapa`), e a leitura comprada ficou branca também.
   As três telas de mapa do produto perderam a ficha, cada uma pelo mesmo motivo. */
.resultado-section .wheel-wrap{background:none; border:0; box-shadow:none; padding:0;}
/* A COLUNA DA RODA PASSOU A SER A MAIOR: era 0,9 contra 1,1 das tabelas, virou 1 contra
   1 e agora é 1,1 contra 0,9 — a roda é o que esta tela tem para mostrar, e a tabela ao
   lado é texto curto em quatro colunas, que aguenta ser a menor das duas. */
.resultado-grid{grid-template-columns:1.1fr 0.9fr;}
/* O TÍTULO DO RESULTADO EM TAMANHO DE TÍTULO, a mesma escala que "Escolha uma área para
   compreender primeiro" ganhou hoje. Ele vinha do tamanho que o navegador dá a um `h2` sem
   regra — 23 px —, e é o nome da pessoa no alto do próprio mapa: a coisa mais importante
   desta tela estava escrita menor que o nome de uma prateleira. */
.resultado-section .section-head h2{font-size:clamp(30px, 8.5vw, 44px); line-height:1.14; text-wrap:balance;}
.pos-table-card{padding:26px 28px; margin-bottom:22px;}

/* ===========================================================================
   A TELA DA LEITURA COMPRADA FICA BRANCA, COMO A DO MAPA GRÁTIS — 06/09/2026
   ===========================================================================
   A pedido da dona, e é o fim do pedido dela de hoje de manhã: "o gráfico/tabelas/design
   da aba de produto pronto precisa estar compatível com os ajustes que fizemos no mapa
   gratuito". O gráfico e as tabelas foram de manhã; o DESENHO em volta deles é isto.

   POR QUE ELA NÃO TINHA VINDO JUNTO, e a razão estava escrita e era boa: sobre pergaminho,
   o cartão branco é o que faz a tabela ser legível. Só que essa razão vive de uma premissa
   — a de que o fundo é pergaminho —, e é a premissa que muda aqui. Com a tela branca, o
   cartão branco vira o que ele já era no mapa grátis em 01/09: um filete e uma sombra de
   branco sobre branco, cobrando 28 px de respiro de cada lado. Num celular de 390 px isso
   é 14% da largura tirados de TODA tabela, e é justamente a largura que a grade de catorze
   colunas disputa.

   O BRANCO É DA TELA INTEIRA, e não um degradê como no mapa grátis. Lá a seção branca mora
   ENTRE duas beges e precisa nascer e morrer no bege delas; aqui `#view-reading` é a tela
   toda — a barra do topo pinta o próprio vidro e não há vizinha embaixo (esta é a única
   tela de Mapas sem as seções de fecho dentro dela). Sem vizinha, não há corte para
   suavizar, e um degradê seria enfeite a manter em sincronia com nada. */
#view-reading{background:var(--card);}

/* A FICHA SAI DE QUEM ERA SÓ UMA TABELA, E FICA EM QUEM AGRUPA UM PAINEL — e essa é a
   linha, achada lendo o `gravidez.css`, que diz com todas as letras que o painel dele
   "mora dentro de um `.pos-table-card`, que já dá a moldura, o fundo e o respiro".

   O raciocínio do mapa grátis é sobre TABELA: "cada cartão é uma tabela que se explica pela
   forma — a grade triangular, a de quatro linhas por três colunas, a lista de pares —, e o
   cartão branco já é a divisão". Uma tabela se explica sozinha; um PAINEL não. O da
   gravidez tem resumo em pares, cartões de janela, linha do tempo e tabela de ciclos; o do
   parto e o astromapa são da mesma natureza. Ali a ficha não é enfeite — é o que diz que
   aquelas peças diferentes são UMA coisa só.

   Por isso quem perde a ficha é marcado um a um, com a MESMA classe que o mapa grátis usa
   para os blocos dele. Duas telas falando a mesma língua sobre a mesma decisão. */
#view-reading .pos-table-card.bloco-do-mapa{
  background:none; border:0; box-shadow:none; padding:0; margin-bottom:34px;
}
#view-reading .pos-table-card.bloco-do-mapa:hover{box-shadow:none; border-color:transparent;}
/* O QUE SEPARA UM BLOCO DO OUTRO PASSA A SER O ESPAÇO, que se ajusta num número só — os
   34 px acima. Era o respiro do cartão mais a margem dele (26 + 22); agora é um valor. */

/* A RODA PERDE A FICHA E CRESCE, exatamente como no resultado grátis: sobre branco a ficha
   não separa mais nada, e o que ela cobrava era 1 px de borda e 14 px de respiro de cada
   lado. Medido num celular de 390 px: 312 → 390 px, a largura inteira da tela.
   AS TRÊS TELAS DE MAPA passam a ser assim. Esta frase já nasceu dizendo que o `Meu mapa`
   seguia sobre pergaminho, e ficou falsa em horas — outra sessão o transformou nesta mesma
   seção no mesmo dia. Fica a lição, que é a de sempre aqui: comentário que descreve a
   VIZINHA envelhece na mão de quem mexe na vizinha. */
#view-reading .wheel-wrap{background:none; border:0; box-shadow:none; padding:0;}
/* E no celular ela usa a largura inteira da tela, comendo o respiro do `.wrap`. O desenho
   não é cortado: o `preserveAspectRatio` do SVG é `meet`, então o mapa inteiro sempre cabe
   — o que muda é o tamanho. Respiro lateral em volta de um gráfico não é elegância, é
   gráfico menor. */
@media (max-width:680px){ #view-reading .wheel-wrap{margin-left:-24px; margin-right:-24px;} }

/* ==========================================================================
   AS FICHAS DA LEITURA COMPRADA EM DUAS COLUNAS, COMO AS DO MAPA GRÁTIS — 07/09/2026
   ==========================================================================
   Pedido da dona, com o print da tela rolando: "a página do mapa pago ainda não está
   organizada igual a do mapa grátis (dá pra ver tudo rolando pra baixo, mas não está lado a
   lado em ordem como mapa grátis)".

   EM 06/09 ESTA TELA GANHOU O CONTEÚDO E A COR do mapa grátis — a lista de aspectos, as duas
   grades, o fundo branco, as fichas sem cartão. O que não veio foi o ARRANJO: ela continuou
   sendo o que sempre foi, a coluna de 640 px em que se lê o texto da análise. Numa tela larga
   isso é o desenho de celular servido a um computador, e é o mesmo defeito que o resultado
   grátis carregou até 03/09 e o "Meu mapa" até 06/09.

   POR QUE A COLUNA DE 640 NÃO PODE SIMPLESMENTE ALARGAR, e é isto que separa esta tela das
   outras duas: aqui as fichas do mapa dividem a página com TEXTO — o cabeçalho, "o que você
   vai compreender", os capítulos da análise, a nota do PDF. Texto se lê numa coluna estreita,
   e uma linha de mil píxeis é justamente o que os 640 existem para impedir. Então quem sai da
   coluna são as FICHAS, num invólucro só delas (`.reading-mapa`), e a leitura fica onde está.

   A LARGURA É A DO SITE, e não um número novo: `min(1016px, 100vw - 64px)` é exatamente o
   miolo do `.wrap` (1080 de teto, 32 de respiro de cada lado) que todas as outras telas usam.
   A margem negativa recentra o invólucro na janela — 100% aqui é a coluna de leitura, e a
   conta devolve a metade da diferença para cada lado. SEM `transform`, de propósito: a roda
   em tela cheia é `position:fixed`, e um ancestral transformado viraria o bloco de contenção
   dela — a "tela cheia" passaria a ser o tamanho desta faixa.

   O ARRANJO É O DO RESULTADO GRÁTIS, linha por linha: a roda inteira em cima, as posições
   sozinhas de um lado, a grade de aspectos e o quadro de elementos empilhados do outro, e a
   lista de aspectos em largura inteira embaixo. As colunas 42/58 e a célula de 30 px vêm de
   lá pela mesma conta escrita lá: catorze colunas de 30 px mais as bordas são 422 px, e a
   grade é a única ficha desta tela com largura MÍNIMA.

   O CORTE É 900 PX, o mesmo do resultado grátis. Dois números diferentes para a mesma
   fronteira é como uma faixa de larguras fica sem desenho nenhum.

   NO CELULAR NADA MUDA: abaixo de 900 o invólucro é um `div` comum, as fichas continuam
   empilhadas na ordem do HTML — que é a ordem aprovada desde 02/09. */
#view-reading .reading-mapa > .wheel-wrap{margin-bottom:34px;}
@media (min-width:900px){
  /* A FAIXA É UMA SÓ, E O PAINEL DO ASTROMAPA ENTROU NELA — 07/09/2026, no fim do dia, a
     pedido da dona ("ajuste Mapa de onde morar e Astrocartografia para viagens").

     O mapa-múndi já saía da coluna de leitura desde antes: ele tinha um par de margens
     negativas de 100 px no `cartao-em-producao.css`, que lhe davam 840 px. Enquanto ele era
     o único cartão desta tela a sair, aquilo bastava. Com as fichas do mapa saindo também,
     as duas contas passaram a discordar — 776 px de mapa-múndi ao lado de 1016 px de
     tabelas, e o painel que é o PRODUTO destes dois mapas ficava menor que a tabela de
     posições ao lado dele.

     Agora a faixa é declarada UMA VEZ e os dois a usam. A régua não cobra "1016 px": cobra
     que o painel do astromapa ocupe a MESMA faixa das fichas — no dia em que a largura do
     site mudar, os dois mudam juntos e a conferência continua valendo.

     ELE NÃO ENTROU NA GRADE, e é de propósito: ele não é uma ficha entre outras, é um painel
     que agrupa mapa, atalhos, legenda e resumo — e por isso guarda a ficha branca, pela
     decisão de 06/09. O que ele ganha aqui é a largura, e não o lugar. */
  /* AS MARGENS NEGATIVAS SUMIRAM DAQUI — 07/09/2026, fim do dia, e a razão está no
     `cartao-em-producao.css`: a coluna de leitura passou a SER a faixa do site, então as
     fichas do mapa e o painel do astromapa já nascem com a largura que antes precisavam ir
     buscar. Regra que não faz mais nada é regra que alguém vai copiar achando que faz.

     O QUE FICA É A GRADE, que é o que esta faixa tem de próprio: duas colunas, e o arranjo
     das fichas dentro delas. */
  #view-reading .reading-mapa{
    display:grid;
    grid-template-columns:minmax(0,42%) minmax(0,58%);
    column-gap:40px; row-gap:34px; align-items:start;
  }
  /* Item de grade nasce com `min-width:auto` ("nunca fique menor que o conteúdo"), e a grade
     de catorze colunas faria a coluna do grid parar de ser 58% e virar a largura dela — que é
     o defeito de 02/09 no resultado grátis: a página inteira deslizando para o lado. */
  #view-reading .reading-mapa > *{min-width:0;}
  #view-reading .reading-mapa > .wheel-wrap{grid-column:1 / -1; grid-row:1; margin-bottom:0;}
  /* AS QUATRO FICHAS EM DUAS COLUNAS QUE ACABAM JUNTAS — 07/09/2026, fim do dia.
     A distribuição de elementos ERA uma linha inteira embaixo (`1 / -1`), e isso produzia
     dois brancos de uma vez: as barras esticadas por mil píxeis, e a coluna das posições
     acabando muito antes da coluna da grade. Ela desce para o pé da coluna ESQUERDA, que é
     onde a conta fecha — as posições são a ficha mais alta de um lado, a grade mais o quadro
     de elementos são a do outro, e a distribuição é o que faltava para as duas terminarem na
     mesma altura.
     E O LUGAR TAMBÉM DIZ ALGO: a distribuição de elementos é o retrato por elemento do que a
     tabela de posições lista signo a signo. Ela ficar debaixo das posições é a mesma leitura
     que pôs o quadro de elementos debaixo da grade. */
  #view-reading .reading-mapa .bloco-das-posicoes{grid-column:1; grid-row:2;}
  #view-reading .reading-mapa .bloco-do-potencial{grid-column:1; grid-row:3;}
  #view-reading .reading-mapa .bloco-da-grade{grid-column:2; grid-row:2;}
  #view-reading .reading-mapa .bloco-dos-elementos{grid-column:2; grid-row:3;}
  #view-reading .reading-mapa .aspectos-largo{grid-column:1 / -1; grid-row:4;}
  /* NOS PRODUTOS DE DUAS PESSOAS, UMA TABELA DE CADA LADO E A GRADE CRUZADA EMBAIXO. Quem
     põe e tira a marca é o `carregar-biblioteca.js`, junto da linha que mostra a segunda
     tabela — o CSS não tem como saber quantos mapas esta tela está mostrando. */
  #view-reading .reading-mapa.duas-pessoas .bloco-das-posicoes{grid-column:1; grid-row:2;}
  #view-reading .reading-mapa.duas-pessoas .bloco-das-posicoes-b{grid-column:2; grid-row:2;}
  #view-reading .reading-mapa.duas-pessoas .bloco-da-grade{grid-column:1 / -1; grid-row:3;}
  /* O respiro entre fichas passa a ser o `row-gap`. Mantê-lo também na margem somaria 34 px
     a cada linha — é a mesma linha que o resultado grátis tem. */
  #view-reading .reading-mapa .bloco-do-mapa{margin-bottom:0;}
  /* A RODA CENTRADA E DO TAMANHO DE UMA DOBRA, a mesma conta do resultado grátis: 520 px é o
     teto de nitidez do desenho e os 62vh são o que a mantêm DENTRO da dobra num tablet de pé
     de página. O `:not(.em-tela-cheia)` não é zelo — sem ele a tela cheia continuaria com
     520 px de largura e viraria uma tira no canto. */
  #view-reading .reading-mapa .wheel-wrap .roda-zoom:not(.em-tela-cheia){width:min(520px, 62vh);}
  /* "As infos podem ficar pequenas": o que encolhe é a ALTURA DA LINHA, não a letra — a mesma
     decisão de 03/09 no resultado grátis, e pelo mesmo motivo (a tabela já está no degrau
     mais baixo que um corpo de texto pode ter). */
  #view-reading .reading-mapa table.pos-table td{padding:6px 4px; line-height:1.4;}
  #view-reading .reading-mapa table.pos-table td.glyph{font-size:var(--c-apoio);}
  #view-reading .reading-mapa table.pos-table tr.divider td{padding-top:12px;}
  #view-reading .reading-mapa .ge-tabela th, #view-reading .reading-mapa .ge-tabela td{padding:6px 8px;}
  #view-reading .reading-mapa .ga-tabela th, #view-reading .reading-mapa .ga-tabela td{width:30px; min-width:30px; height:30px;}
  #view-reading .reading-mapa .ga-glifo{font-size:var(--c-apoio);}
  #view-reading .reading-mapa .ga-simbolo{font-size:var(--c-nota);}
}

/* O TÍTULO QUE NOMEIA O ÓBVIO SAI; O QUE DIZ DE QUEM É A TABELA FICA — e é essa a diferença
   entre esta tela e a do mapa grátis, onde TODOS saíram.
   Lá cada cartão é uma tabela que se explica pela forma, e não há duas de mesma forma na
   mesma tela. Aqui há: num produto de casal são DUAS tabelas de posições, e sem o título
   ninguém sabe qual é de quem. Então a régua não é "sem títulos" — é: um título fica quando
   diz algo que a forma da tabela não diz.
   Quem carrega a marca `titulo-obvio` são os que nomeiam o óbvio, e nos dois que trocam de
   texto conforme o produto (as posições e a grade) quem a põe e tira é o
   `carregar-biblioteca.js`, no mesmo lugar em que escreve o texto deles. */
#view-reading .pos-table-card > h3.titulo-obvio{display:none;}
/* O CONTORNO BEGE DAS DUAS TABELAS SAIU — 01/09/2026, a pedido da dona: "remova o contorno
   bege da tabela planetárias e aspectos".

   ELE VINHA DE DOIS LUGARES, e tirar um só deixaria metade da queixa na tela:

   · a BORDA de repouso, herdada do `.card-prominent`. Ela é `--border`, tinta transparente
     a 10% — sobre o pergaminho ela sai bege, e é para isso que ela existe: separar um
     cartão branco de um fundo creme. AQUI NÃO HÁ O QUE SEPARAR. Desde hoje esta seção é
     BRANCA, e ficha branca sobre fundo branco não é separada por um filete: é contornada
     por ele. O que sobrou foi o desenho de um retângulo em volta de uma tabela;
   · a borda de PASSAGEM DO MOUSE, que era `#DCCB9C` — caramelo escrito à mão, e o único
     lugar do arquivo onde ele ainda estava. Em 31/08 a dona já tinha dito "essa borda
     caramelo/bege me irrita" e o `--border` inteiro virou tinta transparente naquele dia;
     este `:hover` ficou para trás, e por isso a borda voltava a ser caramelo justamente
     quando alguém encostava nela.

   A SOMBRA FICA, e é ela que passa a fazer o trabalho sozinha: sobre branco, uma sombra
   diz "isto está por cima" sem desenhar aresta nenhuma. É o mesmo motivo pelo qual a
   `.wheel-wrap` perdeu a ficha nesta seção, três regras acima.

   O SELETOR COMEÇA EM `.resultado-section` E ISSO CONTINUA CERTO, mas não mais porque as
   outras telas sejam creme — em 06/09/2026 as três ficaram brancas, e cada uma apaga a
   própria ficha na sua regra (`#view-mymap` virou esta mesma seção; `#view-reading` tem a
   dele algumas regras abaixo). O que o escopo guarda hoje é o `.pos-table-card` que ainda
   vive sobre pergaminho em OUTRAS telas — a bancada do astrólogo e os painéis da gravidez,
   do parto e do astromapa dentro da leitura, onde o filete separa de verdade. */
.resultado-section .pos-table-card{border:0;}
.resultado-section .pos-table-card:hover{border-color:transparent;}
.pos-table-card:hover{box-shadow:var(--shadow-3); border-color:rgba(31,26,18,0.18);}
/* A FONTE DESTE RÓTULO ERA A SERIFA DOS TÍTULOS, e não devia ser — 01/09/2026, achado
   depois de "verifique a fonte desta seção, me parece desatualizada".
   "POSIÇÕES PLANETÁRIAS" é um `h3`, e todo `h1..h4` do site pede a `--fonte-titulo`
   (Fraunces). Só que ele não é um título: é uma ETIQUETA de 12,5 px em caixa alta e
   entreletra aberta — exatamente o papel do `.eyebrow` logo acima ("Seu resultado
   gratuito") e do cabeçalho da tabela logo abaixo ("PLANETA · SIGNO · CASA"), que são
   `div` e `th` e por isso saem na fonte de interface. Três etiquetas do mesmo papel, uma
   delas em serifa: é isso que se vê e se chama de fonte velha.
   A regra escrita em 31/08 já dizia isto — "a serifa é só dos títulos; etiqueta de 11 px e
   célula de tabela voltaram para a `--fonte-interface`" —, e este ficou de fora porque é a
   única etiqueta do site marcada como `h3`. */
.pos-table-card h3{font-family:var(--fonte-interface); font-size:var(--c-apoio); margin-bottom:16px; color:var(--brass-dark); text-transform:uppercase; letter-spacing:0.07em; font-weight:700; display:flex; align-items:center; gap:9px;}
.pos-table-card h3::after{content:""; flex:1; height:1px; background:var(--border);}
/* A lista de aspectos é uma tabela de três colunas com eixo no meio: o primeiro
   ponto alinhado à direita, o aspecto centralizado numa coluna de largura fixa
   (por isso as linhas ficam alinhadas entre si) e o segundo ponto à esquerda.
   Pontos sem glifo (Ascendente, Juno, Parte da Fortuna…) continuam encostados
   no mesmo eixo, porque o alinhamento é do grupo inteiro, não do glifo. */
/* ---------------------------------------------------------------------------
   OS ASPECTOS AGRUPADOS, EM LARGURA INTEIRA — 02/09/2026
   ---------------------------------------------------------------------------
   O cartão dos aspectos saiu da coluna das tabelas e passou a ocupar as duas,
   embaixo delas. Não é gosto: com cinquenta aspectos numa coluna só, a metade
   direita da tela ficava com quase o dobro da altura da esquerda, e o que
   sobrava embaixo era branco — foi o que a dona apontou no print.
   AS COLUNAS SÃO DO NAVEGADOR (`columns`), e o que as torna legíveis é o
   agrupamento: `break-inside:avoid` mantém cada grupo inteiro dentro de uma
   coluna, então nunca há um título de um lado e as linhas dele do outro. */
/* ---------------------------------------------------------------------------
   OS CARTÕES SAÍRAM DO RESULTADO GRÁTIS — 02/09/2026
   ---------------------------------------------------------------------------
   Pergunta da dona: "e se ao invés de vários cards essas coisas ficarem tipo no
   branco mesmo? não é mais fácil pra formatar/ajustar no design?". É — e nesta
   tela eles já não faziam trabalho nenhum:

   · esta seção é BRANCA desde 01/09, e o cartão também. O que restava dele era
     uma sombra debaixo de branco em cima de branco. A borda já tinha saído no
     mesmo dia, pelo mesmo motivo; a ficha da roda, também;
   · com os títulos fora (hoje de manhã), o cartão perdeu a última coisa que
     enquadrava. Sobrou o RESPIRO dele: 26 px em cima e 28 de cada lado — que num
     celular de 390 px são 14% da largura tirados de toda tabela, e é justamente a
     largura que a grade de catorze colunas estava disputando.

   O que separa um bloco do outro agora é o espaço, e é ele que se ajusta num
   número só. É a mesma decisão que a roda já tinha recebido nesta seção. */
.resultado-section .bloco-do-mapa{margin-bottom:38px;}
.resultado-section .bloco-do-mapa:last-child{margin-bottom:0;}
.salvar-o-mapa{text-align:center; margin-top:8px;}
.salvar-o-mapa .btn-outline{min-width:220px;}
/* O que ocupa as duas colunas: a lista de aspectos e o botão de salvar, que é do mapa
   inteiro e não da metade esquerda dele. */
.resultado-grid > .aspectos-largo, .resultado-grid > .salvar-o-mapa{grid-column:1 / -1;}
/* A SEÇÃO DO "MEU MAPA" NASCE VISÍVEL — 06/09/2026. A `.resultado-section` é `display:none`
   porque o resultado grátis só aparece depois de calculado; aqui a seção é a tela inteira, e
   quem decide se ela aparece é o `#view-mymap`. */
#view-mymap .resultado-do-meu-mapa{display:block;}
/* O `min-width:0` NÃO É ENFEITE — 02/09/2026, o defeito que a dona pegou num print do
   celular: a página inteira deslizava para o lado e sobrava uma tira creme à direita.
   Item de grid nasce com `min-width:auto`, e isso quer dizer "nunca fique menor que o
   conteúdo". A grade de aspectos tem catorze colunas de 29 px — 462 px com o respiro do
   cartão —, então a coluna do grid parava de ser 1fr e virava 463 px numa tela de 390.
   Quem estourava a tela, porém, não era a grade: era A RODA, que no celular usa margem
   negativa de 24 px para ocupar a largura toda e passou a medir 511 px. O sintoma some
   longe da causa, e é o tipo de defeito que se conserta no lugar errado três vezes antes
   de achar. A grade continua rolando dentro do cartão dela, que é o que ela sempre fez.
   O mesmo conserto já existia na bancada do astrólogo (`.ap-row2 > *`), pelo mesmo motivo. */
.resultado-grid > *{min-width:0;}

/* ==========================================================================
   NO TABLET E NO COMPUTADOR: A RODA NO MEIO, AS TABELAS NA ROLAGEM SEGUINTE
   ==========================================================================
   03/09/2026, pedido da dona com dois prints de um tablet em pé de página:
   "eu quero gráfico centralizado ao meio; as infos do mapa etc podem ficar pequenas; a
   tabela distribuída na próxima rolagem de tela sem tanto espaço em branco".

   O QUE ELA VIU: a grade de duas colunas que existe aqui desde 02/09 põe a roda na coluna
   da ESQUERDA e a tabela de posições na da direita. Medido na tela dela: numa faixa de
   1016 px a roda fica num quadrado de 528 e o meio da tela cai entre as duas colunas —
   ou seja, o gráfico está 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); é outra vez o desenho de celular
   servido a uma tela larga.

   A FORMA NOVA, e ela é a leitura natural desta tela: a roda PRIMEIRO, sozinha, centrada
   e do tamanho de uma dobra; as fichas do mapa DEPOIS, distribuídas em duas colunas que
   acabam juntas. É a ordem em que se lê um mapa — o desenho, e depois as tabelas que o
   destrincham — e é a ordem que o PDF já usa.

   A CONTA DA RODA: `min(520px, 62vh)`. Os 520 px são o teto de nitidez (o desenho é
   vetor, mas os glifos e a régua de graus foram medidos para essa ordem de tamanho), e os
   62vh são o que a mantém DENTRO da dobra num tablet de pé de página — numa janela de
   800 px de altura, o título da seção (200 px) mais a roda (496) somam 696. Sem o `vh`,
   uma janela baixa devolveria o defeito que ela fotografou na capa: a peça sozinha
   ocupando a tela e o resto empurrado para fora.

   AS DUAS COLUNAS SÃO DESIGUAIS DE PROPÓSITO, e é isso que fecha o branco: as posições
   (dezessete linhas) ficam sozinhas de um lado, a grade de aspectos e o quadro de
   elementos empilhados do outro. Medido a 1016 px: 470 de tabela contra 500 de
   grade + elementos — 30 px de diferença, contra os 434 que sobravam quando as três
   fichas dividiam a mesma coluna.

   O `display:contents` NOS DOIS INVÓLUCROS é o que permite tudo isso sem tocar no HTML da
   grade: os `<div>` 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 `<div>` 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;}
.asp-grupo{break-inside:avoid; page-break-inside:avoid; 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;}
.aspects-list li{display:grid; grid-template-columns:minmax(0,1fr) var(--asp-col) minmax(0,1fr); align-items:center; gap:10px; padding:10px 2px; border-bottom:1px solid var(--border-soft); font-size:var(--c-apoio); color:var(--ink); transition:background var(--dur-fast) var(--ease);}
.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;}
.aspects-list .aspect-side-a{justify-content:flex-end; text-align:right;}
.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){
  .gerar-section{--respiro-da-arte:min(176px, 10vh); padding-bottom:56px;}

  /* A LISTA VAI PARA O LADO. Tudo continua na coluna 1, na mesma ordem e com a mesma
     navegação por teclado; só a lista muda de lugar, e ela é a única peça do cartão que não
     se preenche. `grid-row:2 / span 30` porque os campos escondidos de latitude, longitude,
     país e fuso também são filhos e também criam linhas — de altura zero, mas criam. */
  /* 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. */
  #view-catalog .birth-form{
    max-width:880px; padding:24px 26px;
    display:grid; grid-template-columns:minmax(0,1fr) 250px; column-gap:34px;
  }
  #view-catalog .birth-form > *{grid-column:1;}
  #view-catalog .birth-form .birth-form-titulo{grid-column:1 / -1; margin-bottom:16px;}
  #view-catalog .birth-form .birth-form-checklist{grid-column:2; grid-row:2 / span 30; align-self:start; margin-top:0;}
  #view-catalog .birth-form label{margin:10px 2px 6px;}
  #view-catalog .birth-form > label:first-of-type{margin-top:0;}
  #view-catalog .birth-form .row2 label{margin-top:10px;}
  #view-catalog .birth-form input{height:46px;}
  #view-catalog .birth-form .consent-row{margin:12px 0 2px;}
  #view-catalog .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 `<br>` 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` é do PIN, e não da faixa: é ele que garante que a arte das estrelas
   possa sangrar na margem sem abrir rolagem horizontal no telefone. */
.testimonials{
  padding:88px 0;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg,
      transparent 0,
      var(--areia) 120px,
      var(--areia) calc(100% - 120px),
      transparent 100%);
}
.testimonials .wrap{position:relative; z-index:1;}

/* O PIN DE ESTRELAS. Ele mora no CANTO, atrás do conteúdo (`z-index:0` contra o `1` do
   `.wrap`), inclinado como um adesivo que alguém colou torto de propósito.
   NO COMPUTADOR ELE FICA INTEIRO, e isso foi decidido OLHANDO: a primeira versão sangrava
   34 px para fora e o corte caía no MEIO da estrela maior — o que não lê como pin colado na
   borda, lê como imagem cortada por engano. No telefone o sangramento fica, porque lá não
   há margem sobrando: a faixa é a largura da tela, e um pin inteiro roubaria o título.
   Quem segura o sangramento do telefone é o `overflow:hidden` da seção, e não a largura.
   A OPACIDADE É 0,85 porque atrás dele passa texto em telas estreitas — e ornamento que
   disputa leitura com depoimento é ornamento que atrapalha a venda que ele veio enfeitar. */
.pin-estrelas{
  position:absolute; z-index:0; pointer-events:none;
  top:14px; right:16px; width:168px;
  opacity:0.85;
  transform:rotate(8deg);
}
.pin-estrelas img{display:block; width:100%; height:auto;}
@media (max-width:760px){
  .pin-estrelas{width:108px; top:10px; right:-24px;}
}
/* Quem pediu menos movimento não perde o pin — perde a inclinação, que é o único efeito
   dele que se lê como enfeite fora do lugar quando o desenho já está reduzido. */
@media (prefers-reduced-motion:reduce){
  .pin-estrelas{transform:none;}
}

/* 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. */
#view-product .prova-faixa,
#view-parto .prova-faixa{
  position:relative;
  background:transparent;
  padding:34px 30px 30px;
  margin:0 -32px;
}
@media (max-width:700px){
  #view-product .prova-faixa,
  #view-parto .prova-faixa{margin:0 -18px; padding:26px 18px 22px;}
}
/* DENTRO DA FAIXA O PIN MUDA DE CANTO, e isso foi decidido OLHANDO a tela montada.
   No alto ele não funciona aqui: a primeira coisa da faixa é a nota da Shelly, um cartão
   branco de largura inteira, e o pin ficava ATRÁS dela — sobrava um risco amarelo de 8 px
   no topo, que lê como defeito e não como enfeite. Pô-lo na frente resolveria o
   escondido e criaria pior: estrela em cima de texto de venda.
   No pé há espaço de verdade — o respiro da faixa embaixo da fileira —, e ele encosta ali
   como um selo no fim da página. E não sangra: o bloco é arredondado, e corte na curva do
   canto lê como imagem escapando do cartão. */
#view-product .prova-faixa .pin-estrelas,
#view-parto .prova-faixa .pin-estrelas{top:auto; bottom:-6px; right:10px; width:104px; opacity:0.7;}
@media (max-width:700px){
  #view-product .prova-faixa .pin-estrelas,
  #view-parto .prova-faixa .pin-estrelas{bottom:-4px; right:6px; width:74px;}
}
/* 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;}
.prova-faixa .pp-social-titulo,
.prova-faixa .prova-titulo,
.prova-faixa .nota-shelly{position:relative; z-index:1;}
.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. */
.test-card{
  flex:0 0 300px; 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;
  filter:blur(calc((1 - var(--visto, 1)) * 6px));
  /* 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. */
  box-shadow:0 calc(var(--visto, 1) * 8px) calc(var(--visto, 1) * 22px)
             rgba(36,29,18, calc(var(--visto, 1) * 0.09));
  /* 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 — 03/09/2026
   ==========================================================================
   Pedido da dona, em dois tempos no mesmo dia: primeiro "acho melhor ter setas discretas
   para ir e voltar os cards", depois "seta embaixo dos depoimentos p n ficar tampando em
   cima".

   ELAS SÃO A `.row-arrows` DA PRATELEIRA, e não um botão novo: o desenho, o passo de um
   cartão e o `rolarUmCartao` já existiam desde 26/08. Um segundo par de setas no site seria
   o mesmo erro que o carrossel copiado teria sido — dois vocabulários para a mesma ideia, e
   um deles fica sem manutenção.

   MAS AQUI ELAS NÃO FICAM POR CIMA, e é o que as separa das da prateleira. A primeira versão
   destas copiou a sobreposição de lá e a dona vetou olhando a tela: sobre um cartão de
   produto a seta cobre uma capa; sobre um depoimento ela cobre A CITAÇÃO, que é a única
   coisa que a seção existe para deixar ler. Embaixo, centradas, elas continuam dizendo "ir e
   voltar" sem tapar palavra nenhuma — e o problema todo de empilhamento desaparece junto
   (a versão de cima precisava de camada 12 para vencer o cartão em foco, que o carrossel
   manda para a 9).

   ELAS APARECEM NO CELULAR, ao contrário das da prateleira. Lá elas somem no toque porque
   ficam sobre cartões que SÃO botões, e roubariam o toque de quem queria abrir a leitura.
   Embaixo da fileira não há nada debaixo delas, e o print que abriu este pedido é de um
   celular.

   O QUE AS FAZ DISCRETAS é o tamanho — 34 px, contra 44 na prateleira — e a tinta do sinal,
   em `--ink-soft` no lugar do preto do texto. Fora do caminho da leitura, elas não precisam
   de mais nada, e vale registrar o caminho que NÃO deu certo enquanto elas ficavam por cima:
   tentei fazê-las discretas por transparência (papel a 82% com desfoque de fundo) e elas
   SUMIRAM — branco translúcido sobre um cartão branco não tem contorno, e o que sobrava era
   um ‹ solto no meio da citação. Discreto não é invisível, e o lugar certo para a discrição
   é o tamanho e a tinta, não o fundo. Embaixo da fileira a pergunta nem se coloca: o fundo
   ali é a faixa de papel, e um botão branco com anel se lê sobre ela. */
.test-row.encaixe-frouxo, .poster-row.encaixe-frouxo{scroll-snap-type:x proximity;}
.fileira-com-setas > .row-arrows{
  justify-content:center;
  /* O respiro de baixo da fileira é o espaço em que o cartão do meio cresce e a sombra dele
     cai — 44 px que NÃO são margem entre a fileira e o que vem depois. Sem esta subida as
     setas pareceriam pertencer à seção seguinte em vez de à fileira que elas comandam. */
  margin-top:-14px;
}
.fileira-com-setas > .row-arrows button{
  width:34px; height:34px; font-size:15px;
  color:var(--ink-soft);
  border-color:rgba(31,26,18,0.14);
  box-shadow:var(--shadow-1);
}
@media (max-width:680px){
  .fileira-com-setas > .row-arrows button{width:32px; height:32px; font-size:14px;}
}

/* QUEM ACENDE AS SETAS É A FILEIRA, e não a largura da tela: sem depoimento que passe da
   borda não há para onde ir, e seta que não leva a lugar nenhum é enfeite prometendo
   conteúdo. A `tem-mais` é escrita pelo motor que mede exatamente isso.

   ELA NÃO É A `em-carrossel`, E ESSE FOI UM DEFEITO MEU, consertado no mesmo dia em que
   nasceu. Pendurei as setas na `em-carrossel` porque as duas classes vinham da mesma linha
   de código — e com isso as setas SUMIAM para quem liga "Reduzir movimento" no aparelho,
   que é a única condição em que o motor não liga o carrossel. É o contrário do que a
   preferência pede: quem não quer animação continua precisando navegar, e a seta é
   justamente o jeito de ir e voltar SEM arrastar. Agora são duas perguntas separadas — "há
   para onde ir?" acende a seta, "esta pessoa aceita movimento?" acende o carrossel.

   O `~` alcança as setas porque elas são a IRMÃ SEGUINTE da fileira no HTML. É o que
   dispensa o `:has()` aqui: a mesma condição, sem depender de um seletor que um navegador
   antigo derrubaria inteiro — e derrubar este apagaria as setas em vez de mostrá-las
   demais, que é o defeito difícil de ver.

   Estas duas linhas são também o que VENCE a regra da prateleira que esconde toda
   `.row-arrows` no toque: três classes contra uma, em qualquer ordem de arquivo. */
.fileira-com-setas > .row-arrows{display:none;}
.fileira-com-setas > .test-row.tem-mais ~ .row-arrows{display:flex;}

/* 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 `<blockquote>`, 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;}

/* ---------- 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 `<h4>`, 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. */
footer{
  background:var(--ink);
  padding:64px 0 48px; position:relative; overflow:hidden;
}
.footer-grid{display:grid; grid-template-columns:repeat(4,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. */
.footer-pagamentos{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center;
  margin-top:56px; padding-top:26px; border-top:1px solid rgba(255,255,255,0.08);
}
.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:5px 12px; white-space:nowrap;
  display:inline-flex; align-items:center; min-height:34px; box-sizing:border-box;
}
/* O selo com a arte oficial ganha FUNDO CLARO, e isso não é gosto: os manuais de marca
   desenham a arte para fundo claro, e a marca do Apple Pay é preta — sobre o rodapé
   escuro ela desapareceria.
   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:#FFFFFF; border-color:rgba(0,0,0,0.08); padding:5px 10px;}
.selo-pagamento.com-arte img{height:26px; width:auto; max-width:70px; object-fit:contain; display:block;}
.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. */
  .footer-grid{grid-template-columns:repeat(4, auto); justify-content:start; column-gap:64px;}
  .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:flex-end;}
  .footer-fecho .footer-direitos{order:1; margin-top:0; padding-top:0; text-align:left; line-height:1.7;}
}
/* ==========================================================================
   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 — 03/09/2026
   ==========================================================================
   Pedido da dona depois de a página inicial e o resultado grátis ficarem prontos: "as
   páginas de produto precisam passar pelo mesmo reajuste para tablet/pc".

   O QUE ELA VÊ: a linha acima cabe a tela inteira numa coluna de 640 px. Num tablet
   deitado de 1.365 isso é uma tira no meio com 360 px de creme vazio de cada lado, e tudo
   empilhado — capa, as duas fichas de resposta e a ENCOMENDA, que é o que a tela existe
   para a pessoa preencher. Medido antes: 6.042 px de altura, com o formulário nascendo 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 FORMA NOVA é a de qualquer página de produto: o que se LÊ de um lado, o que se PREENCHE
   do outro. A capa e as duas fichas ficam na coluna larga; a encomenda, numa coluna própria
   ao lado. E as duas acabam quase juntas — 1.097 px de leitura contra 1.170 de formulário,
   medido —, o que não é sorte: é o mesmo arranjo que a tela do resultado ganhou hoje, e a
   razão de ele funcionar é a mesma.

   O FORMULÁRIO NÃO É GRUDADO (`sticky`), e isso é decisão medida: ele tem 1.170 px de
   altura e a janela do tablet tem 640. Um bloco grudado MAIOR que a janela pina o topo e
   leva o resto para fora da tela — a pessoa ficaria sem alcançar a forma de pagamento, que
   é o fim do formulário. Grudar só serviria se ele coubesse, e ele não cabe.

   ABAIXO DE 1000 px NADA MUDA: a coluna de 640 é a que o celular e o tablet em pé usam, e é
   a que está aprovada. O limite não é o mesmo 900 do resultado grátis porque aqui as duas
   colunas somam 440 de formulário mais 440 de leitura mais o vão — abaixo disso a leitura
   fica mais estreita que o formulário, e a página parece uma ficha com um apêndice. */
@media (min-width:1000px){
  #view-product > .wrap{
    max-width:1080px; padding:0 32px;
    display:grid; grid-template-columns:minmax(0,1fr) minmax(380px, 440px);
    /* A ÚLTIMA LINHA É A FOLGA, e ela é o conserto de 05/09/2026 — leia o parágrafo do
       `span`, logo abaixo, antes de mexer aqui. As primeiras são as peças da coluna de
       leitura; a última não tem conteúdo nenhum e existe só para receber a sobra de altura
       da encomenda.
       ERAM QUATRO ATÉ 08/09/2026, e viraram três: as duas fichas do produto viraram um
       cartão só, a pedido da dona. A linha que sobrava ficaria vazia e sem função — e vazia
       COM função é a última, que é outra coisa. */
    grid-template-rows:auto auto 1fr;
    column-gap:56px; align-items:start;
  }
  #view-product > .wrap > section.hero{grid-column:1; grid-row:1;}
  /* A FICHA É UMA SÓ DESDE 08/09/2026. O `:nth-of-type(2)` continua sendo ela (a capa é a
     primeira seção da `.wrap`), e a regra da SEGUNDA ficha saiu junto com a segunda ficha —
     ela teria virado uma regra que não alcança nada, do tipo que fica anos num arquivo. */
  #view-product > .wrap > section.ficha-do-produto:nth-of-type(2){grid-column:1; grid-row:2;}
  /* A ENCOMENDA ATRAVESSA AS QUATRO LINHAS, e o `span 4` é o número que importa aqui.
     Ele já foi `span 3`, e o comentário de então dizia a metade certa: sem `span` nenhum a
     encomenda ficaria presa à altura da primeira linha e a grade abriria linhas vazias
     embaixo. Só que com `span 3` o defeito virou do avesso.

     QUANDO UM ITEM ATRAVESSA LINHAS, A ALTURA QUE SOBRA DELE É REPARTIDA ENTRE AS LINHAS
     QUE ELE ATRAVESSA. Enquanto a encomenda mede menos que as três peças da esquerda somadas
     isso quase não aparece — eram 36 px debaixo de cada uma. Quando a pessoa abre a forma de
     pagamento, a encomenda cresce uns 700 px, e os 700 viram 269 px de branco debaixo de cada
     bloco da leitura. A dona fotografou isso em 05/09: "veja os espaços em branco", e o
     recado importante veio junto — "isso não deve se aplicar só a ele, porque todas as
     páginas de mapa estão com mesmo problema". Estavam: é a grade da tela, e a tela é a
     mesma nas 32.

     COM A QUARTA LINHA, A SOBRA TEM PARA ONDE IR. As três primeiras ficam do tamanho do que
     têm dentro, a quarta fica com todo o resto, e os vãos da coluna de leitura vão a ZERO —
     que é exatamente o que o arranjo de uma coluna faz abaixo de 1000 px, o arranjo aprovado:
     lá as seções se encostam e o respiro delas é o de dentro de cada uma. Medido com a forma
     de pagamento aberta: 269 px de vão antes, 0 depois. */
  #view-product > .wrap > #checkout-section{grid-column:2; grid-row:1 / span 3; margin-top:0;}
  /* O que vem depois é do produto INTEIRO, e não de uma coluna: a ponte para a Eletiva e os
     depoimentos.

     E A LINHA DELES É DITA, não deixada por conta do encaixe automático: com a quarta linha
     vazia existindo, o encaixe automático poria a ponte DENTRO dela — a primeira linha em que
     cabe uma faixa de ponta a ponta —, e a folga deixaria de ser folga. Linha 5 e linha 6,
     escritas. (As seções de fecho saíram desta lista em 05/09: elas moram fora do `.wrap`
     agora, porque desenham o próprio fundo e fundo de seção vai de ponta a ponta da janela.) */
  /* A NOTA DA SHELLY OCUPA A QUARTA LINHA — 06/09/2026, a pedido da dona: "esse vazio ao
     lado do pagamento, poderia pôr a citação ajustada ali?".

     A última linha É a folga: ela foi criada em 05/09 para receber a sobra de altura da
     encomenda, e ficava vazia por definição. Pôr a nota nela não desfaz a folga — o `1fr`
     continua absorvendo o que sobrar DEPOIS da nota, e o `align-self:start` mantém a citação
     encostada no alto em vez de esticada pela linha inteira.

     E É ELA, e não outro bloco: a nota é curta, é a voz da Shelly, e o lugar onde a pessoa
     está decidindo pagar é onde a voz de quem escreve a leitura vale mais. */
  /* A LINHA DA FOLGA VOLTOU A SER SÓ FOLGA — 08/09/2026. A nota da Shelly a ocupava desde
     06/09; com a citação removida a pedido da dona, ela fica vazia de novo — e vazia é o
     estado CERTO dela: foi para isso que ela nasceu em 05/09. Ver o parágrafo do `span`,
     acima, antes de pôr qualquer coisa aqui.
     A LINHA DA PONTE ELETIVA (a 5) saiu junto com a seção, no mesmo pedido. */
  /* AS LEITURAS QUE COMBINAM ENTRAM COMO LINHA 6 — 07/09/2026 —, E O PARÁGRAFO ACIMA JÁ
     TINHA AVISADO O QUE ACONTECE SE ALGUÉM ESQUECER DISTO. Eu esqueci, e a régua pegou.

     A seção nasceu sem linha dita, e o encaixe automático fez exatamente o que o comentário
     de 05/09 descreve: pôs a faixa de ponta a ponta na PRIMEIRA linha em que ela cabia —
     a quarta, que é a folga. Dentro da folga, ela virou parte da coluna de leitura que
     recebe a sobra de altura da encomenda, e a `Conferir a tela` mediu o estrago: 675 px de
     descida em 1365x640 e em 1280x800, na tela de produto e na sinastria. É o defeito dos
     "espaços em branco" de 05/09 renascendo por uma seção nova, e nada nesta folha tinha
     mudado — só chegou um irmão a mais.

     Fica o registro do método, porque ele vale mais que a linha: este defeito não aparece
     no celular, e foi no celular que eu conferi a passada inteira. Abaixo de 1000 px não há
     grade nenhuma — as seções empilham e a ordem é a do documento. A régua que o achou abre
     DUAS janelas largas de propósito, e ela existe desde 05/09 pelo mesmo motivo. */
  /* A ESTEIRA DE SUGESTÕES SAIU DA GRADE EM 08/09/2026 — ela mudou-se para depois do fecho
     da página, fora da `.wrap`, a pedido da dona. A regra dela agora está no fim deste
     arquivo, junto do lugar novo. */
  #view-product > .wrap > #p-social{grid-column:1 / -1; grid-row:4;}
  /* A capa deixa de ser centrada quando divide a tela com o formulário: título e frase
     alinhados à esquerda dão a coluna de leitura que a página passou a ter. O emblema
     continua centrado no que lhe cabe — ele é peça, não texto, que é a mesma regra da capa
     da página inicial. */
  /* A CAPA INTEIRA ALINHA PELA MESMA MARGEM — 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".
     ELA ESTAVA VENDO QUATRO ALINHAMENTOS NA MESMA COLUNA. Medido numa janela de 1365: o
     emblema começava em 175 e o título também, mas o sobretítulo saía CENTRADO (uma regra do
     `correcoes-de-colisao.css`, que vem depois desta na cascata e leva um id) e a descrição
     tinha 480 px numa coluna de 520, ou seja, 20 px de recuo de cada lado. Quatro peças, três
     margens diferentes.
     Aqui todas partem da mesma vertical. O SOBRETÍTULO NÃO PODE SER CONSERTADO DAQUI, e a
     primeira tentativa provou: a regra que o centra mora no `correcoes-de-colisao.css`, que é
     colado DEPOIS deste arquivo (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 > .wrap > section.hero{text-align:left;}
  #view-product > .wrap > section.hero .hero-glyph{margin-left:0;}
  #view-product .hero:not(.de-sempre) .lede{margin-left:0; margin-right:auto;}
  #view-product .ficha-do-produto .section-title{text-align:left;}
  /* O título da encomenda alinha com o cartão dela, e não com o meio da coluna: 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 > .section-title{text-align:left;}
}#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 `<section class="hero">` 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 `<li>` que é
   contêiner flex, todo elemento inline vira uma coluna, e uma frase com `<b>` 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;}#view-product .payment-brick-wrap{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; margin-top:16px;
  box-shadow:var(--shadow-3); animation:fadeInUp var(--dur-base) var(--ease-soft) both;
}/* O TÍTULO "FORMA DE PAGAMENTO" TAMBÉM SAI DA SERIFA — 02/09/2026, mesma queixa. Ele é um
   `<h3>`, 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 `<h3>Pagamento</h3>`
   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 `<h3>` "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
   `<h3>` 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;}
#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); box-shadow:0 0 0 3px var(--brass-glow); 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. */
/* (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;}#view-product .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;}
/* O TÍTULO DA FILEIRA, quando ela vem DEPOIS da nota da Shelly — 02/09/2026, quando os
   depoimentos passaram a aparecer nas 32 páginas de produto. O respiro de cima separa os
   dois blocos: sem ele, "Quem já passou pela leitura" cola na assinatura da nota e as duas
   vozes parecem uma só. Quando não há nota, o `:first-child` tira o respiro — senão a
   seção abriria com um vão sem nada acima dele. */
#view-product .prova-titulo{margin-top:34px;}
#view-product .prova-titulo:first-child{margin-top:0;}
/* O RESPIRO MUDOU DE LADO QUANDO A NOTA ENTROU NO MEIO — 03/09/2026.
   A regra acima nasceu para separar a nota da Shelly do título da fileira, e no mesmo dia
   02/09 a linha do Google ("5,0 · 50 avaliações no Google") passou a entrar ENTRE os dois.
   O vão de 34 px continuou onde estava e virou o vão errado: a linha do Google encostava no
   pé do cartão branco, sem um pixel de folga, e sobrava um vazio grande entre ela e o título
   que ela abre. O efeito é o contrário do pedido — a nota lia como legenda do cartão de
   cima em vez de abertura da seção de baixo.
   Os dois números são os que o `.prova-nota` já documenta: 34 px separando os DOIS BLOCOS,
   10 px entre a nota e o título que ela abre.
   OS SELETORES SÃO DE ADJACÊNCIA de propósito. A mesma `.prova-nota` aparece na página
   inicial e na tela do Parto Programado, e nas duas ela é a PRIMEIRA coisa da seção — um
   respiro de cima ali abriria a seção com um vão sem nada acima dele, que é o mesmo defeito
   que o `:first-child` da linha anterior já evita. */
#view-product .prova-nota + .prova-titulo{margin-top:10px;}

/* 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 <details>, e o <summary> 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 <details> 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 entre a
   última leitura e o rodapé. */
/* 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:48px; 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;}
.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;}
.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 `<svg>`. 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 `<li>` que é
   contêiner flex todo elemento inline vira coluna, e uma frase com um `<b>` 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;}
.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;}


/* 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 NÃO ENTRA NA CÓPIA. Ele é um ornamento preso à MARGEM da seção na tela
   de início, que ocupa a largura da janela; dentro da coluna estreita de uma tela de venda
   ele encostaria no texto — e é `aria-hidden`, ou seja, ninguém perde informação com ele
   fora. Some pela mesma razão que a faixa de arte da Metodologia some aqui. */
.secoes-de-sempre .pin-estrelas{display:none;}
/* 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 `<picture>` 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`
   (`<div class="wrap hero-content">`), 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,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.55  0 0 0 0 0.45  0 0 0 0 0.28  0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    }
    #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 <img> 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 <img> 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;}
    #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;}
    #view-horoscope .hor-manchete{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;}      #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 `<canvas>`, 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 <img>, no `horoscopo-por-signo.js`, não precisa de
       `width`/`height`.

       SEM `object-fit`: a caixa é quadrada e as doze pranchas são 240x240 de verdade, então
       não há o que cortar nem o que encaixar. É a diferença para a grade do horóscopo, onde
       as artes recortadas têm proporções diferentes e precisam de `contain`.

       SEM `opacity` MENOR QUE 1 NO ESTADO NORMAL. Esteve em 0,88 por algumas horas, para
       o botão escolhido se destacar — mas estas pinturas já são escuras, e apagá-las mais
       um pouco custava justamente o que elas vieram trazer. Quem diz qual está escolhido
       é o BOTÃO: ele muda de borda e de fundo, como já fazia com o glifo. */
    #view-lunar .lu-signo-arte{
      display:block; width:100%; aspect-ratio:1;
      transition:transform 200ms var(--ease-soft), filter 140ms ease;
    }
    #view-lunar .lu-signo-btn:hover .lu-signo-arte{transform:scale(1.06);}
    #view-lunar .lu-signo-btn.active .lu-signo-arte{filter:brightness(1.12) saturate(1.06);}
    @media (prefers-reduced-motion: reduce){
      #view-lunar .lu-signo-arte{transition:none;}
      #view-lunar .lu-signo-btn:hover .lu-signo-arte{transform:none;}
    }
    /* O `.lu-signo-btn .g` FOI APAGADO DAQUI junto com a troca, e a regra era ESCOPADA
       no `.lu-signo-btn` — por isso apagá-la não alcança mais ninguém. Há outro
       `class="g"` no projeto, na roda de sinastria (`roda-de-sinastria.js:401`), e ele
       fica de fora deste seletor: quem o pinta é o CSS da sinastria, não este.
       O `.lu-signo .zg`, lá na linha 98, também é OUTRA coisa — é o glifo dentro da
       frase "a Lua está em ♈", e continua vivo. */
    /* A CAPA DO SIGNO NA LEITURA DA ABA LUNAR — 31/08/2026, a mesma decisão da aba do
       horóscopo. Aqui a prancha é quadrada e opaca, então não há `object-fit` a fazer:
       ela entra inteira, com o canto arredondado do próprio cartão em volta. */
    #view-lunar .lu-signo-capa{
      display:block; width:100%; max-width:200px; aspect-ratio:1; margin:0 auto 16px;
      border-radius:14px;
      animation:fadeInUp 420ms var(--ease-soft, ease) both;
    }
    @media (prefers-reduced-motion: reduce){
      #view-lunar .lu-signo-capa{animation:none;}
    }
    #view-lunar .lu-signo-btn .n{font-family:var(--fonte-interface); font-size:var(--c-apoio); color:var(--lu-soft); text-align:center; padding:8px 3px 9px; line-height:1.25;}
    #view-lunar .lu-signo-btn.active .n{color:var(--lu-ink); font-weight:600;}

    /* ===== O CALENDÁRIO MENSTRUAL — 01/09/2026 =====
       DUAS CORES NOVAS, E SÓ DUAS. A paleta da aba é azul-marinho, creme e dourado, e a
       dona pediu "tudo no mesmo design". O dourado já é o acento da aba e fica com a
       OVULAÇÃO, que é o dia que importa; o resto precisa de dois tons que não existem aqui
       e não podem existir por gosto:

         · o carmim da menstruação (#C4677E) é o vermelho do sangue levado ao azul deste
           céu — mesma família do cobre do eclipse (#C44A20), puxado para o rosa para as
           duas coisas nunca serem confundidas na mesma tela;
         · o verde-água do período fértil (#6FAE9C) é o complementar do carmim. Ele
           existe para a janela fértil e a menstruação nunca serem lidas como a mesma
           coisa por quem olha rápido — que é como se olha um calendário.

       E NENHUMA DAS DUAS DIZ SOZINHA O QUE É. Cor sobre fundo escuro é o pior lugar para
       pôr informação que só existe na cor: quem não distingue vermelho de verde (8% dos
       homens, e elas também) veria dois cinzas. Por isso a menstruação tem o disco cheio,
       a prevista tem o disco vazado, a ovulação tem anel, os melhores dias têm o ponto
       embaixo e a pílula tem o traço em cima. A cor confirma; a forma informa. */
    #view-lunar{
      --mc-fluxo:#C4677E; --mc-fertil:#6FAE9C;
    }
    #view-lunar .mc-modos{display:flex; gap:8px; margin:4px 0 10px; flex-wrap:wrap;}
    #view-lunar .mc-modo{
      flex:1 1 0; min-width:96px; padding:10px 12px; border-radius:99px; cursor:pointer;
      border:1px solid var(--lu-border); background:transparent; color:var(--lu-cream);
      font-family:inherit; font-size:var(--c-apoio); font-weight:600;
    }
    #view-lunar .mc-modo:hover{border-color:var(--lu-cream); background:rgba(234,224,198,0.06);}
    #view-lunar .mc-modo.ativo{background:var(--lu-gold); border-color:var(--lu-gold); color:#141416;}
    #view-lunar .mc-dica{font-size:var(--c-apoio); color:var(--lu-muted); margin:0 0 16px; line-height:1.6;}

    #view-lunar .mc-grid{gap:8px 4px;}
    /* O dia é um <button> 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,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.38  0 0 0 0 0.37  0 0 0 0 0.35  0 0 0 0.09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
#view-mundial > *{position:relative; z-index:1;}

/* ── O CABEÇALHO ─────────────────────────────────────────────────────────────
   Filete grosso em cima, nome, filete fino embaixo, e a linha de edição entre dois
   filetes. É a anatomia de toda primeira página, e é ela que faz o olho dizer
   "jornal" antes de ler uma palavra. */
/* O RESPIRO É PARTE DO DESENHO — 31/08/2026, a pedido ("traga mais espaçamento").
   Jornal impresso é DENSO no texto e LARGO nas juntas: o que separa a manchete da
   primeira linha, uma seção da seguinte, o cabeçalho do resto. Era essa a folga que
   faltava — o texto estava certo, as juntas é que estavam apertadas. */
#view-mundial .jn-cabeca{border-top:3px solid var(--jn-tinta); padding-top:18px; margin-top:30px;}
#view-mundial .jn-nome{
  font-family:var(--jn-serifa); font-weight:700; text-align:center; color:var(--jn-tinta);
  /* O nome do jornal encolhe com a tela sem quebrar em duas linhas: `clamp` em vez de
     um tamanho fixo com media query, porque a largura em que ele quebraria depende do
     idioma — "World Astrology" é mais curto que "Astrología Mundial". */
  /* O TÍTULO VOLTA A MANDAR — 31/08/2026, terceira mexida no mesmo dia, e desta vez
     com a conta na mão em vez do olho.
     O ERRO ERA DE PROPORÇÃO, não de tamanho: 7,4vw contra 6,2vw da manchete dá razão
     1,19. Uma escada tipográfica se lê a partir de 1,4 entre degraus — abaixo disso os
     dois níveis parecem o MESMO nível, e aí o que decide é o peso visual. E o peso
     estava invertido: o cabeçalho é caixa alta (só altura de maiúscula, uma linha) e a
     manchete é caixa baixa negrito em três linhas. Mesmo com dois pixels a mais, o
     cabeçalho perdia.
     Agora são 10,6vw contra 7,2vw: razão 1,47, e a mesma 1,47 entre a manchete e o
     subtítulo. Escada de degrau constante, que é a norma. */
  font-size:clamp(32px, 10.6vw, 50px); line-height:0.98; letter-spacing:-0.004em;
  margin:0; text-transform:uppercase;
}
/* `text-wrap:balance` reparte as linhas em vez de encher a primeira e deixar uma
   palavra órfã embaixo — o "vive." sozinho que a captura de 320 px mostrou. Onde o
   navegador não conhecer a propriedade, ele a ignora e o lema volta a quebrar como
   antes: nada a perder. Só em texto de UMA A TRÊS linhas, que é onde ela ajuda. */
#view-mundial .jn-lema{
  font-family:var(--jn-serifa); font-style:italic; text-align:center;
  font-size:var(--c-corpo); color:var(--muted); margin:11px 0 17px; text-wrap:balance;
}
#view-mundial .jn-edicao{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border-top:1px solid var(--jn-tinta); border-bottom:1px solid var(--jn-tinta);
  padding:10px 0; font-family:var(--jn-titulo); font-size:var(--c-etiqueta); font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--brass-dark);
}
#view-mundial .jn-edicao b{font-weight:700; color:var(--jn-tinta); letter-spacing:0.1em;}
/* A LUA DA EDIÇÃO — 31/08/2026. `currentColor` de propósito: ela herda o latão da faixa,
   e no dia em que a cor da linha de edição mudar a lua muda junto, sem ninguém lembrar. */
#view-mundial .jn-lua{width:9px; height:9px; flex:none;}
#view-mundial #mu-edicao-periodo{display:flex; align-items:center; gap:6px; min-width:0;}
#view-mundial .jn-lua + .jn-lua{margin-left:-2px;}

/* ── AS EDIÇÕES (as abas) ────────────────────────────────────────────────────
   Não são botões de aplicativo: são a linha de seções de um jornal. Separadas por
   filete vertical, a atual sublinhada com traço grosso. */
/* A FAIXA DE EDITORIAS NÃO QUEBRA EM DUAS LINHAS — 30/08/2026, e isto foi visto numa
   captura de 320 px: com `flex-wrap:wrap`, "HISTÓRIA" caía sozinha embaixo, com o
   filete separador do lado esquerdo pendurado no vazio. Parecia defeito, e era.

   Um jornal não empilha as editorias: ele corre uma faixa só. Então ela ROLA. A quinta
   aba cortada na borda é o próprio aviso de que há mais — melhor do que uma seta, que
   precisaria de espaço e de tradução. A barra de rolagem some porque a faixa tem 40 px
   de altura e uma barra dentro dela cobriria o filete de baixo. */
#view-mundial .mu-tabs{
  display:flex; flex-wrap:nowrap; overflow-x:auto;
  scrollbar-width:none; -ms-overflow-style:none;
  border-bottom:1px solid var(--jn-filete); margin-bottom:32px;
}
#view-mundial .mu-tabs::-webkit-scrollbar{display:none;}
#view-mundial .mu-tab{
  /* `1 0 auto`, e o zero importa: as abas CRESCEM para preencher a faixa quando cabem,
     e nunca ENCOLHEM abaixo da própria palavra — encolher é o que produziria
     "HISTÓRI…" numa faixa que já tem para onde rolar. */
  flex:1 0 auto; white-space:nowrap; background:none; border:none;
  border-bottom:3px solid transparent; margin-bottom:-1px;
  padding:11px 6px; cursor:pointer;
  font-family:var(--jn-titulo); font-size:var(--c-etiqueta); font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--muted);
  transition:color 140ms ease, border-color 140ms ease;
}
#view-mundial .mu-tab + .mu-tab{border-left:1px solid var(--jn-filete-fraco);}
#view-mundial .mu-tab:hover{color:var(--brass-dark);}
#view-mundial .mu-tab.is-ativa{color:var(--jn-tinta); border-bottom-color:var(--jn-tinta);}

#view-mundial .mu-loading, #view-mundial .mu-erro{
  text-align:center; color:var(--muted); padding:28px 0;
  font-family:var(--jn-serifa); font-style:italic; font-size:var(--c-corpo);
}

/* ── A MATÉRIA ───────────────────────────────────────────────────────────────
   Régua no lugar do cartão. Cartão com sombra é vocabulário de aplicativo; o que
   separa uma matéria da seguinte, num jornal, é um filete. */
#view-mundial .mu-secao{border-top:1px solid var(--jn-filete); padding:28px 0 10px; margin:0;}
#view-mundial .mu-secao:first-child{border-top:none; padding-top:0;}
/* A RETRANCA É UM `<h3>`, E NÃO UM `<p>` — 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 `<p>`, 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 `<p>` QUE HOUVESSE ali; no "agora" e na retrospectiva
   esse primeiro `<p>` é 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 `<li>`, 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 `<ol>` 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,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.55  0 0 0 0 0.45  0 0 0 0 0.28  0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    }
    #view-assinante::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-assinante > *{position:relative; z-index:1;}
    #view-assinante .as-eyebrow,
    #view-produto-fechado .as-eyebrow{display:flex; align-items:center; justify-content:center; gap:10px;}

    #view-assinante .as-estado{text-align:center; color:var(--muted,#8B8172); padding:44px 0; line-height:1.6; font-size:var(--c-corpo);}
    #view-assinante .as-carregando{color:var(--muted,#8B8172); font-style:italic;}

    /* ---------- cabeçalho: a saudação e a frase do dia ---------- */
    /* A ARTE DO SIGNO SOLAR AO LADO DO "OLÁ" — 31/08/2026, a pedido.
       Ela nasceu ATRÁS do nome, em marca d'água a 0,26 de opacidade e com máscara para
       morrer antes da frase do dia. Aquilo resolvia o contraste, mas escondia a aquarela:
       a pedido da dona do projeto, a arte saiu do fundo e veio para o lado, inteira.
       AO LADO O CONTRASTE DEIXA DE SER PROBLEMA: nada de texto passa por cima da arte,
       então não há mais opacidade baixa, nem máscara, nem os 84 px de respiro que só
       existiam para dar lugar à marca d'água. A sombra é a mesma que a capa do signo já
       usa na aba do Horóscopo — a arte lê como peça da tela, não como adesivo colado.
       A CHAVE CONTINUA VINDO DO SERVIDOR: o navegador não sabe o signo solar de ninguém,
       isso vive no mapa natal em cache no `profiles`. Sem signo, o `assinante-o-dia.js`
       deixa a imagem `hidden` e a saudação fica centrada sozinha, como sempre esteve. */
    #view-assinante .as-topo{text-align:center; margin:26px 0 8px; position:relative;}
    #view-assinante .as-saudacao{
      display:flex; align-items:center; justify-content:center; gap:clamp(10px,3vw,16px);
    }
    #view-assinante .as-capa-arte{
      flex:none; width:clamp(74px,21vw,104px); height:auto; object-fit:contain;
      filter:drop-shadow(0 3px 8px rgba(80,58,26,0.18));
    }
    #view-assinante .as-capa-arte[hidden]{display:none;}
    #view-assinante .as-ola{
      font-family:var(--fonte-titulo); font-weight:600; font-size:clamp(32px,9vw,40px); line-height:1.12;
      color:var(--ink,#1B160F); margin:0; letter-spacing:-0.02em;
    }
    /* A CURSIVA FOI TESTADA E RECUSADA — 29/08/2026. A frase do dia chegou a subir em
       'Dancing Script', a pedido da dona do projeto, e ela viu e preferiu o itálico que já
       estava aqui. Fica anotado para ninguém propor de novo achando que é ideia nova: a
       letra cursiva foi vista nesta frase e não é o que a tela quer. */
    #view-assinante .as-frase{
      font-family:var(--fonte-titulo); font-style:italic; font-size:var(--c-citacao); line-height:1.5;
      color:var(--brass-dark,#7E5A28); max-width:520px; margin:14px auto 0; text-wrap:pretty;
    }
    #view-assinante .as-data{
      font-size:var(--c-apoio); letter-spacing:0.12em; text-transform:uppercase;
      color:var(--muted,#8B8172); font-weight:700; margin-top:14px;
    }

    /* ---------- barra de atalhos para as seções ---------- */
    #view-assinante .as-atalhos{
      display:flex; gap:7px; overflow-x:auto; padding:16px 2px 4px; margin-bottom:6px;
      scrollbar-width:none; justify-content:flex-start;
    }
    #view-assinante .as-atalhos::-webkit-scrollbar{display:none;}
    #view-assinante .as-atalhos a{
      flex:none; font-size:var(--c-apoio); font-weight:600; white-space:nowrap;
      padding:7px 13px; border-radius:999px; color:var(--brass-dark,#7E5A28);
      background:rgba(255,255,255,0.55); border:1px solid rgba(171,124,59,0.3);
    }
    #view-assinante .as-atalhos a:hover{background:var(--brass,#AB7C3B); color:#fff; border-color:var(--brass,#AB7C3B);}

    /* ---------- seções ---------- */
    #view-assinante .as-sec{scroll-margin-top:18px; margin-top:38px;}
    #view-assinante .as-sec-titulo{
      display:flex; align-items:baseline; font-family:var(--fonte-titulo); font-weight:600;
      font-size:clamp(24px,6.5vw,28px); color:var(--ink,#1B160F); margin:0 0 16px; letter-spacing:-0.02em;
    }
    #view-assinante .as-card{
      background:rgba(255,255,255,0.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
      border:1px solid rgba(171,124,59,0.28); border-radius:16px; padding:24px;
      box-shadow:0 10px 26px rgba(110,78,35,0.1); margin-bottom:14px;
    }
    #view-assinante .as-card h3{font-family:var(--fonte-titulo); font-weight:600; font-size:var(--c-lede); color:#1B160F; margin:0 0 12px;}
    #view-assinante .as-periodo{
      font-size:var(--c-nota); letter-spacing:0.11em; text-transform:uppercase;
      color:var(--brass-dark,#7E5A28); font-weight:700; margin-bottom:9px;
    }
    #view-assinante .as-manchete{
      font-family:var(--fonte-titulo); font-size:var(--t-bloco); line-height:1.4; color:var(--ink,#1B160F);
      margin:0 0 16px; font-weight:600; letter-spacing:-0.012em;  /* 600 como todo título — 01/09/2026 */
    }
    #view-assinante .as-manchete:empty{display:none;}
    #view-assinante .as-texto p{font-size:var(--c-lede); line-height:1.75; color:var(--ink-soft,#423C33); margin:0 0 15px;}
    #view-assinante .as-texto p:last-child{margin-bottom:0;}
    #view-assinante .as-linhas{list-style:none; margin:0; padding:0;}
    #view-assinante .as-linhas li{
      font-size:var(--c-apoio); color:var(--muted,#8B8172); padding:9px 0;
      border-bottom:1px solid var(--border-soft,#F0E9D6); line-height:1.5;
    }
    #view-assinante .as-linhas li:last-child{border-bottom:none;}
    #view-assinante .tom-tenso{color:var(--rust,#95402D);}
    #view-assinante .tom-harmonico{color:var(--success,#2E7D4F);}
    #view-assinante .as-link-saida{
      display:inline-block; margin-top:16px; font-size:var(--c-apoio); font-weight:600; color:var(--brass-dark,#7E5A28);
    }
    #view-assinante .as-link-saida:hover{text-decoration:underline;}

    /* ---------- seção da Lua: cartão noturno, para não perder a linguagem da Aba Lunar ---------- */
    #view-assinante .as-card-noite{
      background:linear-gradient(180deg, rgba(24,24,27,0.94) 0%, rgba(12,12,14,0.97) 100%);
      border-color:rgba(234,224,198,0.2); color:#EAE0C6;
      box-shadow:0 18px 44px rgba(0,0,0,0.3), inset 0 1px 0 rgba(234,224,198,0.08);
    }
    #view-assinante .as-card-noite h3{color:#EAE0C6;}
    #view-assinante .as-lua-fase{font-family:var(--fonte-titulo); font-size:21px; font-weight:600; color:#F3EAD3;}
    #view-assinante .as-lua-signo{display:block; font-size:var(--c-apoio); color:rgba(234,224,198,0.72); margin-top:5px;}
    #view-assinante .as-lua-signo b{color:#F3EAD3; font-weight:600;}
    #view-assinante .zg{font-family:'Noto Sans Symbols','Noto Sans Symbols 2','Segoe UI Symbol',sans-serif;}
    #view-assinante .as-ativa{list-style:none; margin:18px 0 0; padding:0;}
    #view-assinante .as-ativa li{
      display:flex; align-items:baseline; gap:10px; padding:9px 0; font-size:var(--c-corpo);
      color:rgba(234,224,198,0.82); border-bottom:1px solid rgba(234,224,198,0.1); line-height:1.5;
    }
    #view-assinante .as-ativa li:last-child{border-bottom:none;}
    #view-assinante .as-ativa li::before{content:"\263D\FE0E"; color:rgba(234,224,198,0.55); font-size:var(--c-apoio);}
    #view-assinante .as-ativa b{color:#F3EAD3; font-weight:600;}
    #view-assinante .as-card-noite .tom-tenso{color:#E39C86;}
    #view-assinante .as-card-noite .tom-harmonico{color:#9FCBA6;}
    #view-assinante .as-lua-barra{height:5px; border-radius:99px; background:rgba(234,224,198,0.14); overflow:hidden; margin-top:8px;}
    #view-assinante .as-lua-barra i{display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#B9975B,#F3EAD3); transition:width 700ms ease;}
    #view-assinante .as-lua-int{display:flex; justify-content:space-between; font-size:var(--c-nota); letter-spacing:0.08em; text-transform:uppercase; color:rgba(234,224,198,0.6); margin-top:18px; font-weight:700;}
    #view-assinante .as-lua-influencia{font-size:var(--c-corpo); line-height:1.7; color:rgba(234,224,198,0.82); margin:18px 0 0;}
    #view-assinante .as-card-noite .as-link-saida{color:#DCC894;}
    #view-assinante .as-card-noite .as-carregando{color:rgba(234,224,198,0.6);}
    #view-assinante .as-revolucao{
      background:linear-gradient(155deg,var(--midnight,#141019),#5C4222); color:#F1E4C8; border:none;
    }
    #view-assinante .as-revolucao h3{color:#F1E4C8; opacity:.8;}
    #view-assinante .as-revolucao .grande{font-size:28px; font-weight:700; line-height:1.15; margin:4px 0 6px; font-family:var(--fonte-titulo);}
    #view-assinante .as-revolucao p{font-size:var(--c-apoio); opacity:.86; margin:0; line-height:1.55;}

    /* ---------- calendário do mês (mesmo desenho que vivia na aba Hoje) ---------- */
    /* O cabeçalho com as duas setas. O `h3` fica no meio e cresce; as setas têm largura
       fixa para o título não pular de lugar quando o nome do mês muda de tamanho
       ("maio" e "setembro" na mesma coluna). */
    #view-assinante .cal-cabeca{display:flex; align-items:center; gap:8px; margin-bottom:2px;}
    #view-assinante .cal-cabeca h3{flex:1; text-align:center; margin:0;}
    #view-assinante .cal-seta{
      flex:none; width:34px; height:34px; border-radius:50%; cursor:pointer;
      border:1px solid rgba(171,124,59,0.3); background:rgba(255,255,255,0.5);
      color:var(--brass-dark,#7E5A28); font-size:19px; line-height:1; font-family:var(--fonte-interface);
      display:flex; align-items:center; justify-content:center;
      transition:background 160ms ease, border-color 160ms ease, opacity 160ms ease;
    }
    #view-assinante .cal-seta:hover:not(:disabled){background:var(--brass-light,#F1E4C8); border-color:rgba(171,124,59,0.6);}
    /* Desabilitada e VISÍVEL: seta que some faz a linha do título saltar de lado no
       último mês da faixa, e quem viu a seta antes acha que o app quebrou. */
    #view-assinante .cal-seta:disabled{opacity:0.3; cursor:default;}
    #view-assinante .cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:4px;}
    #view-assinante .cal-dow{font-size:var(--c-etiqueta); text-transform:uppercase; letter-spacing:0.06em; color:var(--muted,#8B8172); text-align:center; padding-bottom:4px;}
    #view-assinante .cal-dia{aspect-ratio:1; border-radius:var(--radius-sm,8px); display:flex; align-items:center; justify-content:center;
      font-size:var(--c-apoio); background:var(--card-alt,#FBF6EA); color:var(--ink-soft,#423C33); border:1px solid transparent; position:relative;}
    #view-assinante .cal-dia.vazio{background:transparent;}
    #view-assinante .cal-dia.forte{font-weight:700; border-color:var(--brass,#AB7C3B); background:var(--brass-light,#F1E4C8); color:var(--brass-dark,#7E5A28);}
    #view-assinante .cal-dia.hoje{outline:2px solid var(--ink,#1B160F); outline-offset:1px;}
    #view-assinante .cal-dia .ponto{position:absolute; bottom:5px; width:4px; height:4px; border-radius:50%;}
    #view-assinante .cal-dia .ponto.tenso{background:#A8462E;}
    #view-assinante .cal-dia .ponto.harmonico{background:#4A7C4E;}
    #view-assinante .cal-legenda{display:flex; gap:16px; flex-wrap:wrap; font-size:var(--c-nota); color:var(--muted,#8F8676); margin-top:14px; justify-content:center;}
    #view-assinante .cal-legenda i{display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px;}
    #view-assinante .melhores .cat{padding:13px 0; border-bottom:1px solid var(--border-soft,#F0E9D6);}
    #view-assinante .melhores .cat:last-child{border-bottom:none; padding-bottom:0;}
    #view-assinante .melhores .cat-nome{font-size:var(--c-apoio); color:var(--ink-soft,#423C33); margin-bottom:8px;}
    #view-assinante .melhores .chips{display:flex; gap:7px; flex-wrap:wrap;}
    #view-assinante .melhores .chip{background:var(--brass-light,#F1E4C8); color:var(--brass-dark,#7E5A28);
      border-radius:var(--radius-sm,7px); padding:6px 11px; font-size:var(--c-apoio); font-weight:600;}
    #view-assinante .ciclos li{list-style:none; padding:13px 0; border-bottom:1px solid var(--border-soft,#F0E9D6);}
    #view-assinante .ciclos li:last-child{border-bottom:none; padding-bottom:0;}
    #view-assinante .ciclos .topo{display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
    #view-assinante .ciclos .nome{font-size:var(--c-corpo); font-weight:600; color:var(--ink,#1B160F);}
    #view-assinante .ciclos .quando{font-size:var(--c-apoio); color:var(--brass-dark,#7E5A28); font-weight:600; white-space:nowrap;}
    #view-assinante .ciclos .desc{font-size:var(--c-apoio); color:var(--muted,#8B8172); margin-top:3px; line-height:1.45;}

    /* ---------- trânsitos: prévia que abre ao toque ---------- */
    #view-assinante .as-tr{
      background:rgba(255,255,255,0.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
      border:1px solid rgba(171,124,59,0.28); border-radius:14px; margin-bottom:10px; overflow:hidden;
      transition:border-color 160ms ease, box-shadow 160ms ease;
    }
    #view-assinante .as-tr:hover{border-color:rgba(171,124,59,0.5);}
    #view-assinante .as-tr[data-aberto="1"]{box-shadow:0 10px 26px rgba(110,78,35,0.12); border-color:rgba(171,124,59,0.5);}
    #view-assinante .as-tr-btn{
      width:100%; display:block; text-align:left; background:none; border:none; padding:18px 20px; cursor:pointer; font:inherit;
    }
    #view-assinante .as-tr-topo{display:flex; align-items:flex-start; justify-content:space-between; gap:12px;}
    #view-assinante .as-tr-nome{
      font-family:var(--fonte-titulo); font-size:var(--c-lede); font-weight:600; color:var(--ink,#1B160F);
      line-height:1.35; letter-spacing:-0.01em;
    }
    #view-assinante .as-tr-quando{
      flex:none; font-size:var(--c-etiqueta); font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
      color:var(--brass-dark,#7E5A28); background:var(--brass-light,#F1E4C8);
      border-radius:999px; padding:5px 10px; white-space:nowrap;
    }
    #view-assinante .as-tr-resumo{display:block; font-size:var(--c-corpo); line-height:1.6; color:var(--ink-soft,#423C33); margin:10px 0 0;}
    #view-assinante .as-tr-mais{
      display:inline-flex; align-items:center; gap:6px; margin-top:12px;
      font-size:var(--c-nota); font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--brass,#AB7C3B);
    }
    #view-assinante .as-tr-mais::after{content:"\25BE"; font-size:var(--c-etiqueta); transition:transform 180ms ease;}
    #view-assinante .as-tr[data-aberto="1"] .as-tr-mais::after{transform:rotate(180deg);}
    #view-assinante .as-tr-corpo{padding:0 20px 20px; border-top:1px solid var(--border-soft,#F0E9D6); margin-top:2px;}
    #view-assinante .as-tr-corpo p{font-size:var(--c-corpo); line-height:1.72; color:var(--ink-soft,#423C33); margin:15px 0 0;}
    #view-assinante .as-tr-corpo p.as-tr-nota{font-size:var(--c-apoio); color:var(--muted,#8B8172); font-style:italic; line-height:1.6;}

    /* ---------- push ---------- */
    #view-assinante .hoje-push{margin-top:14px; background:var(--brass-light,#F1E4C8); border-radius:var(--radius-md,12px); padding:22px; text-align:center;}
    #view-assinante .hoje-push h4{font-size:var(--c-corpo); margin:0 0 6px;}
    #view-assinante .hoje-push p{font-size:var(--c-apoio); color:var(--ink-soft,#423C33); margin:0 0 14px;}
    #view-assinante .hoje-push select{padding:9px 12px; border:1px solid var(--border,#E7DCBE); border-radius:var(--radius-sm,7px); font-size:14px; margin-right:8px; background:#fff;}
    #view-assinante .hoje-ios{font-size:var(--c-apoio); color:var(--ink-soft,#423C33); background:#fff; border:1px dashed var(--brass,#AB7C3B); border-radius:var(--radius-md,10px); padding:14px; margin-top:12px; text-align:left;}

    /* ---------- apresentação para quem ainda não assina ---------- */
    #view-produto-fechado .as-landing-titulo{
      font-family:var(--fonte-titulo); font-weight:600; font-size:var(--t-secao); line-height:1.2;
      color:var(--ink,#1B160F); margin:12px 0 0; letter-spacing:-0.018em;
    }
    #view-produto-fechado .as-landing-sub{
      font-size:var(--c-lede); line-height:1.7; color:var(--ink-soft,#423C33);
      max-width:540px; margin:16px auto 0; text-wrap:pretty;
    }
    #view-produto-fechado .as-landing-lista{list-style:none; margin:30px 0 0; padding:0;}
    #view-produto-fechado .as-landing-lista li{
      display:flex; gap:16px; align-items:flex-start; padding:18px 0;
      border-bottom:1px solid var(--border-soft,#F0E9D6);
    }
    #view-produto-fechado .as-landing-lista li:last-child{border-bottom:none;}
    /* O DISCO NUMERADO VIROU PONTO — 28/08/2026.
       Os seis itens desta lista não são passos: ninguém faz o 1 para depois fazer o 2. O
       número dizia uma ordem que não existe, e a mesma numeração aparecia de novo nos
       títulos das seções logo abaixo. O ponto mantém o recuo e o ritmo da lista sem
       prometer sequência — e por isso a lista deixou de ser `<ol>` e virou `<ul>`. */
    #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 `<details>` 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 — 06/09/2026
       ==========================================================================
       Queixa da dona, com três fotos do tablet deitado: "as páginas dos produtos de
       astrologia eletiva não seguem o padrão do restante dos produtos".

       O QUE ELA VIA: a linha acima cabe a tela inteira numa coluna de 760 px. Num tablet
       deitado de 1.365 isso é uma tira no meio com 300 px de creme vazio de cada lado, e
       tudo empilhado — inclusive a ENCOMENDA, que é o que a tela existe para a pessoa
       preencher. Medido antes numa janela de 1280: a página do objetivo tinha 5.112 px de
       altura e a do parto 8.182, com a forma de pagamento no fim da rolagem.

       AS 32 PÁGINAS DE PRODUTO GANHARAM ESTA FORMA EM 03/09 e estas duas ficaram de fora,
       de propósito: "são assistentes em passos, de 760 px, onde se lê, preenche e paga
       NESTA ORDEM; partir em duas colunas quebraria a ordem de leitura, que é o que faz
       elas funcionarem". O argumento era verdade e deixou de ser: o parto perdeu o passo
       do meio em 02/09 e o objetivo eletivo perdeu os dois em 06/09. Sem passos, o que
       sobra é uma página de venda como as outras 32 — o que se LÊ de um lado, o que se
       PREENCHE do outro.

       QUEM SEGURA CADA COLUNA é um bloco só (`.el-leitura` e `.el-encomenda`), e não a
       colocação peça por peça da tela de produto. A diferença importa: lá cada seção tem
       a sua linha escrita na grade, e uma peça nova que ninguém colocasse cairia na linha
       errada — foi o que obrigou a escrever `grid-row:5` e `grid-row:6` à mão para a
       ponte e os depoimentos. Aqui as duas colunas são dois itens, e peça nova dentro de
       qualquer uma delas entra no lugar certo sem ninguém lembrar de nada.

       E É POR ISSO QUE A LEITURA NÃO SE MEXE quando a encomenda cresce: não há item
       atravessando linha nenhuma, então não há altura sobrando para ser repartida — o
       defeito dos 269 px de branco que a dona fotografou em 05/09 na tela de produto não
       tem como nascer aqui.

       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 de antes. O
       limite é o mesmo da tela de produto, e pelo mesmo motivo — as duas colunas somam
       440 de encomenda mais 440 de leitura mais o vão.

       O `.el-venda` marca a coluna da compra, e ele existe porque o parto tem DUAS
       `.el-wrap`: a da página e a dos depoimentos, logo abaixo. 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), e só a da compra vira grade. */
    @media (min-width:1000px){
      #view-eletiva-objetivo > .el-wrap,
      #view-parto > .el-wrap{max-width:1080px; padding:0 32px;}
      #view-eletiva-objetivo > .el-wrap.el-venda,
      #view-parto > .el-wrap.el-venda{
        display:grid; grid-template-columns:minmax(0,1fr) minmax(380px,440px);
        column-gap:56px; align-items:start;}
      /* A capa deixa de ser centrada quando divide a tela com a encomenda, pela mesma
         razão da tela de produto: título e frase alinhados à esquerda dão a coluna de
         leitura que a página passou a ter. O emblema continua centrado no que lhe cabe —
         ele é peça, não texto. */
      #view-eletiva-objetivo .el-venda .elo-capa,
      #view-parto .el-venda .elo-capa{text-align:left; padding-top:26px;}
      #view-eletiva-objetivo .el-venda .elo-capa .elo-glifo,
      #view-parto .el-venda .elo-capa .elo-glifo{margin-left:0;}
      #view-eletiva-objetivo .el-venda .elo-capa .eyebrow,
      #view-parto .el-venda .elo-capa .eyebrow{justify-content:flex-start;}
      /* O último bloco de cada coluna não precisa do vão de baixo: ele já é o fim da
         coluna, e 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;}
    #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 `<li>` para pôr a bolinha ao lado do
       texto, e num contêiner flex CADA ELEMENTO INLINE VIRA UM ITEM PRÓPRIO: o `<b>` do
       meio da frase virava uma coluna, e os pedaços de texto em volta viravam outras duas.
       Medido no item "As <b>três melhores janelas</b> 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 `<b>` 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 `<li>` 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:48px; line-height:48px; 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 `<br>`: um corte escrito à mão acerta numa largura de tela e erra em todas
       as outras — e o mesmo título tem de caber num iPhone de 375 px e num monitor. */
    #view-parto .elo-capa h2{text-wrap:balance;}

    /* MAIS RESPIRO ENTRE OS PARÁGRAFOS DOS BLOCOS — 02/09/2026: "a aba Como funciona
       precisa ter mais espaçamento entre parágrafos".
       Os `<p>` 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. Ele é um `h3` como os títulos dos blocos desta
       tela e usa o mesmo degrau, para a fileira pertencer à página em vez de parecer um
       bloco importado da home. A fileira em si (`.test-row`) vem pronta do
       `metodo-testemunhos-faq-e-rodape.css` — aqui não se redesenha nada dela. */
    #view-parto .pp-social-titulo{font-size:var(--c-lede); margin:28px 0 12px;}

    /* 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. */
/* ================= 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 <details> 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:48px; ... }

   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;
}

/* ---- 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. RESPIRO ENTRE AS OPÇÕES, E A BOLINHA AO LADO DO NOME ---- */
#paymentBrick_container label, #paymentBrick_container [role="radio"], #paymentBrick_container [role="radiogroup"] > *,
#elo-brick label, #elo-brick [role="radio"], #elo-brick [role="radiogroup"] > *,
#pp-brick label, #pp-brick [role="radio"], #pp-brick [role="radiogroup"] > *{
  padding-top:4px; padding-bottom:4px;
}
#paymentBrick_container input[type="radio"],
#elo-brick input[type="radio"],
#pp-brick input[type="radio"]{margin-right:10px;}

/* ---- 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;}