/* ============================================================
   REVELARIUM — folha de estilo única
   Hero editorial + corpo cinematográfico. Mobile-first.
   ============================================================ */

/* ============================================================
   PROPOSTA D — MISTA (hero da C + corpo da A)
   Hero editorial alinhado à esquerda com tipografia gigante;
   corpo cinematográfico do Observatório noturno.
   ============================================================ */

:root{
  /* ---- CORES ---- */
  --azul-noite:   #0E1726;  /* fundo principal */
  --azul-abismo:  #0A111D;  /* fundo mais profundo (seções alternadas) */
  --azul-card:    #131F33;  /* superfície de cards */
  --linha:        #24334A;  /* linhas e bordas sutis */
  --ambar:        #D9A441;  /* acento principal */
  --ambar-claro:  #E8BC6A;  /* hover do acento */
  --pergaminho:   #EAE0CB;  /* texto principal */
  --ocre-suave:   #B3A88F;  /* texto secundário */

  /* ---- MEDIDAS ----
     Uma medida só para o site inteiro: a largura dos 3 cards de
     ferramentas. Cabeçalho e hero se alinham a ela pela mesma conta,
     então nunca mais saem de registro. */
  --medida:  1080px;  /* largura do container */
  --respiro: 20px;    /* folga mínima até a borda da tela (vira 40px no desktop) */

  /* ---- TIPOGRAFIA ---- */
  --serif: 'Cormorant Garamond', Georgia, serif;   /* títulos */
  --sans:  'Source Sans 3', Helvetica, sans-serif; /* corpo e interface */
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--azul-noite);
  color:var(--pergaminho);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  /* céu estrelado sutil: pontos de luz fixos feitos só com CSS */
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(234,224,203,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 9%,  rgba(234,224,203,.25) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 55% 32%, rgba(217,164,65,.3) 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 61%, rgba(234,224,203,.2) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 48%, rgba(234,224,203,.25) 50%, transparent 51%);
  background-attachment:fixed;
}

a{ color:var(--ambar); text-decoration:none; }
a:hover{ color:var(--ambar-claro); }

img{ max-width:100%; display:block; }

/* Foco visível para quem navega pelo teclado. O :focus-visible só aparece
   na navegação por Tab — o clique de mouse não desenha o contorno. */
:focus-visible{ outline:2px solid var(--ambar-claro); outline-offset:3px; }

/* ---- CABEÇALHO FIXO ---- */
header{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  /* no celular o menu não cabe ao lado do logo em nenhum corpo de
     texto legível — desce para a segunda linha em vez de espremer a
     marca */
  flex-wrap:wrap; gap:6px 18px;
  /* A barra atravessa a tela inteira, mas logo e menu param no mesmo
     container de 1080px das seções (a largura dos 3 cards de ferramentas).
     Colados nos extremos da tela eles ficavam soltos no desktop. */
  padding:14px max(var(--respiro), calc((100% - var(--medida)) / 2));
  /* No topo o cabeçalho é invisível: logo e menu flutuam sobre o céu do
     hero, que é um fundo escuro e controlado. A barra só entra depois que
     a página rola — daí em diante o que passa por trás é imprevisível
     (cards, seções claras, a capa do livro) e ela vira legibilidade. */
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease;
}
/* A classe .rolado é ligada pelo script assim que o scroll passa de 40px */
header.rolado{
  background:rgba(10,17,29,.85);
  backdrop-filter:blur(8px);
  border-bottom-color:var(--linha);
}
.logo{
  display:flex; align-items:center; gap:10px;
  flex:0 0 auto;                    /* a marca nunca encolhe */
  font-family:var(--serif); font-weight:600;
  font-size:20px; letter-spacing:.35em; color:var(--pergaminho);
}
/* Logo do Revelarium: faixa do wordmark recortada da arte original,
   que tem alpha de verdade — dispensa o mix-blend-mode:screen.
   A máscara elíptica esfuma o brilho dourado embutido no arquivo,
   para a arte se fundir ao cabeçalho em vez de virar um retângulo. */
.logo img{
  width:clamp(158px, 44vw, 190px); height:auto;
  -webkit-mask-image:radial-gradient(118% 148% at 50% 50%, #000 46%, transparent 100%);
          mask-image:radial-gradient(118% 148% at 50% 50%, #000 46%, transparent 100%);
}
.logo:hover{ color:var(--ambar); }
/* ESCOPADO NO `header` DE PROPÓSITO.

   Estas três regras são do menu do topo — caixa alta, espaçamento
   largo, tudo em linha. Sem o `header` na frente elas alcançavam
   QUALQUER <nav> do site, e um bloco de links relacionados também é
   um <nav>: em 22/08/2026 a malha interna das Revelações nasceu com
   os títulos dos artigos em caixa alta e os três blocos espremidos
   lado a lado, sem ninguém ter escrito uma linha para isso acontecer.

   Seletor de elemento sem escopo é armadilha de longo prazo: ele
   funciona enquanto só existe um daquele elemento na página. */
header nav{ display:flex; gap:22px; }
header nav a{
  color:var(--ocre-suave); font-size:13px;
  letter-spacing:.12em; text-transform:uppercase;
}
header nav a:hover{ color:var(--ambar); }

/* ---- HERO (céu estrelado em canvas sobre silhueta de floresta) ----
   Três camadas, da mais distante para a mais próxima:
     -3  céu     — canvas, estrelas + estrela cadente
     -2  silhueta — background-image + brilho do horizonte
     -1  vinheta  — degradês que dão contraste ao texto
   O isolation:isolate prende essas camadas negativas dentro do hero;
   sem ele elas cairiam atrás do fundo da página. */
.hero{
  position:relative;
  min-height:100svh;  /* cabe na tela do celular sem rolagem */
  display:flex; align-items:center;
  /* o hero é um <section>, e sem isto herdaria o padding genérico das
     seções — que empurraria o texto para fora do alinhamento e ainda
     roubaria altura do céu */
  padding:0;
  overflow:hidden;
  isolation:isolate;
  background:var(--azul-noite);
}

/* CAMADA DISTANTE — céu.
   Tem 45% de altura extra acima do hero: no parallax ela desce, e sem
   essa sobra apareceria uma faixa sem estrelas no topo. */
.hero-ceu{
  position:absolute; left:0; right:0;
  top:-45%; height:145%; width:100%;
  z-index:-3;
  will-change:transform;
}

/* CAMADA PRÓXIMA — silhueta da floresta.
   background-image em vez de canvas por dois motivos: aparece mesmo com
   o JS desligado ou ainda carregando, e o recorte de escala o CSS faz de
   graça. O clamp protege o celular, onde a proporção 3:1 da imagem
   viraria uma tirinha fina. */
.hero-silueta{
  position:absolute; left:0; right:0; bottom:0;
  /* A imagem é 1920×640 (3:1). Numa tela larga, a caixa precisa ter pelo
     menos 1/3 da largura, senão o cover corta — e como a âncora é a base,
     ele corta justamente as pontas das árvores. O clamp continua valendo
     no celular, onde a tela é estreita e 3:1 viraria uma tirinha fina;
     lá o corte acontece na horizontal, que é inofensivo. */
  height:max(33.4vw, clamp(220px, 42vh, 480px));
  z-index:-2;
  background-image:url("assets/silueta-arvores-hero.webp");
  background-size:cover;
  background-position:35% bottom;
  background-repeat:no-repeat;
  will-change:transform;
}
/* Brilho atmosférico atrás do horizonte — uma fonte de luz âmbar só.
   O 62% não é arbitrário: é onde fica o vale mais fundo do horizonte
   nesta imagem. Se trocar o arquivo, remedir. */
.hero-silueta::before{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:180%;
  pointer-events:none;
  background:radial-gradient(ellipse 55% 30% at 62% 88%,
    rgba(217,164,65,.13) 0%,
    rgba(217,164,65,.045) 45%,
    rgba(217,164,65,0) 100%);
}

/* Vinheta: escurece o lado do texto para o título ter contraste sobre o
   céu. CSS puro, custo zero.
   No celular ela é bem mais leve — a tela é estreita, e o degradê lateral
   do desktop cobriria a largura inteira e apagaria a silhueta. */
.hero::after{
  content:"";
  position:absolute; inset:0;
  z-index:-1; pointer-events:none;
  background:
    linear-gradient(to right, rgba(10,17,29,.62) 0%, rgba(10,17,29,.28) 58%, rgba(10,17,29,0) 92%),
    linear-gradient(to bottom, rgba(10,17,29,.60) 0%, rgba(10,17,29,0) 30%, rgba(10,17,29,0) 68%, rgba(10,17,29,.22) 100%);
}

/* O recuo lateral é a mesma conta do cabeçalho: assim o título do hero
   começa exatamente onde começam o logo e o primeiro card de ferramentas. */
.hero-conteudo{
  position:relative; z-index:1;
  width:100%;
  padding:112px max(var(--respiro), calc((100% - var(--medida)) / 2)) 40px;
}
.eyebrow{
  font-size:11px; letter-spacing:.5em; text-transform:uppercase;
  color:var(--ambar); margin-bottom:20px;
}
h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(38px, 9.5vw, 88px);
  line-height:1.06; letter-spacing:-.01em;
  max-width:19ch;              /* quebra em 2 linhas */
  text-wrap:balance;
}
.hero p.sub{
  margin-top:20px; color:var(--ocre-suave);
  font-size:clamp(16px, 4vw, 21px);
  /* a frase tem 42 caracteres: com menos que isto ela quebrava na tela
     larga mesmo sobrando espaço. No celular continua quebrando, que é o
     esperado — lá não cabe em uma linha de jeito nenhum. */
  max-width:46ch;
}
.hero-acao{ margin-top:32px; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.cta{
  display:inline-block;
  background:var(--ambar); color:#131208;
  font-weight:600; font-size:16px; letter-spacing:.02em;
  padding:16px 32px; border-radius:3px;
  transition:background .2s, transform .2s;
}
.cta:hover{ background:var(--ambar-claro); color:#131208; transform:translateY(-1px); }
.micro{ font-size:13px; color:var(--ocre-suave); letter-spacing:.04em; }

/* ---- FAIXA DE POSICIONAMENTO ---- */
.posicionamento{
  padding:110px 24px;
  border-top:1px solid var(--linha);
  border-bottom:1px solid var(--linha);
  background:var(--azul-abismo);
}
.posicionamento p{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(26px, 5.5vw, 44px);
  line-height:1.3; max-width:24ch; margin:0 auto;
  text-align:center; text-wrap:balance;
}
.posicionamento em{
  font-style:normal; color:var(--ambar);
}

/* ---- SEÇÕES GENÉRICAS ---- */
section{ padding:90px 24px; }
.container{ max-width:1080px; margin:0 auto; }
.rotulo{
  font-size:12px; letter-spacing:.4em; text-transform:uppercase;
  color:var(--ambar); text-align:center; margin-bottom:14px;
}
h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(28px, 6vw, 42px);
  text-align:center; margin-bottom:52px; text-wrap:balance;
}

/* ---- GRADE DE FERRAMENTAS ---- */
.ferramentas-grade{
  display:grid; gap:20px;
}
.ferramenta{
  display:block;
  border:1px solid var(--linha);
  background:var(--azul-card);
  padding:36px 28px;
  border-radius:4px;
  transition:border-color .25s, transform .25s;
}
/* o card que já virou link não pode herdar a cor âmbar de <a> */
a.ferramenta{ color:inherit; }
.ferramenta:hover{ border-color:var(--ambar); transform:translateY(-3px); }
.ferramenta .simbolo{
  width:34px; height:34px; margin-bottom:22px;
  border:1px solid var(--ambar); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.ferramenta .simbolo i{
  width:8px; height:8px; background:var(--ambar);
  border-radius:50%; display:block;
}
.ferramenta h3{
  font-family:var(--serif); font-weight:600; font-size:26px; margin-bottom:8px;
}
.ferramenta p{ color:var(--ocre-suave); font-size:15px; }

/* ---- TAROT DO DIA ---- */
/* O céu de nebulosa entra como fundo da seção. A arte foi feita para
   esta função: nuvens douradas fechando as duas laterais e uma clareira
   azul no meio, exatamente onde a carta fica. O `center` no
   background-position não é o padrão por acaso — é ele que mantém a
   carta dentro da clareira em qualquer largura de tela.

   A cor continua declarada por baixo: se a imagem não carregar, a seção
   volta a ser o azul-abismo de antes em vez de virar um buraco. */
.tarot{
  position:relative;
  background-color:var(--azul-abismo);
  background-image:url("assets/fundo-home-tarot.webp");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-top:1px solid var(--linha);
  border-bottom:1px solid var(--linha);
}
/* Véu de leitura. A arte é escura, mas não é uniforme: sem isto, o
   rótulo em âmbar no topo e a linha miúda embaixo caem em cima das
   nuvens claras em algumas larguras de tela. O meio fica quase limpo —
   é onde a carta está, e ali a arte tem que aparecer. */
.tarot::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(10,17,29,.72) 0%,
    rgba(10,17,29,.18) 26%,
    rgba(10,17,29,.18) 72%,
    rgba(10,17,29,.78) 100%);
}
/* O conteúdo sobe acima do véu. Sem esta linha ele fica por baixo e a
   seção inteira parece ter perdido contraste. */
.tarot .container{ position:relative; z-index:1; }

/* O palco tem DUAS áreas, e as duas existem desde o primeiro paint:
   a carta e a leitura. Nada pode se mexer quando o texto aparecer —
   é a coluna do texto que já nasce com a altura do pior caso dos 22.

   Mobile: uma coluna, carta em cima. Desktop: lado a lado. */
/* A largura da carta mora aqui, e não na regra .carta, porque o painel
   da leitura precisa dela: os dois são o mesmo retângulo. */
/* 86vw, e não os 78vw que o briefing sugeria: a carta e o painel têm a
   MESMA largura, e em 78vw o texto quebrava tão cedo que o painel
   ficava 100px mais alto que a carta — dois blocos que deveriam ser
   irmãos e não eram. O teto de 340px é o mesmo do desktop. */
.tarot{ --carta-larg:min(86vw, 340px); --painel-pad:22px 18px; }

.tarot-palco{
  display:grid;
  gap:26px;
  justify-items:center;
  align-items:center;
}
/* No desktop as duas colunas têm a MESMA largura da carta e o par
   inteiro é que se centraliza. Duas tentativas anteriores ficaram
   piores: com `1fr` na segunda coluna a leitura ancorava à esquerda
   dela e sobrava um terço de tela vazio; com `46ch` o texto ficava
   solto ao lado da carta, sem nada que segurasse a composição.

   `align-items:start` alinha o TOPO do painel com o topo da carta. Com
   `center` o painel descia uns 18px, porque a coluna da esquerda leva
   a micro-copy embaixo e fica mais alta que a carta sozinha. */
@media (min-width:900px){
  .tarot{ --carta-larg:340px; --painel-pad:30px 26px; }
  .tarot-palco{
    grid-template-columns:repeat(2, var(--carta-larg));
    justify-content:center;
    align-items:start;
    gap:52px;
  }
}

.tarot-coluna-carta{
  display:flex; flex-direction:column; align-items:center; gap:16px;
}

/* ---- A CARTA (o flip) ----
   A largura sai de min(78vw, 320px) e a altura vem do aspect-ratio.
   Nunca declarar height em px aqui: é o aspect-ratio que garante o
   2:3 do baralho e que a caixa já tenha o tamanho final antes de
   qualquer imagem chegar. */
.carta{
  width:var(--carta-larg);
  aspect-ratio:2/3;
  display:block;
  perspective:1200px;
  cursor:pointer;
  background:none; border:none; padding:0; font:inherit; color:inherit;
}
.carta[disabled]{ cursor:default; }

.carta-interior{
  position:relative; display:block; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.7,.2,1);   /* MS_VIRADA no tarot-carta-do-dia.js */
}
.carta.virada .carta-interior{ transform:rotateY(180deg); }
/* Quem volta no mesmo dia encontra a carta já aberta. Repetir a
   cerimônia da virada a cada recarga gasta o gesto. */
.carta.sem-animacao .carta-interior{ transition:none; }

.carta-face{
  position:absolute; inset:0; display:block;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:2.4% / 1.6%;    /* proporcional: 8px em 340, 24px em 1000 */
  overflow:hidden;
}

/* Frente: só a arte. Nunca texto dentro da moldura — o texto tem
   área própria, ao lado. A arte entra com fade quando termina de
   baixar, para a virada nunca revelar um retângulo vazio. */
.carta-frente{
  transform:rotateY(180deg);
  background:var(--azul-card);
}
.carta-frente img{
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .45s ease;
}
.carta-frente img.pronta{ opacity:1; }

/* ============================================================
   O VERSO DO BARALHO — CSS puro, zero requisição de rede

   Documento: _infos/BRIEFING_verso_carta_tarot.md

   Três regras que explicam cada decisão daqui para baixo:

   1. ESCALA POR CONTAINER, não por media query. Por isso quase tudo
      está em porcentagem. Numa caixa 2:3, 1% da largura é 0,667% da
      altura — é essa conta que aparece repetida nos `inset` e nos
      `border-radius`, e é ela que faz a mesma regra servir para
      200×300 e para 1000×1500 sem ajuste nenhum.
   2. SIMETRIA ROTACIONAL TOTAL. Girado 180°, o verso é o mesmo
      verso. Vale para a moldura, para o halo e — o trabalhoso — para
      o campo de estrelas, montado em PARES: toda estrela em (x, y)
      tem uma gêmea em (100−x, 100−y).
   3. SEM TEXTO. Nenhum nome, nenhuma marca, nenhum numeral. O aviso
      de tocar vive na coluna da leitura, não aqui.

   Substituiu o repeating-linear-gradient e o "olho" da v1, que eram
   marcação de lugar, não o verso do baralho.
   ============================================================ */
.carta-verso{
  position:relative;
  aspect-ratio:2/3;
  overflow:hidden;
  border-radius:2.4% / 1.6%;

  /* Espessuras — o único lugar onde porcentagem não serve, porque
     border-width e tamanho de gradiente não aceitam % da largura.
     Estes valores em px são o piso, calibrados para a carta de 340
     da home; o bloco @supports lá embaixo os troca por medidas que
     escalam de verdade. */
  --m-ext-borda:2px;
  --m-int-borda:1px;
  --e-p:.10% .067%;   /* estrela pequena — 1px   em 1000×1500 */
  --e-m:.13% .087%;   /* média          — 1,3px */
  --e-g:.17% .113%;   /* grande         — 1,7px */

  background-color:var(--azul-noite);   /* azul-NOITE: o anverso é que usa o abismo */
  background-image:
    /* -- CAMPO DE ESTRELAS — 30 pares, um par por linha.
          Toda estrela em (x, y) tem a gêmea em (100−x, 100−y): é o
          que faz o verso girado 180° ser o mesmo verso. As posições
          saíram de um sorteio com semente fixa, com três restrições —
          dentro da moldura interna, fora da área do sigilo, e nunca
          a menos de 7% da largura de outra estrela, para não formar
          aglomerado nem grade perceptível. -- */
    radial-gradient(var(--e-p) at 42% 90%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-p) at 58% 10%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-p) at 86% 42%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-p) at 14% 58%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-m) at 79% 93%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-m) at 21%  7%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-p) at 14% 34%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-p) at 86% 66%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-m) at 87% 47%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-m) at 13% 53%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-p) at 71% 93%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-p) at 29%  7%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-p) at 16% 92%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-p) at 84%  8%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-g) at 73% 70%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-g) at 27% 30%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-p) at 82% 57%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-p) at 18% 43%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-m) at  9% 16%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-m) at 91% 84%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-p) at 53% 27%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-p) at 47% 73%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-p) at 27% 39%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-p) at 73% 61%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-m) at 70% 30%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-m) at 30% 70%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-p) at 15% 66%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-p) at 85% 34%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-g) at 59% 74%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-g) at 41% 26%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-p) at  9% 27%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-p) at 91% 73%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-m) at 49%  7%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-m) at 51% 93%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-p) at 85% 16%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-p) at 15% 84%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-p) at 45% 12%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-p) at 55% 88%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-m) at 17% 19%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-m) at 83% 81%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-p) at 28% 21%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-p) at 72% 79%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-g) at 74% 17%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-g) at 26% 83%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-p) at 32% 80%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-p) at 68% 20%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-m) at 50% 69%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-m) at 50% 31%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-p) at 55% 15%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-p) at 45% 85%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-p) at 39% 31%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-p) at 61% 69%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-m) at 74% 46%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-m) at 26% 54%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-p) at 38%  8%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-p) at 62% 92%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-m) at 25% 64%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-m) at 75% 36%, rgba(234,224,203,.4) 50%, transparent 51%),
    radial-gradient(var(--e-p) at 24% 13%, rgba(234,224,203,.4) 50%, transparent 51%), radial-gradient(var(--e-p) at 76% 87%, rgba(234,224,203,.4) 50%, transparent 51%),

    /* -- halo âmbar do centro. A elipse 40%/26,7% é um CÍRCULO numa
          caixa 2:3, e ele morre a 10% da borda — a moldura interna
          está a 6%, então nunca encostam. Sem vinheta: escurecer as
          bordas aqui criaria um anel que o anverso não tem. -- */
    radial-gradient(ellipse 40% 26.7% at 50% 50%,
      rgba(217,164,65,.10) 0%, rgba(217,164,65,.04) 55%, rgba(217,164,65,0) 100%);
}

/* ---- MOLDURA DUPLA ----
   Estes números foram MEDIDOS nas 22 cartas montadas, não copiados do
   briefing. O briefing pedia 16px e 34px de respiro numa carta de
   1000, cantos arredondados em 10px, e a linha interna a 65% de
   opacidade. A arte real, idêntica nas 22, tem:

     linha externa   centro a 35,2px da lateral e 44,4px do topo
     linha interna   centro a 61,5px da lateral e 75,4px do topo
     espessuras      ~5,9px a externa, ~3,9px a interna
     cantos          RETOS, não arredondados

   Repare que o respiro lateral e o vertical NÃO são iguais em px — a
   moldura entra mais pelo topo e pela base. Copiar o briefing deixaria
   a moldura do verso visivelmente mais para fora que a do anverso com
   as duas cartas lado a lado, que é justamente o critério de aceite.

   Os `inset` daqui são a posição da borda menos metade da espessura
   dela, para o CENTRO do traço cair na medida acima. E cada eixo tem
   sua conta: numa caixa 2:3, 1% da largura é 0,667% da altura. */
.carta-verso::before,
.carta-verso::after{ content:""; position:absolute; pointer-events:none; }
.carta-verso::before{
  inset:2.765% 3.225%;
  border:var(--m-ext-borda) solid var(--ambar);
}
.carta-verso::after{
  inset:4.899% 5.955%;
  /* A arte tem as duas linhas no mesmo âmbar e separa uma da outra só
     pela espessura. Aqui a interna leva um véu: abaixo de ~250px de
     carta as duas caem para 1px e, sem isso, a hierarquia sumiria. */
  border:var(--m-int-borda) solid rgba(217,164,65,.72);
}

/* O sigilo. 40% da largura, e o topo em 49% em vez de 50%: o centro
   ÓPTICO fica um pouco acima do geométrico, senão a peça parece
   escorregada para baixo. */
.verso-sigilo{
  position:absolute;
  left:50%; top:49%;
  transform:translate(-50%,-50%);
  width:40%; height:auto;
  display:block;
}

/* As espessuras de verdade. Sem unidade de container o navegador
   fica com o piso de 1px declarado acima — a moldura afina num
   verso gigante, mas nada quebra. Com ela, tudo escala e o `max`
   impede que o traço suma num verso de 200px. */
@supports (container-type: inline-size){
  .carta-verso{
    container-type:inline-size;
    --m-ext-borda:max(1px, .59cqw);      /* 5,9px em 1000 — medido na arte */
    --m-int-borda:max(1px, .39cqw);      /* 3,9px em 1000 — medido na arte */
    --e-p:max(1px, .10cqw) max(1px, .10cqw);
    --e-m:max(1px, .13cqw) max(1px, .13cqw);
    --e-g:max(1px, .17cqw) max(1px, .17cqw);
  }
}

/* Dentro do flip o verso é uma das faces: quem manda no tamanho é o
   .carta-face, não o aspect-ratio próprio dele. */
.carta-interior > .carta-verso{ position:absolute; inset:0; }

/* ---- A LEITURA ----
   Um PAINEL com as dimensões da carta, não um texto solto ao lado
   dela. Foi o que resolveu a composição nos dois formatos de uma vez:

   · no desktop, dois retângulos iguais lado a lado — a arte à
     esquerda, a leitura à direita. Texto sem moldura ao lado de uma
     carta com moldura deixava a seção pendendo para um lado só.
   · no celular, o painel cai abaixo da carta e é ele que dá sentido
     ao espaço reservado: uma caixa demarcada esperando ser preenchida
     lê como promessa, e o mesmo espaço sem demarcação nenhuma lia
     como conteúdo que não carregou.

   O fundo semiopaco não é só estética: o céu de nebulosa por trás é
   claro em partes, e o texto ganha contraste de leitura em cima dele.

   Espera e texto dividem a MESMA célula do grid — é isso, com a altura
   já reservada, que garante zero deslocamento na revelação: o texto
   não empurra nada, aparece onde a linha de espera estava. */
.tarot-leitura{
  width:100%;
  max-width:var(--carta-larg);
  min-height:calc(var(--carta-larg) * 1.5);   /* a altura da carta, pelo 2:3 */
  padding:var(--painel-pad);
  border:1px solid var(--linha);
  border-radius:2.4% / 1.6%;                  /* o mesmo raio da carta */
  background:rgba(10,17,29,.5);
  display:grid;
  align-items:center;
}
.tarot-espera,
.tarot-texto{ grid-area:1 / 1; }

/* Quem segura a altura da célula é este bloco invisível, montado pelo
   JS com o maior movimento 1, o maior movimento 2 e o maior movimento
   3 dos 22. Não há min-height em px em lugar nenhum de propósito: a
   altura necessária muda com a largura da tela (448px num aparelho de
   300, 314px num de 430) e mudaria de novo a cada revisão de texto.
   `visibility:hidden` esconde sem tirar do fluxo — é justamente isso
   que se quer aqui. Ver o comentário em tarot-carta-do-dia.js. */
.tarot-gabarito{
  visibility:hidden;
  pointer-events:none;
}

/* Duas linhas e centralizada, para ocupar o painel em vez de flutuar
   como uma legenda perdida no meio dele. O tracking é menor que o de
   um rótulo miúdo de propósito: em corpo 19 a letra espaçada começa a
   atrapalhar a leitura em vez de dar ar. */
.tarot-espera{
  margin:0;
  color:var(--ocre-suave);
  font-size:19px; line-height:1.55;
  letter-spacing:.04em;
  text-align:center;
  transition:opacity .25s ease;
}
/* Some enquanto a carta ainda está girando, para o espaço já estar
   livre quando o texto entrar. */
.tarot-leitura.revelando .tarot-espera{ opacity:0; }

.tarot-texto{
  opacity:0; transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease;
}
.tarot-texto.visivel{ opacity:1; transform:none; }

.tarot-texto p{ margin:0; }
.tarot-texto .mov1,
.tarot-texto .mov2{ color:var(--pergaminho); line-height:1.65; }
.tarot-texto .mov2{ margin-top:15px; }
/* O terceiro movimento é a pergunta — é o que a pessoa leva para o
   dia e o que a traz de volta amanhã. Por isso itálico, âmbar-claro,
   corpo maior e mais respiro acima que os outros dois juntos. */
.tarot-texto .mov3{
  margin-top:24px;
  font-style:italic;
  font-size:19px; line-height:1.5;
  color:var(--ambar-claro);
}
/* Ponte da regra 5 — sem linha divisória, só espaço. O seletor precisa
   dos dois nomes: `.tarot-texto p{margin:0}` lá em cima tem
   especificidade maior que `.tarot-ponte` sozinho e zerava esta
   margem, colando a ponte na pergunta. */
.tarot-texto .tarot-ponte{
  margin-top:34px;
  font-size:14px; line-height:1.55;
  color:var(--ocre-suave);
}

.tarot-dica{ text-align:center; color:var(--ocre-suave); font-size:13px; letter-spacing:.08em; }


/* Rotação 3D dá enjoo em parte das pessoas. Aqui a carta não gira:
   as duas faces trocam por cross-fade, no mesmo lugar. */
@media (prefers-reduced-motion: reduce){
  .carta{ perspective:none; }
  .carta-interior{ transition:none; }
  .carta.virada .carta-interior{ transform:none; }
  .carta-face{ transition:opacity .3s ease; }   /* MS_FUSAO no tarot-carta-do-dia.js */
  .carta-frente{ transform:none; opacity:0; }
  .carta.virada .carta-verso{ opacity:0; }
  .carta.virada .carta-frente{ opacity:1; }
  .tarot-texto{ transition:opacity .3s ease; transform:none; }
  .tarot-texto.visivel{ transform:none; }
}

/* ---- REVELAÇÕES (ARTIGOS) ---- */
.artigos{ display:grid; gap:2px; border:1px solid var(--linha); border-radius:4px; overflow:hidden; }
.artigo{
  display:block; background:var(--azul-card);
  padding:32px 28px; color:var(--pergaminho);
  transition:background .25s;
}
.artigo:hover{ background:#182742; color:var(--pergaminho); }
.artigo small{
  display:block; font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ambar); margin-bottom:10px;
}
.artigo h3{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(20px, 4.5vw, 26px); line-height:1.3;
}
.artigo span{
  display:inline-block; margin-top:14px; font-size:13px;
  color:var(--ocre-suave); letter-spacing:.06em;
}
.artigo:hover span{ color:var(--ambar); }

/* ---- LIVRO ---- */

/* O FOG

   Uma névoa suave em volta e abaixo do conjunto capa + texto, para a
   seção se destacar do resto sem precisar de borda nem de faixa de cor
   sólida. O centro da elipse fica em 56% da altura — abaixo do meio —
   porque a luz vem de cima na estética da marca e a névoa se acumula
   embaixo, como no hero.

   São duas camadas: um azul mais claro que levanta o fundo e um âmbar
   quase invisível que amarra o conjunto à luz da página. O
   pointer-events:none existe para a névoa nunca roubar o clique da
   capa, que é link. */
.livro{ position:relative; isolation:isolate; }
.livro::before{
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 46% 58% at 50% 56%, rgba(217,164,65,.055) 0%, rgba(217,164,65,0) 72%),
    radial-gradient(ellipse 58% 66% at 50% 56%, rgba(28,44,71,.85) 0%, rgba(28,44,71,0) 75%);
}

.livro .container{
  display:grid; gap:40px; align-items:center;
  position:relative;
}
/* ---- O TABLET ----
   A capa dentro de um aparelho, e não solta: é livro DIGITAL, e a
   moldura conta isso sem precisar de uma palavra.

   DUPLICADA DE PROPÓSITO. A mesma peça existe no
   `alinhamento-magnetico/styles.css`. A PDV é uma landing autônoma —
   paleta própria, fontes próprias — e NÃO carrega este arquivo;
   juntar as duas num componente só obrigaria a PDV a herdar o site
   inteiro para reaproveitar 25 linhas.

   **Se mexer numa, mexa na outra.** A proporção 1800/2560 é a do
   arquivo da capa: mudou a arte, muda aqui e lá.
   ---- */
.livro-capa{
  position:relative; display:block;
  /* 268px / 72vw, e nao os 230/62 originais: ao lado de um bloco de
     texto em serifada de 30px o aparelho lia como miniatura, e ele e
     o unico objeto da secao. Cresceu junto o padding do bisel — sem
     isso a moldura afina e o tablet vira um porta-retratos. */
  width:min(268px, 72vw);
  aspect-ratio:1800/2560;
  margin:0 auto;
  border-radius:30px; padding:15px;
  background:linear-gradient(155deg, #20242C, #0C0E13 60%, #181B21);
  /* três sombras: o brilho de cima da carcaça, a sombra projetada no
     fundo azul e um halo âmbar fraco, que amarra o aparelho à luz da
     página em vez de deixá-lo recortado */
  box-shadow:
    0 2px 0 rgba(255,255,255,.06) inset,
    0 40px 80px -28px rgba(4,8,16,.75),
    0 16px 40px -20px rgba(217,164,65,.18);
  transition:transform .25s ease;
}
/* o reflexo diagonal no vidro */
.livro-capa::after{
  content:""; position:absolute; inset:15px; border-radius:17px;
  background:linear-gradient(125deg, rgba(255,255,255,.16), transparent 38%);
  pointer-events:none; mix-blend-mode:screen;
}
.livro-capa .screen{
  display:block; width:100%; height:100%;
  border-radius:17px; overflow:hidden;
  background:#05070D; box-shadow:0 0 0 1px rgba(0,0,0,.5) inset;
}
.livro-capa .screen img{ width:100%; height:100%; object-fit:cover; }
.livro-capa .cam{
  position:absolute; top:7px; left:50%; transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%; background:#2A2E36; z-index:3;
}
.livro-capa:hover{ transform:translateY(-3px); }
.livro-texto{ text-align:center; }
.livro-texto p{
  font-family:var(--serif); font-size:clamp(22px, 5vw, 30px);
  line-height:1.4; max-width:26ch; margin:0 auto 30px; text-wrap:balance;
}
.btn-outline{
  display:inline-block; padding:14px 30px;
  border:1px solid var(--ambar); border-radius:3px;
  color:var(--ambar); font-size:15px; letter-spacing:.06em;
  transition:background .2s, color .2s;
}
.btn-outline:hover{ background:var(--ambar); color:#131208; }
/* A classe nasceu para <a>. Em <button> o navegador põe fundo, borda e
   fonte próprios, e cada página vinha zerando isso por conta — foi
   assim que o "Compartilhar meu mapa" quebrou: a regra local
   `.num-acoes .btn-outline{background:none}` tinha a MESMA
   especificidade do `:hover` acima e vinha depois, então no hover o
   fundo âmbar não entrava e só o texto escuro entrava. Rótulo preto
   sobre fundo azul: sumia. Com o reset aqui, em `button.btn-outline`
   (0,1,1), o `:hover` (0,2,0) ganha sempre e ninguém precisa
   redeclarar nada por página. */
button.btn-outline{
  background:none; cursor:pointer;
  font-family:inherit; line-height:inherit;
}

/* ---- RODAPÉ ---- */
footer{
  border-top:1px solid var(--linha);
  background:var(--azul-abismo);
  padding:48px 24px 40px;
  text-align:center;
}
.footer-links{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px 24px; margin-bottom:20px; }
.footer-links a{ color:var(--ocre-suave); font-size:13px; letter-spacing:.08em; }
.footer-links a:hover{ color:var(--ambar); }
/* Emblema completo. A máscara radial dissolve o brilho dourado do
   arquivo no fundo escuro — sem ela a arte aparece como um retângulo.
   Só funciona sobre fundo escuro. */
.footer-marca{
  width:min(230px, 62vw); height:auto; margin:0 auto 18px;
  opacity:.9;
  /* elipse explícita, não closest-side: o emblema é mais largo que
     alto e um círculo pela altura comeria as pontas do wordmark */
  -webkit-mask-image:radial-gradient(72% 96% at 50% 50%, #000 54%, transparent 100%);
          mask-image:radial-gradient(72% 96% at 50% 50%, #000 54%, transparent 100%);
}
/* #8A8370 e não o #77705D de antes: sobre o azul-abismo do rodapé
   aquele tom dava 3,83:1 de contraste, e texto pequeno precisa de
   4,5:1 (WCAG AA). O novo dá 5,0:1 e continua discreto — foi medido,
   não escolhido no olho. */
footer .disclaimer{
  color:#8A8370; font-size:12px; max-width:52ch; margin:0 auto; line-height:1.6;
}
/* Assinatura legal (CNPJ e copyright): um degrau abaixo do disclaimer.
   Mora aqui e não no pagina.css porque o rodapé é o mesmo em todas as
   páginas — inclusive nesta, que não carrega o pagina.css. */
footer .assinatura{ margin-top:10px; font-size:11px; letter-spacing:.04em; }

/* ---- DESKTOP (adaptação a partir do mobile) ---- */
@media (min-width:760px){
  /* o respiro cresce e cabeçalho e hero acompanham sozinhos */
  :root{ --respiro:40px; }
  header{ padding-top:16px; padding-bottom:16px; }
  .hero-conteudo{ padding-top:96px; }
  /* na tela larga a vinheta lateral volta a ser forte: há espaço de sobra
     à direita para a silhueta continuar aparecendo */
  .hero::after{
    background:
      linear-gradient(to right, rgba(10,17,29,.90) 0%, rgba(10,17,29,.5) 46%, rgba(10,17,29,0) 76%),
      linear-gradient(to bottom, rgba(10,17,29,.65) 0%, rgba(10,17,29,0) 28%, rgba(10,17,29,0) 62%, rgba(10,17,29,.4) 100%);
  }
  .hero-acao{ flex-direction:row; align-items:center; gap:22px; }
  .ferramentas-grade{ grid-template-columns:repeat(3, 1fr); }
  .artigos{ grid-template-columns:repeat(3, 1fr); }
  /* `auto auto`, não `auto 1fr`. Com 1fr a coluna do texto ficava com
     490px enquanto o parágrafo usava 372 — 118px mortos à direita, e o
     conjunto lia como deslocado para a esquerda mesmo com o container
     centrado. Com as duas colunas do tamanho do conteúdo e o
     justify-content centrando o par, a massa visual fica no meio. */
  .livro .container{
    grid-template-columns:auto auto;
    justify-content:center;
    /* 860 e nao 760: o aparelho cresceu 66px e o texto perderia essa
       largura, quebrando a frase em quatro linhas. */
    max-width:860px;
  }
  .livro-capa{ width:296px; }
  .livro-texto{ text-align:left; }
  .livro-texto p{ margin-left:0; }

  /* As 52ch do rodapé existem para o celular. Na tela larga o limite
     sai — mas só da ASSINATURA, que é uma linha curta (CNPJ, ano,
     direitos) e fica melhor inteira.

     Até 24/08/2026 o limite saía dos dois, e estava certo: o
     disclaimer de então cabia numa linha. Agora ele é o texto legal
     completo, e sem medida virava uma linha de 1377px atravessando a
     tela de borda a borda. */
  footer .disclaimer{ max-width:80ch; }
  footer .disclaimer.assinatura{ max-width:none; }
}

/* ---- TELA GRANDE E ALTA: bloco do hero mais para cima ----
   O conteúdo é centralizado no hero; uma margem embaixo empurra o bloco
   inteiro para cima pela metade do valor. 10svh de margem = 5% de subida.
   A condição de altura não é capricho: numa janela de desktop baixa esse
   mesmo deslocamento levaria o título para trás do cabeçalho fixo. */
@media (min-width:760px) and (min-height:640px){
  .hero-conteudo{ margin-bottom:min(10svh, 100px); }
}

/* ---- MOVIMENTO REDUZIDO ----
   Quem pediu ao sistema para reduzir animações não recebe parallax nem
   rolagem suave. O JS complementa: sem cintilação e sem estrela cadente.
   O hero continua inteiro e legível, apenas parado. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-ceu, .hero-silueta{ transform:none !important; }
  .cta, header{ transition:none; }
}

/* Caminho da vitrine de revelações da home para a listagem completa.
   Sem ele, a home mostra três artigos e não conta que existem seis. */
.ver-todas{ margin-top:22px; text-align:center; font-size:14px; letter-spacing:.04em; }

/* ============================================================
   BOKEH DA FAIXA DE POSICIONAMENTO

   Luzes desfocadas à deriva atrás da frase de posicionamento. É a
   única parte da home sem imagem nem ilustração, e ficava parada
   demais entre o hero (que tem céu animado) e a grade de ferramentas.

   COMO É FEITO, e por que assim:

   · Cada luz é um `radial-gradient` com uma borda um pouco mais
     clara antes de sumir (os stops em 78–86%). É isso que dá o
     aspecto de FORA DE FOCO em vez de mancha: bokeh real tem o anel
     mais brilhante que o miolo. Sai de graça, sem `filter: blur()`,
     que é caro e obriga o navegador a repintar.
   · Três camadas, cada uma com suas luzes e sua deriva. Camadas com
     velocidades diferentes não repetem o mesmo desenho nunca — com
     uma só, o olho pega o ciclo em meio minuto.
   · O movimento é `transform`, nunca `background-position`: só o
     transform roda na placa de vídeo. Com background-position a
     faixa inteira repinta a cada quadro.
   · As camadas transbordam a faixa (`inset` negativo) para nenhuma
     luz nascer ou morrer visivelmente dentro do quadro.

   Opacidades entre .04 e .09 sobre o azul-abismo: no monitor bom
   isso é presença; no monitor ruim é quase nada — e é para ser
   assim. A frase é o assunto, o fundo é o ar em volta dela.
   ============================================================ */
.posicionamento{ position:relative; overflow:hidden; }
.posicionamento p{ position:relative; z-index:1; }

.bokeh{
  /* A sobra cresceu junto com o percurso: as camadas andam mais agora,
     e sem esta folga uma luz nasceria ou morreria dentro do quadro. */
  position:absolute; inset:-24% -15%;
  pointer-events:none;
  z-index:0;
}
.bokeh i{
  position:absolute; inset:0;
  display:block;
  background-repeat:no-repeat;
}

/* camada de trás — luzes grandes, deriva mais lenta */
.bokeh i:nth-child(1){
  background-image:
    radial-gradient(circle 190px at 12% 62%, rgba(217,164,65,.026) 0%, rgba(217,164,65,.021) 60%, rgba(217,164,65,.039) 84%, rgba(217,164,65,0) 100%),
    radial-gradient(circle 150px at 78% 26%, rgba(217,164,65,.023) 0%, rgba(217,164,65,.019) 60%, rgba(217,164,65,.035) 84%, rgba(217,164,65,0) 100%),
    radial-gradient(circle 210px at 58% 88%, rgba(232,188,106,.02) 0%, rgba(232,188,106,.016) 60%, rgba(232,188,106,.03) 84%, rgba(232,188,106,0) 100%);
  animation:bokeh-deriva-a 36s linear infinite alternate;
}
/* camada do meio */
.bokeh i:nth-child(2){
  background-image:
    radial-gradient(circle 96px at 30% 24%, rgba(232,188,106,.031) 0%, rgba(232,188,106,.025) 58%, rgba(232,188,106,.047) 82%, rgba(232,188,106,0) 100%),
    radial-gradient(circle 122px at 88% 70%, rgba(217,164,65,.027) 0%, rgba(217,164,65,.022) 58%, rgba(217,164,65,.042) 82%, rgba(217,164,65,0) 100%),
    radial-gradient(circle 78px at 46% 54%, rgba(217,164,65,.03) 0%, rgba(217,164,65,.024) 58%, rgba(217,164,65,.045) 82%, rgba(217,164,65,0) 100%),
    radial-gradient(circle 110px at 6% 12%, rgba(217,164,65,.023) 0%, rgba(217,164,65,.018) 58%, rgba(217,164,65,.034) 82%, rgba(217,164,65,0) 100%);
  animation:bokeh-deriva-b 27s linear infinite alternate;
}
/* camada da frente — luzes pequenas, um toque de pergaminho */
.bokeh i:nth-child(3){
  background-image:
    radial-gradient(circle 54px at 66% 40%, rgba(234,224,203,.023) 0%, rgba(234,224,203,.018) 56%, rgba(234,224,203,.036) 80%, rgba(234,224,203,0) 100%),
    radial-gradient(circle 44px at 20% 82%, rgba(232,188,106,.029) 0%, rgba(232,188,106,.022) 56%, rgba(232,188,106,.044) 80%, rgba(232,188,106,0) 100%),
    radial-gradient(circle 62px at 92% 16%, rgba(234,224,203,.02) 0%, rgba(234,224,203,.015) 56%, rgba(234,224,203,.031) 80%, rgba(234,224,203,0) 100%),
    radial-gradient(circle 38px at 40% 8%, rgba(217,164,65,.032) 0%, rgba(217,164,65,.025) 56%, rgba(217,164,65,.048) 80%, rgba(217,164,65,0) 100%);
  animation:bokeh-deriva-c 25s linear infinite alternate;
}

/* PERCURSOS — e por que o easing é `linear`

   A primeira versão era lenta demais para se notar: 4% de percurso em
   61s dá cerca de 1px por segundo, abaixo do limiar em que o olho
   percebe deriva numa mancha sem borda dura. Pior, o `ease-in-out`
   fazia cada camada passar metade do tempo quase parada nos dois
   extremos — a chance de olhar a faixa justamente num desses momentos
   era grande.

   Agora o percurso dobrou e a duração caiu para menos da metade: dá
   uns 5 a 6px por segundo, que se percebe olhando e não incomoda de
   canto de olho. E o easing virou `linear`, que mantém a velocidade
   constante do começo ao fim. A inversão de sentido no extremo, que
   com `linear` é brusca, aqui é invisível: não há borda dura para o
   olho seguir. */
@keyframes bokeh-deriva-a{
  from{ transform:translate3d(0, 0, 0) scale(1); }
  to  { transform:translate3d(7%, -9%, 0) scale(1.10); }
}
@keyframes bokeh-deriva-b{
  from{ transform:translate3d(0, 0, 0); }
  to  { transform:translate3d(-9%, 7%, 0); }
}
@keyframes bokeh-deriva-c{
  from{ transform:translate3d(-2%, 4%, 0) scale(1.06); }
  to  { transform:translate3d(8%, -6%, 0) scale(1); }
}

/* ============================================================
   ENTRADA POR ROLAGEM

   Os blocos marcados com `data-revela` sobem alguns pixels e
   aparecem quando entram na tela. Uma vez só — depois de revelado o
   elemento não some mais, nem se a pessoa rolar de volta.

   TRÊS CUIDADOS QUE NÃO SÃO ÓBVIOS:

   1. Só `opacity` e `transform` entram na conta. Nenhum dos dois
      mexe no layout, então a página inteira mantém o deslocamento
      zero que a Carta do Dia depende.
   2. Depois de revelado, `transform:none` — e não `translate(0)`.
      Transform diferente de `none` cria bloco de contenção e
      atrapalharia qualquer `position:fixed` dentro do bloco.
   3. Sem JavaScript nada some: o `<noscript>` de cada página
      devolve tudo. Ver assets/js/revelar.js.
   ============================================================ */
[data-revela]{
  opacity:0;
  transform:translate3d(0, 20px, 0);
  transition:opacity .75s cubic-bezier(.2,.7,.2,1),
             transform .75s cubic-bezier(.2,.7,.2,1);
}
[data-revela].revelado{
  opacity:1;
  transform:none;
}

/* Movimento reduzido desliga tudo: sem deriva no fundo, sem entrada
   por rolagem. O conteúdo nasce visível e parado. */
@media (prefers-reduced-motion: reduce){
  .bokeh i{ animation:none; }
  [data-revela]{ opacity:1; transform:none; transition:none; }
}