/* ============================================================
   REVELARIUM — Numerologia

   Carrega depois de /style.css, que traz as variáveis de cor, a
   tipografia, o cabeçalho e o rodapé. Nada de paleta é redeclarado
   aqui (BRIEFING 7).

   Mobile-first, um único ponto de quebra em 720px.
   ============================================================ */

/* ------------------------------------------------------------
   A COLUNA
   Mesma conta do cabeçalho do site: o conteúdo começa onde começa
   o logo e termina onde termina o menu.
   ------------------------------------------------------------ */
.num-wrap{
  padding-left:max(var(--respiro), calc((100% - var(--medida)) / 2));
  padding-right:max(var(--respiro), calc((100% - var(--medida)) / 2));
}
/* O formulário e o resultado são leitura de perto, não vitrine:
   ficam numa coluna mais estreita, alinhada à esquerda da marca. */
.num-wrap--estreito > *{ max-width:44rem; }

/* ------------------------------------------------------------
   ESTADOS
   Um documento, quatro telas. O `pagina` mostra hero + entrada +
   conteúdo de SEO ao mesmo tempo: é a página completa.
   ------------------------------------------------------------ */
.estado{ display:none; animation:num-entra .24s ease both; }
body[data-estado="pagina"]    .estado-entrada,
body[data-estado="entrada"]   .estado-entrada,
body[data-estado="leitura"]   .estado-leitura,
body[data-estado="resultado"] .estado-resultado{ display:block; }

/* Hero e conteúdo de SEO só existem enquanto a ferramenta não tomou
   a tela. Depois que o cálculo começa, a página é a ferramenta. */
body[data-estado="leitura"] #hero,
body[data-estado="resultado"] #hero,
body[data-estado="leitura"] #conteudo-seo,
body[data-estado="resultado"] #conteudo-seo{ display:none; }

@keyframes num-entra{ from{ opacity:0 } to{ opacity:1 } }

/* ------------------------------------------------------------
   HERO

   POR QUE NÃO TEM max-height AQUI

   A ESPEC pede "hero compacto, máximo 38vh". A tradução literal
   disso é `max-height:38vh` — e foi o que quebrou: altura máxima
   em CSS não comprime conteúdo, ela CORTA. Com o teto ligado, o
   eyebrow subia para trás do cabeçalho fixo e o botão vazava por
   baixo da borda da seção, para dentro do formulário.

   Um bloco fica compacto tendo menos coisa e menos folga, não
   ganhando uma tampa. Os valores abaixo entregam ~44vh em
   360×640, com o formulário começando dentro da primeira dobra —
   que é a razão de o teto existir na ESPEC.

   A IMAGEM AINDA NÃO EXISTE, MAS O LUGAR DELA JÁ ESTÁ MONTADO

   O `background` abaixo segue a técnica de fusão do FUNDAMENTOS 7,
   que existe para a arte não parecer "quadrado colado" no meio da
   página: um degradê do transparente até a cor do fundo por cima da
   imagem, dissolvendo a borda de baixo.

   A camada âmbar no topo é a fonte de luz única da estética da marca
   (FUNDAMENTOS 4). Ela fica com ou sem imagem.

   PARA LIGAR A ARTE quando ela chegar: descomentar a linha do url()
   e mais nada. A ordem das camadas já está certa — em CSS a primeira
   fica por cima, então o degradê precisa vir ANTES do url().
   ------------------------------------------------------------ */
#hero{
  display:flex; align-items:center;
  padding-top:84px; padding-bottom:20px;
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(217,164,65,.10) 0%, rgba(217,164,65,0) 62%),
    linear-gradient(180deg, rgba(14,23,38,.2), rgba(14,23,38,1)),
    /* url("/assets/hero-numerologia.webp") center/cover, */
    linear-gradient(to bottom, var(--azul-abismo), var(--azul-noite));
  border-bottom:1px solid var(--linha);
}
#hero .eyebrow{ margin-bottom:12px; }
#hero h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(26px, 6.4vw, 46px);
  line-height:1.1; letter-spacing:-.01em;
  max-width:none; text-wrap:balance;
}
#hero .hero-sub{
  margin-top:14px; color:var(--ocre-suave);
  font-size:clamp(16px, 4vw, 20px);
}
/* O BOTÃO DO HERO NÃO EXISTE NO CELULAR.

   Ali ele rolaria uns 100px até um formulário que já está na tela —
   um clique que não leva a lugar nenhum. O critério que importa no
   celular é o primeiro campo aparecer sem rolar, e ele aparece.

   A linha "Gratuito. Sem cadastro." fica: ela informa, não navega.

   E sem o botão o bloco volta a ser `block`, não flex: com um único
   filho visível, o flex ainda reservava o espaço dos nós de texto
   entre os elementos e a linha nascia 66px para dentro, desalinhada
   do título. Container flex com um item só não serve para nada. */
#hero .hero-acao{ margin-top:16px; display:block; }
#hero .hero-acao .cta{ display:none; }

/* ------------------------------------------------------------
   FAIXA DE RETORNO

   Discreta de propósito: quem volta não precisa de anúncio, precisa
   de um atalho. Traço âmbar à esquerda, o mesmo sinal que o resto do
   site usa para dizer "este é o caminho principal daqui".
   ------------------------------------------------------------ */
.num-faixa{
  background:var(--azul-card);
  border-left:2px solid var(--ambar);
  border-radius:0 3px 3px 0;
  padding:16px 20px;
  margin-bottom:30px;
}
.num-faixa[hidden]{ display:none; }
.num-faixa-texto{
  font-size:14px; letter-spacing:.04em; color:var(--pergaminho);
  margin-bottom:10px;
}
.num-faixa-acoes{ display:flex; flex-wrap:wrap; gap:10px 20px; }

/* ------------------------------------------------------------
   ENTRADA
   ------------------------------------------------------------ */
#ferramenta{ padding:26px 0 72px; }

/* ESCOPADO POR CLASSE, NÃO POR ID.

   Isto era `#ferramenta h2`. Um ID no seletor ganha de qualquer
   classe: o `.num-cabecalho{text-align:center}` do resultado não
   conseguia centralizar o "O mapa de {nome}", e o título ficava
   alinhado à esquerda dentro de um bloco centrado — sozinho, fora de
   registro com tudo abaixo dele.

   Regra que fica: dentro desta ferramenta, nada de ID no CSS. */
.estado-entrada h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(24px, 5.2vw, 34px);
  text-align:left; margin:0 0 10px;
}
/* Alinhado à esquerda porque o `h2` do style.css centraliza tudo — é
   regra da home, onde h2 é título de seção sozinho no meio da tela.
   Aqui o título abre um bloco de leitura: centrado sobre um subtítulo
   e um texto alinhados à esquerda, ele fica sozinho fora de registro.
   Os blocos 1 e 2 são a exceção e recentralizam logo abaixo. */
.num-bloco h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(24px, 5.2vw, 34px);
  text-align:left; margin:0 0 10px;
}
.num-sub{ color:var(--ocre-suave); margin-bottom:22px; }

.num-form{ display:grid; gap:20px; }
.num-campo{ display:grid; gap:8px; }
.num-campo label{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ambar);
}
.num-campo input,
.num-data select{
  width:100%;
  /* 48px é o alvo de toque mínimo do BRIEFING 7; 16px de fonte é o
     que impede o Safari do iPhone de dar zoom ao focar o campo */
  min-height:48px;
  background:var(--azul-card);
  border:1px solid var(--linha);
  border-radius:3px;
  padding:12px 14px;
  color:var(--pergaminho);
  font-family:var(--sans); font-size:16px; line-height:1.4;
  transition:border-color .2s, background .2s;
}
.num-campo input:focus,
.num-data select:focus{
  outline:none; border-color:var(--ambar); background:#16243B;
}
.num-campo.com-erro input,
.num-campo.com-erro select{ border-color:#B4553F; }

/* Select nativo: só borda, fundo e cor. Não trocamos por componente —
   o nativo é o que funciona bem no celular. */
.num-data{ display:grid; grid-template-columns:1fr 1.4fr 1fr; gap:10px; }
.num-data select{ appearance:none; -webkit-appearance:none; padding-right:10px; }

.num-ajuda{ font-size:13px; color:var(--ocre-suave); line-height:1.5; }
.num-erro{ font-size:13px; color:#D08C78; }
.num-erro:empty{ display:none; }

/* Aviso do nome com uma palavra. Não é erro: é uma pergunta. Por isso
   âmbar e não vermelho. */
.num-aviso{
  background:var(--azul-card);
  border-left:2px solid var(--ambar);
  border-radius:0 3px 3px 0;
  padding:18px 20px;
}
.num-aviso[hidden]{ display:none; }
.num-aviso p{ margin-bottom:14px; }
.num-aviso-acoes{ display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; }
.btn-texto{
  background:none; border:0; cursor:pointer;
  font-family:var(--sans); font-size:14px; letter-spacing:.04em;
  color:var(--ocre-suave); text-decoration:underline; text-underline-offset:3px;
}
.btn-texto:hover{ color:var(--ambar); }
.num-form .cta{ justify-self:start; border:0; cursor:pointer; font-family:var(--sans); }

/* ------------------------------------------------------------
   LEITURA — 2,2s
   ------------------------------------------------------------ */
.estado-leitura{ background:var(--azul-abismo); }
.num-leitura{
  min-height:70vh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:26px; padding:120px var(--respiro) 60px;
  text-align:center;
}
.num-sigilo{ width:min(200px, 52vw); height:auto; color:var(--ambar); }

/* O traço se desenha: a curva inteira é uma máscara deslocada que a
   animação recolhe até zero. 820 é folga sobre o comprimento real do
   path (~808) — se a espiral definitiva for mais longa, aumentar. */
.num-sigilo #sigilo-espiral{ stroke-dasharray:820; stroke-dashoffset:820; }
.num-sigilo.tracando #sigilo-espiral{ animation:num-traco 1.4s ease-in-out forwards; }
.num-sigilo-pontos{ opacity:0; }
.num-sigilo.tracando .num-sigilo-pontos{ animation:num-pontos .6s ease 1.2s forwards; }
@keyframes num-traco { to{ stroke-dashoffset:0 } }
@keyframes num-pontos{ to{ opacity:.9 } }

.num-insumo{
  font-size:13px; letter-spacing:.14em; color:var(--ocre-suave);
  transition:opacity .8s ease;
}
.num-insumo.sumindo{ opacity:0; }
.num-passo{
  font-family:var(--serif); font-size:clamp(19px, 4.4vw, 24px);
  color:var(--pergaminho); min-height:1.6em;
}
.num-passo.entrando{ animation:num-entra .2s ease both; }

/* ------------------------------------------------------------
   RESULTADO
   ------------------------------------------------------------ */
/* O RESULTADO É CENTRADO NA PÁGINA, NÃO NA COLUNA

   O `.num-wrap--estreito` limita os blocos a 44rem. Sem o
   `margin-inline:auto`, esses 44rem começavam na margem esquerda da
   marca e tudo o que estava centrado DENTRO deles caía no meio do
   bloco, não no meio da tela: os números apareciam a 445px numa página
   de 1280, sem estar centrados nem alinhados a nada.

   Com o bloco centrado, o miolo centrado cai no centro de verdade. Os
   blocos 3 a 10, que são texto corrido, herdam a mesma coluna centrada
   e continuam alinhados à esquerda por dentro. */
/* 80px, não 104: a carta é a primeira coisa que a pessoa quer ver
   depois da animação, e não precisa de tanto vazio entre ela e a
   barra do topo. Ainda sobra folga suficiente para a barra fixa não
   encostar nela em nenhuma largura. */
.estado-resultado{ padding-top:80px; }
.estado-resultado .num-wrap--estreito > *{ margin-inline:auto; }
.num-bloco{ margin-bottom:46px; }
.num-bloco[hidden]{ display:none; }

/* ------------------------------------------------------------
   A CARTA — a abertura do resultado

   O cabeçalho e os dois números formam uma composição só, e desde
   22/08/2026 ela vive dentro de um painel: era mais um bloco na
   mesma superfície do texto, e é justamente a peça que a pessoa
   veio ver. Fundo levemente mais claro, fio de contorno e um brilho
   âmbar baixo atrás do sigilo. Nada disso se repete no resto da
   leitura — é o contraste que faz a carta valer.
   ------------------------------------------------------------ */
.num-carta{
  position:relative;
  background:linear-gradient(180deg, rgba(26,39,62,.62), rgba(14,23,38,.30));
  border:1px solid var(--linha);
  border-radius:6px;
  overflow:hidden;
  /* O respiro de cima é menor que o de baixo DE PROPÓSITO. A tinta
     desta carta é toda pesada embaixo (os algarismos grandes, a
     linha, o rótulo do grau) e leve em cima (o título e a data).
     Com folgas iguais o conjunto parecia afundado; tirando 12px de
     cima e devolvendo embaixo, ele pousa no meio óptico. */
  padding:38px clamp(20px, 5vw, 48px) 50px;
  margin-bottom:52px;
}
/* o brilho fica atrás de tudo e não intercepta clique nenhum */
.num-carta::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(58% 52% at 50% 60%, rgba(217,164,65,.12), rgba(217,164,65,0) 72%);
}
.num-carta > *{ position:relative; }
/* dentro da carta quem controla o espaço é o padding dela */
.num-carta .num-bloco{ margin-bottom:0; }

.num-cabecalho,
.num-dois{ text-align:center; }
/* vem depois do `.num-bloco h2` de propósito: mesma especificidade,
   ganha por ordem, e é a exceção que recentraliza a abertura */
.num-cabecalho h2{ text-align:center; margin-bottom:6px; }
.num-nascimento{ color:var(--ocre-suave); font-size:15px; }

/* Os dois números. Cormorant grande, âmbar, com o sigilo entre eles. */
.num-numeros{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(18px, 7vw, 54px);
  margin:32px 0 26px;
}
.num-um{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.num-rotulo{
  font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ocre-suave);
}
/* SOURCE SANS 3 LEVE, NÃO CORMORANT.

   A ESPEC pede Cormorant nos números grandes, mas o "1" da Cormorant
   é uma haste com serifa: a 72px, um Destino 11 lê como o algarismo
   romano II. Número que não se lê derruba a ferramenta inteira, então
   aqui — e só aqui — a fonte é a sem serifa em peso leve, que sustenta
   o tamanho grande sem endurecer. A Cormorant continua em todo o
   resto da página. */
.num-valor{
  font-family:var(--sans); font-weight:300;
  font-size:clamp(56px, 17vw, 72px); line-height:1;
  letter-spacing:-.02em;
  color:var(--pergaminho);
}
/* O reduzido do mestre: menor, discreto, colado. */
.num-valor small{
  font-size:.34em; font-weight:400; color:var(--ocre-suave);
  margin-left:3px; letter-spacing:0;
}
/* É um <img> do arquivo, não SVG inline — por isso a cor não vem de
   currentColor e sim de dentro do próprio arquivo. */
.num-sigilo-mini{ width:clamp(38px, 11vw, 54px); height:auto; opacity:.55; }

/* A distância entre os marcadores É a informação. Eles nascem
   sobrepostos no centro e abrem até a posição do grau — quem olha vê
   a distância acontecer, em vez de encontrar dois pontos parados. */
.num-linha{
  position:relative; height:1px;
  background:var(--linha);
  max-width:22rem; margin:0 auto;
}
.num-marcador{
  position:absolute; top:50%;
  width:9px; height:9px; margin:-4px 0 0 -4px;
  background:var(--ambar); border-radius:50%;
  transition:left .6s cubic-bezier(.2,.7,.2,1);
}
.num-grau{
  text-align:center; margin-top:18px;
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ambar);
}

/* ------------------------------------------------------------
   BLOCOS 3 A 10 — o texto do resultado

   Do bloco 3 em diante é leitura, não vitrine: alinhado à esquerda
   dentro da coluna centrada, com respiro generoso entre blocos. O
   briefing pede pelo menos 40px de separação; aqui são 46 do
   .num-bloco mais o espaço do próprio título.
   ------------------------------------------------------------ */
.num-bloco p{ color:rgba(234,224,203,.84); margin-bottom:18px; }
.num-bloco p:last-child{ margin-bottom:0; }

/* subtítulo fixo de cada bloco: menor, ocre, logo abaixo do título */
.num-sub-bloco{
  color:var(--ocre-suave); font-size:15px;
  margin:-2px 0 20px !important;
}

/* rótulo interno — "A sombra do 7", "Coerência", "A base: 2" */
.num-rotulo-bloco{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ambar); margin:30px 0 10px !important;
}

/* a linha de abertura do mestre, antes da essência */
.num-abertura{
  font-family:var(--serif); font-size:clamp(18px,4vw,21px);
  color:var(--pergaminho); margin-bottom:16px !important;
}

/* a frase de direção do atrito: quem pede e quem quer */
.num-direcao{
  font-family:var(--serif); font-size:clamp(19px,4.2vw,22px);
  line-height:1.4; color:var(--pergaminho);
  margin:0 0 22px !important;
}

/* ------------------------------------------------------------
   OS BLOCOS DE LEITURA — capítulos, não um texto só

   Pedido do Ediberto (22/08/2026): o resultado é longo e precisava
   de divisões mais perceptíveis. A resposta é editorial, não
   decorativa: um fio de largura inteira abre cada bloco, o respiro
   acima dele é maior que o de dentro, e o título vem em âmbar.

   Três sinais na mesma direção — linha, espaço e cor — fazem a
   pessoa ver "começou outro assunto" sem precisar ler para
   descobrir. Não viraram caixas de propósito: a carta lá em cima e
   a captura lá embaixo são as duas únicas caixas da tela, e é o
   contraste com o texto corrido que faz as duas valerem.
   ------------------------------------------------------------ */
.num-bloco--leitura{
  border-top:1px solid var(--linha);
  padding-top:36px;
  margin-bottom:54px;
}
/* O título inteiro em âmbar, não só o número: é o que marca o
   começo do capítulo à distância, de olho passando pela página. */
.num-bloco--leitura h2{ color:var(--ambar); }

/* as duas lentes: "No trabalho — …" e "Nas relações — …" */
.num-lente span{
  font-family:var(--sans); font-size:11px;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--ambar);
}

/* O BLOCO 9 (a ponte para o Diagnóstico) e o seu `.num-ponte` saíram
   em 22/08/2026 — o porquê está no numerologia.js, onde a função era
   chamada. Nada aqui precisa voltar sem aquela decisão ser revista. */

/* ---- BLOCO 10 · a captura ---- */
.num-captura{ border-top:1px solid var(--linha); padding-top:38px; }
/* O compromisso é a peça mais importante do bloco: é o que faz a
   pessoa entregar o e-mail. Caixa em pergaminho translúcido com
   borda âmbar fina, como pede o briefing. */
.num-compromisso{
  background:rgba(234,224,203,.08);
  border:1px solid var(--ambar);
  border-radius:3px;
  padding:16px 20px;
  color:var(--pergaminho) !important;
  margin:22px 0 26px !important;
}
.num-captura-form{ display:grid; gap:16px; max-width:30rem; }
.num-captura-form input[type="email"]{
  width:100%; min-height:48px;
  background:var(--azul-card); border:1px solid var(--linha); border-radius:3px;
  padding:12px 14px; color:var(--pergaminho);
  font-family:var(--sans); font-size:16px;
}
.num-captura-form input[type="email"]:focus{
  outline:none; border-color:var(--ambar); background:#16243B;
}
.num-consent{
  display:flex; gap:10px; align-items:flex-start;
  font-size:14px; color:var(--ocre-suave); line-height:1.5;
}
.num-consent input{ margin-top:3px; accent-color:var(--ambar); flex:0 0 auto; }
.num-captura-form .cta{ justify-self:start; border:0; cursor:pointer; font-family:var(--sans); }
.num-captura-form .cta[disabled]{ opacity:.55; cursor:progress; }
.num-captura-ok[hidden]{ display:none; }
.num-captura-ok-titulo{
  font-family:var(--serif); font-size:24px;
  color:var(--pergaminho) !important; margin-bottom:10px !important;
}

/* ---- rodapé da ferramenta ---- */
.num-rodape-ferramenta{ border-top:1px solid var(--linha); padding-top:30px; }
.num-rodape-ferramenta[hidden]{ display:none; }
.num-acoes{ display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; }
/* o reset de <button> virou `button.btn-outline` no style.css — a
   regra que existia aqui era o que matava o hover */
.num-disclaimer{
  margin-top:24px; font-size:13px; line-height:1.7; color:#8A8370;
}

/* ------------------------------------------------------------
   CONTEÚDO DE SEO

   Entrou em 22/08/2026. Até então os H2 estavam vazios e apagados,
   e a página inteira era noindex por causa disso.
   ------------------------------------------------------------ */
.num-seo{ padding:14px 0 80px; }
.num-seo h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(23px, 4.8vw, 31px);
  text-align:left; color:var(--pergaminho);
  margin:52px 0 16px;
}
.num-seo p{ color:rgba(234,224,203,.84); margin-bottom:18px; }
.num-seo strong{ color:var(--pergaminho); font-weight:600; }

/* Os nove números: lista sem marcador, cada item com âncora própria
   para quando as páginas de significado existirem. */
.num-lista-nove{ list-style:none; margin:0 0 22px; padding:0; }
.num-lista-nove li{
  color:rgba(234,224,203,.84);
  padding:10px 0; border-bottom:1px solid var(--linha);
}
.num-lista-nove li:last-child{ border-bottom:0; }
.num-lista-nove strong{ color:var(--ambar); font-weight:600; }

/* FAQ com <details> nativo. O marcador padrão do navegador sai e
   entra um sinal âmbar que gira ao abrir — o conteúdo já está no
   HTML mesmo fechado, que é o que o buscador lê. */
.num-faq details{
  border-bottom:1px solid var(--linha);
}
.num-faq summary{
  cursor:pointer; list-style:none;
  padding:16px 34px 16px 0; position:relative;
  font-family:var(--sans); font-weight:600; font-size:16px;
  color:var(--pergaminho);
}
.num-faq summary::-webkit-details-marker{ display:none; }
.num-faq summary::after{
  content:"+"; position:absolute; right:6px; top:50%;
  transform:translateY(-50%);
  color:var(--ambar); font-size:20px; font-weight:400;
  transition:transform .2s ease;
}
.num-faq details[open] summary::after{ content:"−"; }
.num-faq summary:hover{ color:var(--ambar); }
.num-faq details p{ padding:0 0 18px; margin:0; }

.num-disclaimer--pagina{
  margin-top:44px; padding-top:24px;
  border-top:1px solid var(--linha);
  font-size:13px; line-height:1.7; color:#8A8370;
}

/* ------------------------------------------------------------
   DESKTOP — ponto de quebra único
   ------------------------------------------------------------ */
@media (min-width:720px){
  #hero{ padding-top:132px; padding-bottom:56px; }
  #hero .eyebrow{ margin-bottom:20px; }
  #hero .hero-sub{ margin-top:18px; }
  /* No desktop o botão volta: ali o formulário está abaixo da dobra e
     o clique realmente leva a pessoa a algum lugar. Com dois itens na
     linha, o flex passa a fazer sentido. */
  #hero .hero-acao{
    margin-top:26px; display:flex; flex-wrap:wrap;
    align-items:center; gap:8px 18px;
  }
  #hero .hero-acao .cta{ display:inline-block; }
  #ferramenta{ padding:64px 0 96px; }
  .num-sub{ margin-bottom:34px; }
  .num-form{ gap:26px; }
  .num-data{ grid-template-columns:auto auto auto; justify-content:start; }
  .num-data select{ min-width:7rem; }
  .num-data select:nth-child(2){ min-width:11rem; }
  /* 48, não 132: no desktop o #ferramenta já entra com 64px de folga,
     e os dois somados jogavam a carta 138px abaixo da barra do topo.
     Ver a nota do valor base, lá em cima. */
  .estado-resultado{ padding-top:48px; }
}

/* ------------------------------------------------------------
   MOVIMENTO REDUZIDO
   O sigilo aparece inteiro e os marcadores vão direto ao lugar.
   O numerologia.js completa: pula a leitura em 300ms.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .estado, .num-passo.entrando{ animation:none !important; }
  .num-sigilo #sigilo-espiral{ stroke-dashoffset:0 !important; animation:none !important; }
  .num-sigilo-pontos{ opacity:.9 !important; animation:none !important; }
  .num-insumo, .num-marcador{ transition:none !important; }
}