/*
 * CliSoul — folha unica.
 *
 * O TEMA: pergaminho iluminado sobre noite. O fundo e roxo-quase-preto; o
 * conteudo mora em cartoes de PERGAMINHO com moldura de ouro. E o contraste
 * entre os dois que da o clima — pergaminho sobre pergaminho (o tema antigo)
 * era plano, e nao tinha para onde a luz ir.
 *
 * Tres materiais, e cada um tem um trabalho:
 *   NOITE      fundo, trilho lateral, chat — onde o olho descansa
 *   PERGAMINHO todo bloco de conteudo — onde se LE
 *   OURO       moldura, titulo, rubrica — onde se OLHA
 *
 * MOBILE FIRST de verdade: tudo aqui e escrito para uma tela de 390px
 * operada com UM polegar. Desktop e uma adaptacao no fim do arquivo, com
 * duas media queries — nunca o contrario.
 */

:root {
  /* ── noite ──────────────────────────────────────────────────────────── */
  --noite:      #150e21;   /* o fundo de tudo */
  --noite-funda:#0e0917;   /* trilho lateral, rodape */
  --noite-alta: #241839;   /* painel escuro sobre o fundo */
  --roxo:       #6b3fa8;   /* o acento: botao, gema, bolha da Oracula */
  --roxo-claro: #8b5cc7;
  --roxo-fundo: #3a2160;

  /* ── pergaminho ─────────────────────────────────────────────────────── */
  --papel:      #e9d9b4;   /* o cartao */
  --papel-alto: #f2e6c9;   /* campo de formulario, linha de lista */
  --papel-baixo:#dcc79b;   /* borda interna, sombra no papel */

  /* ── tinta (sobre pergaminho) ───────────────────────────────────────────
   * Escurecidas depois que o papel ganhou grao e borda queimada: o bege
   * deixou de ser uma chapa clara e uniforme, e a tinta fraca de antes
   * (#6f5836) batia em 4.2:1 de contraste — abaixo do minimo legivel, e
   * pior ainda nos cantos, onde a sujeira escurece o fundo. Estas duas
   * passam de 5.5:1 sobre o pergaminho.
   */
  --tinta:      #33240f;   /* texto cheio */
  --tinta-fraca:#57411f;   /* texto secundario */
  --tinta-rubrica: #7a3a0e; /* preco, link, destaque — o vermelho-terra */
  --tinta-ouro: #6d4d15;   /* rotulo sobre papel — o ouro nao serve aqui */
  --tinta-verde:#2a5730;   /* saldo positivo, confirmacao */

  /* ── ouro ───────────────────────────────────────────────────────────── */
  --ouro:       #d4a95e;   /* a rubrica: titulo, moldura, icone */
  --ouro-claro: #f0d79b;   /* brilho, hover */
  --ouro-fundo: #8a6828;   /* linha fina, borda de baixo */

  --creme:      #ead9b6;   /* texto sobre a noite */
  --creme-fraco:#a9926a;   /* texto secundario sobre a noite */

  --verde:      #5a9464;
  --erro:       #c26055;

  --raio: 14px;
  --col: 460px;              /* largura maxima de leitura confortavel */
  --rodape: 74px;            /* altura da barra de navegacao inferior */
  --trilho: 250px;           /* largura do trilho lateral no desktop */

  /*
   * Altura do cabecalho. Existe porque `.topo` e sticky em `top: 0`, e
   * qualquer OUTRO sticky que tambem peca `top: 0` desliza para debaixo dele
   * e some — foi o que aconteceu com o cabecalho da Oracula, que ficava
   * cortado ao meio pela barra do site. Quem gruda depois dele parte daqui.
   */
  --altura-topo: calc(env(safe-area-inset-top) + 58px);
  --compositor: 68px;        /* altura da barra de escrever, no chat */
  --barra-chat: 78px;        /* altura da barra da conversa (retrato + nome) */
}

/* ══ O PERGAMINHO ══════════════════════════════════════════════════════════
 *
 * Papel envelhecido sem uma imagem sequer. Cinco camadas, e cada uma faz um
 * trabalho que as outras nao fazem — tirar qualquer uma devolve o bege
 * chapado:
 *
 *   1. GRAO      ruido fino (baseFrequency 0.8). E a fibra do papel. Sozinho
 *                parece TV fora do ar; combinado, tira o liso.
 *   2. FIBRA     ruido medio (0.22), a meio caminho entre o grao e a nuvem.
 *                E ele que impede o grao de virar um chuvisco uniforme.
 *   3. NUVENS    ruido de frequencia BAIXA (0.014), que borra em manchas
 *                largas. Da a impressao de papel guardado em lugar umido.
 *   4. MANCHAS   quatro halos irregulares em posicoes primas entre si. Sao
 *                as marcas de dedo e de cha. Postos a mao porque ruido
 *                aleatorio nao produz mancha COM FORMA.
 *   5. BASE      o degrade bege de sempre, por baixo de tudo.
 *
 * `stitchTiles='stitch'` nos tres ruidos: sem ele o ladrilho aparece como
 * uma grade visivel de emendas quando o bloco e maior que o azulejo.
 *
 * A SUJEIRA DA BORDA e separada (`--papel-sujeira`), porque e sombra e nao
 * fundo. Ver o comentario dela logo abaixo.
 */
:root {
  --papel-fundo:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.28 0 0 0 0 0.17 0 0 0 0 0.04 0 0 0 0.42 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.22' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.34 0 0 0 0 0.22 0 0 0 0 0.07 0 0 0 0.26 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23m)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.28 0 0 0 0 0.10 0 0 0 0.30 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 60% 45% at 12% 18%, rgba(150, 108, 44, .20), transparent 70%),
    radial-gradient(ellipse 45% 55% at 88% 32%, rgba(132, 92, 36, .17), transparent 72%),
    radial-gradient(ellipse 70% 40% at 68% 88%, rgba(146, 104, 40, .19), transparent 68%),
    radial-gradient(ellipse 40% 50% at 30% 72%, rgba(120, 84, 32, .14), transparent 70%),
    linear-gradient(160deg, var(--papel-alto), var(--papel) 42%, var(--papel-baixo));

  /*
   * A borda queimada, em TRES degraus de alcance decrescente. Uma sombra so,
   * por mais forte que fosse, produzia um halo de contorno uniforme — que le
   * como "sombra de CSS", nao como papel velho. Escalonado assim (larga e
   * fraca, media, curta e forte) a queda de luz e desigual: escurece cedo,
   * apodrece perto da beirada e fecha quase preto no fio da borda.
   *
   * O tom e OCRE (terra queimada), o mesmo do grao e das manchas — papel
   * envelhece amarelando, nao avermelhando.
   */
  --papel-sujeira:
    inset 0 0 110px rgba(98, 62, 18, .52),
    inset 0 0 46px rgba(84, 51, 14, .50),
    inset 0 0 15px rgba(54, 30, 6, .62);

  /*
   * A mesma sujeira, em escala de superficie PEQUENA.
   *
   * Os desfoques acima sao em pixel fixo, entao valem para um cartao de
   * 300px de altura — numa bolha de chat de 50px, os 110px de alcance
   * cobrem a bolha inteira e ela nasce escura de ponta a ponta, sem miolo
   * claro. "Acho que sim." saia mais escuro que um paragrafo de seis linhas,
   * o que e o oposto de como papel envelhece.
   */
  --papel-sujeira-leve:
    inset 0 0 34px rgba(98, 62, 18, .34),
    inset 0 0 12px rgba(84, 51, 14, .32),
    inset 0 0 5px rgba(54, 30, 6, .40);

  /*
   * O GRAO DA BORDA — o que faz a beirada escura parecer suja em vez de
   * apenas sombreada.
   *
   * Existe separado por um motivo de PINTURA: `--papel-sujeira` e
   * `box-shadow: inset`, e sombra interna e pintada POR CIMA de todas as
   * camadas de fundo. Ou seja, ela alisava justamente o grao da regiao mais
   * escura — que e onde o grao mais aparece num papel de verdade. Este par
   * de ruidos vai num pseudo-elemento, que pinta DEPOIS da sombra e por isso
   * sobrevive a ela.
   *
   * Sao dois: um CLARO e um ESCURO. So escuro sobre borda escura seria
   * invisivel; e a poeira clara que cintila contra a sombra e da a leitura
   * de fibra levantada.
   */
  --grao-borda:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.92 0 0 0 0 0.74 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23c)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='e'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='4' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.20 0 0 0 0 0.11 0 0 0 0 0.02 0 0 0 0.62 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23e)'/%3E%3C/svg%3E");

  /* So aparece perto da borda: no miolo o papel fica limpo. `closest-side`
     faz a elipse encostar nos lados mais proximos, entao a mascara acompanha
     a proporcao do bloco — num cartao largo e baixo ela nao vira um circulo
     estourado para fora. */
  --grao-borda-mascara:
    radial-gradient(ellipse closest-side at 50% 50%, transparent 34%, rgba(0,0,0,.55) 74%, #000 100%);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/*
 * O atributo `hidden` precisa ganhar de qualquer `display` daqui.
 *
 * `hidden` esconde pela folha do NAVEGADOR, que perde para qualquer regra
 * de autor — entao `.ritual { display: flex }` deixava a tela do ritual
 * visivel e cobrindo a pagina inteira mesmo com `hidden` no HTML, tornando
 * o botao de tirar as cartas inclicavel. Sem barulho nenhum no console.
 */
[hidden] { display: none !important; }

html {
  background: var(--noite);
  /* Raiz em 17px: a Cormorant tem altura-x baixa e desenha menor do que o
     numero promete. Toda medida rem abaixo parte daqui. */
  font-size: 17px;
  overflow-x: clip;
}

body {
  margin: 0;
  color: var(--creme);
  font-family: "Cormorant Garamond", Georgia, serif;
  /* 600 porque a Cormorant em 400 e quase fio de cabelo: bonita num titulo
     grande, ilegivel num paragrafo inteiro no celular. */
  font-weight: 600;
  font-size: 19px;             /* piso: nada no produto e menor que isto */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /*
   * ALGARISMOS DE CAIXA-ALTA, e nao os antigos.
   *
   * A Cormorant vem com algarismos "old-style" por padrao: o 1 fica da
   * altura de um x, o 0 vira um o pequeno e o 4 desce abaixo da linha. Num
   * livro isso e bonito; num saldo de creditos "120" era lido como "I2O", e
   * data e preco ficavam ondulados. `lining-nums` poe todos na mesma altura
   * das maiusculas. O `font-feature-settings` e o mesmo pedido em sintaxe
   * antiga, para motores que ignoram a propriedade nova.
   */
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  min-height: 100dvh;
  padding-bottom: calc(var(--rodape) + env(safe-area-inset-bottom) + 8px);
  overflow-x: clip;
  /*
   * O ceu: dois claroes roxos presos ao fundo (nao rolam com a pagina) e a
   * noite por baixo. E o que impede o fundo chapado de parecer "preto de
   * economizar bateria" em vez de noite.
   */
  background:
    radial-gradient(1100px 700px at 12% -8%,  rgba(107, 63, 168, .30), transparent 62%),
    radial-gradient(900px 640px at 105% 12%, rgba(140, 90, 60, .18),  transparent 60%),
    var(--noite);
  background-attachment: fixed;
}

/* poeira de estrelas, discreta, por cima de tudo e sem capturar toque */
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.86 0 0 0 0 0.6 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

.env { position: relative; z-index: 1; max-width: var(--col); margin: 0 auto; padding: 0 16px; }

/* ── tipografia ────────────────────────────────────────────────────────── */

/*
 * Cinzel nos titulos: capitulares romanas, que e exatamente o que o mockup
 * pede e o que uma capa de baralho antigo usaria. Ela SO existe em
 * maiuscula de verdade — por isso todo titulo aqui leva `uppercase` e
 * espacamento; em caixa mista ela desenha versaletes e perde a forca.
 */
h1, h2, h3, .serif {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ouro-claro);
}
h1 { font-size: 1.45rem; line-height: 1.25; margin: 0 0 10px; }
h2 { font-size: 1.15rem; line-height: 1.3;  margin: 28px 0 12px; }
a  { color: var(--ouro); }

.rotulo {
  font-family: "Cinzel", Georgia, serif;
  font-size: 15px; text-transform: uppercase; letter-spacing: .3em;
  color: var(--ouro); margin: 0 0 8px;
}
.apoio { color: var(--creme-fraco); margin: 0 0 18px; }
.mini  { color: var(--creme-fraco); font-size: 17px; }
.centro { text-align: center; }

/*
 * Dentro do pergaminho a tinta troca de cor — senao o creme (feito para a
 * noite) sumiria no papel claro. Uma regra so, herdada por todo bloco:
 * cada cartao novo ja nasce legivel sem repetir cor em lugar nenhum.
 */
.bloco, .tiragem, .item, .chat__msg--eu {
  color: var(--tinta);
}
.bloco h1, .bloco h2, .bloco h3,
.tiragem h1, .tiragem h2, .tiragem h3 { color: #5c3b12; }
.bloco .mini, .tiragem .mini, .item .mini,
.bloco .apoio, .tiragem .apoio { color: var(--tinta-fraca); }
/*
 * `:not(.btn)` nao e zelo: um <a class="btn"> dentro de um bloco casava com
 * `.bloco a` (0,1,1), que ganha de `.btn` (0,1,0) — e o botao roxo ficava
 * com a letra marrom de link, ilegivel. O link de texto continua marrom; o
 * botao mantem a cor que o proprio botao define.
 */
.bloco a:not(.btn), .tiragem a:not(.btn) { color: var(--tinta-rubrica); }
.bloco .rotulo, .tiragem .rotulo { color: var(--tinta-ouro); }

/* ── cabecalho ─────────────────────────────────────────────────────────── */
.topo {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
  background: linear-gradient(to bottom, var(--noite) 62%, transparent);
}
.marca {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: "Cinzel", Georgia, serif; font-size: 1.15rem; letter-spacing: .16em;
  color: var(--ouro-claro); text-decoration: none; text-transform: uppercase;
}
.marca img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.marca b { font-weight: 600; }
/* o subtitulo da marca so cabe no trilho do desktop */
.marca__lema { display: none; }

.saldo {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--ouro-fundo); border-radius: 999px;
  padding: 7px 14px; font-size: 17px; color: var(--creme); text-decoration: none;
  background: rgba(58, 33, 96, .5);
}
.saldo b { color: var(--ouro-claro); font-weight: 600; font-size: 19px; }
/* a gema e mais alta que larga (losango): a altura e quem manda, e a largura
   segue sozinha — travar as duas achataria a pedra */
.saldo .gema { height: 22px; width: auto; flex: none; }
/* O segundo botao do topo so cabe a partir do desktop. `.topo` na frente
   nao e enfeite: sem ele a regra empata com `.btn { display: flex }`, que
   vem depois na folha e ganharia — o botao aparecia no celular, quebrado
   em duas linhas. */
.topo .topo__comprar { display: none; }

/* ── a moldura de ouro: o gesto que define o tema ──────────────────────────
 *
 * Todo cartao de pergaminho leva DUAS linhas de ouro — uma na borda do
 * elemento e outra, fina, recuada 5px para dentro (o `::before`). E a
 * moldura dupla de um baralho antigo, e e ela que faz o cartao parecer
 * impresso em vez de desenhado por CSS. Uma linha so fica administrativa.
 */
.moldura {
  position: relative;
  background:
    linear-gradient(160deg, var(--papel-alto), var(--papel) 42%, var(--papel-baixo));
  border: 1px solid var(--ouro-fundo);
  border-radius: var(--raio);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .5);
}
.moldura::before {
  content: "";
  position: absolute; inset: 5px;
  border: 1px solid rgba(196, 152, 74, .62);
  border-radius: calc(var(--raio) - 6px);
  pointer-events: none;
}

/*
 * O GRAO DA BORDA, aplicado.
 *
 * Vai nos pseudo-elementos porque `--papel-sujeira` e `box-shadow: inset`, e
 * sombra interna pinta POR CIMA de todo fundo — ela alisava exatamente o
 * grao da regiao escura. O pseudo-elemento pinta depois da sombra, entao o
 * grao sobrevive; a mascara o mantem so na beirada, deixando o miolo limpo
 * para o texto.
 */
.bloco::before, .tiragem::before, .portico::before,
.item::before, .chat__msg--eu::before, .moldura::before {
  background-image: var(--grao-borda);
  -webkit-mask-image: var(--grao-borda-mascara);
          mask-image: var(--grao-borda-mascara);
}
/* os dois que ainda nao tinham pseudo-elemento (nao levam moldura dupla:
   sao pequenos demais para duas linhas de ouro sem virar sujeira visual) */
.item::before, .chat__msg--eu::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/*
 * O grao entra ENTRE o fundo e o conteudo, nunca por cima dele.
 *
 * Como o pseudo-elemento e `position: absolute`, ele subia para a camada dos
 * posicionados — acima do texto e da carta, que sao conteudo normal — e
 * salpicava a leitura inteira. `z-index: -1` o joga para a camada logo acima
 * do fundo do proprio elemento (onde a sombra `inset` ja terminou de pintar)
 * e abaixo do texto.
 *
 * `isolation: isolate` no pai e obrigatorio junto: sem um contexto de
 * empilhamento proprio, um filho de z-index negativo escapa para TRAS do
 * fundo do pai e some de vez.
 */
.bloco, .tiragem, .item, .chat__msg--eu, .moldura { isolation: isolate; }
.bloco::before, .tiragem::before,
.item::before, .chat__msg--eu::before, .moldura::before { z-index: -1; }

/* ── blocos ────────────────────────────────────────────────────────────── */
.bloco {
  position: relative;
  background: var(--papel-fundo);
  border: 1px solid var(--ouro-fundo);
  border-radius: var(--raio);
  padding: 20px; margin-bottom: 14px;
  box-shadow: var(--papel-sujeira), 0 10px 30px rgba(0, 0, 0, .45);
}
.bloco::before {
  content: "";
  position: absolute; inset: 5px;
  border: 1px solid rgba(196, 152, 74, .62);
  border-radius: calc(var(--raio) - 6px);
  pointer-events: none;
}
.bloco--fino { padding: 15px 18px; }
/* painel escuro: para o que e atmosfera, nao leitura (chat, faixa de creditos) */
/*
 * O painel escuro NAO e pergaminho, entao larga tudo que envelhece papel: o
 * grao da borda, a mascara que o posiciona e a sombra ocre de `.bloco`.
 * Herdadas, elas punham poeira e mancha de cha sobre uma superficie de
 * noite — o efeito que faz o papel parecer antigo faz o painel parecer sujo.
 * Fica so a moldura dupla, que e desenho e nao desgaste.
 */
.bloco--noite {
  background: linear-gradient(160deg, var(--noite-alta), var(--noite-funda));
  color: var(--creme);
  border-color: var(--ouro-fundo);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.bloco--noite::before {
  border-color: rgba(212, 169, 94, .28);
  background-image: none;
  -webkit-mask-image: none;
          mask-image: none;
}

/*
 * O filete: a divisa com o losango de ouro no meio. O mesmo desenho que
 * separa as secoes no mockup, e o unico enfeite que aparece em toda pagina.
 */
.filete {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  color: var(--ouro); margin: 26px 0;
}
.filete::before, .filete::after {
  content: ""; height: 1px; flex: 1;
  background: linear-gradient(90deg, transparent, var(--ouro-fundo), transparent);
}
.filete__joia { font-size: 15px; color: var(--ouro); line-height: 1; }

/* ── botoes: area de toque nunca abaixo de 52px ────────────────────────── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 54px; padding: 13px 22px;
  /* `justify-content` centra a CAIXA do texto; quando o rotulo passa de uma
     linha, quem centra cada linha e o `text-align`. Sem ele a segunda linha
     encostava na esquerda e o botao parecia quebrado. */
  text-align: center;
  /*
   * Roxo escuro, em torno de #311951. O degrade nasce um pouco acima e
   * morre um pouco abaixo dele, para o botao ter volume sem clarear: com a
   * cor chapada ele vira um retangulo morto, e com o roxo claro de antes
   * competia com o ouro dos titulos em vez de sustenta-lo.
   *
   * A borda deixou de ser `--roxo-claro`: sobre um roxo desta profundidade
   * ela virava um contorno neon. Agora e a mesma familia, so dois passos
   * acima — le como aresta iluminada, nao como risco.
   */
  border: 1px solid #563a80; border-radius: 12px;
  background: linear-gradient(to bottom, #3f2168, #26123e);
  color: var(--ouro-claro);
  font-family: "Cinzel", Georgia, serif; font-weight: 600;
  font-size: .98rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  box-shadow: inset 0 1px 0 rgba(255, 225, 180, .20), 0 8px 22px rgba(24, 10, 44, .55);
}
.btn:active { transform: scale(.985); filter: brightness(1.1); }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* o botao de ouro: para a acao principal de compra, que precisa gritar mais */
.btn--ouro {
  background: linear-gradient(to bottom, #e2bd72, #a97f31);
  border-color: var(--ouro-claro); color: #2e1e08;
  box-shadow: inset 0 1px 0 rgba(255, 245, 215, .55), 0 8px 22px rgba(120, 85, 20, .45);
}
.btn--fantasma {
  background: rgba(58, 33, 96, .28); color: var(--ouro);
  border-color: var(--ouro-fundo); box-shadow: none;
}
/* `inline-flex`, e nao so `width: auto`: `.btn` e um flex de nivel BLOCO, e
   bloco com largura automatica ocupa a linha inteira — o botao pequeno saia
   esticado de ponta a ponta mesmo pedindo largura automatica. */
.btn--menor { display: inline-flex; min-height: 46px; font-size: .82rem; padding: 10px 16px; width: auto; }

/* dentro do pergaminho o fantasma inverte: borda de ouro sobre papel */
.bloco .btn--fantasma, .tiragem .btn--fantasma {
  background: rgba(138, 104, 40, .10); color: #7a4a12;
}

/* ── formulario ────────────────────────────────────────────────────────── */
.campo { display: block; margin-bottom: 14px; }
.campo span {
  display: block; margin-bottom: 6px; font-size: 14px;
  font-family: "Cinzel", Georgia, serif;
  letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-fraca);
}
.campo input, .campo textarea {
  width: 100%; padding: 13px 15px; border-radius: 10px;
  border: 1px solid var(--ouro-fundo); background: var(--papel-fundo); color: var(--tinta);
  box-shadow: inset 0 0 18px rgba(104, 68, 22, .18);
  font-family: inherit; font-weight: 600;
  /* 16px+ e obrigatorio: abaixo disso o iOS da zoom sozinho ao focar. */
  font-size: 19px;
}
.campo textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
/* Sem esta regra o navegador usa o cinza DELE (#757575), que e frio e lava
   sobre o pergaminho quente — o "DD/MM/AAAA" do nascimento sumia (2,0:1).
   Com a tinta fraca do cartao, a mesma dos rotulos, vai a 4,2:1.
   `opacity: 1` nao e enfeite: o Firefox aplica opacidade propria ao
   placeholder, e sem isto a cor escolhida chegaria clareada la. */
.campo input::placeholder, .campo textarea::placeholder {
  color: var(--tinta-fraca); opacity: 1;
}
.campo input:focus, .campo textarea:focus {
  outline: none; border-color: var(--roxo-claro);
  box-shadow: 0 0 0 3px rgba(139, 92, 199, .22);
}

.aviso { border-radius: 10px; padding: 12px 15px; margin-bottom: 14px; font-size: 18px; }
.aviso--erro { background: rgba(194, 96, 85, .14); border: 1px solid rgba(194, 96, 85, .55); color: #e3897d; }
.aviso--ok   { background: rgba(90, 148, 100, .14); border: 1px solid rgba(90, 148, 100, .55); color: #86c191; }
/* sobre pergaminho o aviso escurece para nao sumir */
.bloco .aviso--erro { color: #8f3226; }
.bloco .aviso--ok   { color: var(--tinta-verde); }

/* ── catalogo de tiragens ──────────────────────────────────────────────── */
.tiragem {
  position: relative; display: block; text-decoration: none;
  background: var(--papel-fundo);
  border: 1px solid var(--ouro-fundo);
  border-radius: var(--raio); padding: 16px 18px; margin-bottom: 12px;
  box-shadow: var(--papel-sujeira), 0 8px 24px rgba(0, 0, 0, .40);
  transition: border-color .2s ease, transform .18s ease, box-shadow .2s ease;
}
.tiragem::before {
  content: "";
  position: absolute; inset: 4px;
  border: 1px solid rgba(196, 152, 74, .55);
  border-radius: calc(var(--raio) - 5px);
  pointer-events: none;
}
.tiragem:active { transform: scale(.99); }
.tiragem--destaque {
  border-color: var(--ouro);
  box-shadow: var(--papel-sujeira), 0 0 0 1px rgba(212, 169, 94, .35),
              0 10px 30px rgba(0, 0, 0, .45);
}
.tiragem__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tiragem__nome {
  font-family: "Cinzel", Georgia, serif; font-size: .96rem;
  letter-spacing: .07em; text-transform: uppercase; color: #4a3110;
}
.tiragem__preco { color: var(--tinta-rubrica); white-space: nowrap; font-size: 17px; }
.tiragem__promessa { color: var(--tinta-fraca); margin: 6px 0 0; font-size: 18px; }
.selo {
  display: inline-block; font-family: "Cinzel", Georgia, serif;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: #7a4a12; border: 1px solid rgba(138, 104, 40, .7);
  border-radius: 999px; padding: 3px 11px;
}

/*
 * As vantagens da assinatura. Cada uma e um par titulo/detalhe, e nao uma
 * frase corrida: a pessoa varre a coluna dos titulos para decidir e so le o
 * detalhe do que a interessou. Uma lista de tres frases longas obriga a ler
 * tudo para achar a unica que importa para ela.
 *
 * A juncao e um grid de duas colunas — o losango numa, o texto na outra —
 * para o detalhe que passa de uma linha alinhar por baixo do titulo em vez de
 * voltar por debaixo do simbolo.
 */
.vantagens { list-style: none; margin: 16px 0 0; padding: 0; }
.vantagens li {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  align-items: start;
  padding: 11px 0;
  border-top: 1px solid rgba(138, 104, 40, .28);
}
.vantagens li:first-child { border-top: 0; padding-top: 2px; }
.vantagens__marca { color: var(--tinta-ouro); line-height: 1.45; }
.vantagens__t {
  font-family: "Cinzel", Georgia, serif; font-size: .92rem;
  letter-spacing: .05em; color: #4a3110; font-weight: 600;
}
/* o detalhe respira do titulo e nunca compete com ele */
.vantagens .mini { display: inline-block; margin-top: 3px; line-height: 1.5; }

/* ── paginas de conteudo (as que o Google le) ──────────────────────────────
 *
 * Elas sao LIDAS, e nao operadas: o corpo do texto cresce, a entrelinha abre e
 * a largura fica curta. A tela do produto e feita para o polegar decidir
 * rapido; estas sao feitas para alguem ler tres minutos antes de criar conta.
 */
.trilha {
  font-size: 15px; color: var(--creme-fraco);
  margin: 0 0 10px; letter-spacing: .04em;
}
.trilha a { color: var(--ouro); text-decoration: none; }
.trilha a:hover { text-decoration: underline; }
.trilha span { margin: 0 4px; }

/* o que a leitura responde */
.lista-ok { list-style: none; margin: 0 0 22px; padding: 0; }
.lista-ok li {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  padding: 9px 0; color: var(--creme); font-size: 19px; line-height: 1.5;
}
.lista-ok li span:first-child { color: var(--ouro); }
/*
 * Dentro do pergaminho a tinta troca, como em todo o resto do sistema. A
 * regra `.bloco { color: var(--tinta) }` sozinha nao alcanca aqui: `.lista-ok
 * li` (0,1,1) ganha de `.bloco` (0,1,0), e o creme — que foi feito para o
 * fundo de noite — ficava a um fio de distancia da cor do proprio papel.
 */
.bloco .lista-ok li { color: var(--tinta); }
.bloco .lista-ok li span:first-child { color: var(--tinta-ouro); }

/* as posicoes da tiragem, numeradas */
.posicoes { list-style: none; margin: 0 0 14px; padding: 0; counter-reset: pos; }
.posicoes li {
  display: grid; grid-template-columns: auto 1fr; gap: 12px;
  align-items: start; padding: 12px 0;
  border-top: 1px solid rgba(138, 104, 40, .22);
}
.posicoes li:first-child { border-top: 0; }
.posicoes__n {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 999px;
  border: 1px solid var(--ouro-fundo); background: rgba(58, 33, 96, .3);
  font-family: "Cinzel", Georgia, serif; font-size: 15px; color: var(--ouro);
  /* algarismos alinhados: o Cormorant sai com numero de caixa-baixa por
     padrao e o "1" descia abaixo da linha dentro do circulo */
  font-variant-numeric: lining-nums;
}
.posicoes__t {
  font-family: "Cinzel", Georgia, serif; font-size: .92rem;
  letter-spacing: .05em; color: var(--ouro-claro); font-weight: 600;
}

/* a carta de exemplo: arte a esquerda, significado a direita */
.grade--cartas { display: grid; gap: 12px; margin-bottom: 8px; }
.carta-tema { display: flex; gap: 14px; align-items: flex-start; }
.carta-tema img {
  width: 74px; height: auto; flex: none;
  border-radius: 6px; border: 1px solid var(--ouro-fundo);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .45);
}
/* no acervo a mesma linha vira link, e precisa reagir ao toque */
a.carta-tema { text-decoration: none; transition: border-color .2s ease, transform .18s ease; }
a.carta-tema:active { transform: scale(.99); }

/* ── o acervo de significados ──────────────────────────────────────────── */
/*
 * A ficha da carta: arte grande a esquerda, identificacao a direita. Ela e a
 * primeira coisa da pagina e precisa entregar de uma vez o que a pessoa veio
 * conferir — qual carta e esta, e o que ela diz numa frase.
 */
.verbete {
  display: flex; gap: 18px; align-items: flex-start;
  margin: 10px 0 24px;
}
.verbete__arte {
  width: 132px; height: auto; flex: none;
  border-radius: 8px; border: 1px solid var(--ouro-fundo);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
}
.verbete__chaves {
  font-family: "Cinzel", Georgia, serif; font-size: 14px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ouro); margin: 0 0 10px;
}

/*
 * A navegacao entre arcanos vizinhos, no pe da ficha.
 *
 * No celular ela e de DUAS linhas, e nao de tres colunas. Nomes como
 * "A Roda da Fortuna" e "A Temperança" nao cabem em um terco de 358px: o da
 * direita quebrava e largava a seta sozinha na linha de baixo, deixando um
 * vao alto e torto no fim da pagina. Anterior e proximo dividem a primeira
 * linha; o link para o acervo fica na segunda, centrado.
 */
.vizinhas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "ant prox" "todas todas";
  align-items: start; gap: 14px 12px;
  margin: 24px 0 0; padding-top: 16px;
  border-top: 1px solid rgba(138, 104, 40, .28);
  font-size: 17px; line-height: 1.35;
}
.vizinhas a { color: var(--ouro); text-decoration: none; }
.vizinhas a:hover { text-decoration: underline; }
.vizinhas__ant   { grid-area: ant; }
.vizinhas__prox  { grid-area: prox; text-align: right; }
.vizinhas__todas {
  grid-area: todas; text-align: center;
  color: var(--creme-fraco); font-size: 16px;
}

@media (min-width: 560px) {
  /* a partir daqui os tres cabem lado a lado, com o acervo no meio */
  .vizinhas {
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "ant todas prox";
    align-items: center;
  }
}

/*
 * A FAQ fica ABERTA, sem <details>. Texto escondido atras de um clique
 * continua sendo indexado, mas o Google ha anos o considera menos relevante
 * que o texto visivel — e numa pagina cujo trabalho inteiro e responder
 * perguntas, esconder as respostas e trabalhar contra o proprio objetivo.
 */
.faq { margin-bottom: 8px; }
.faq__item { padding: 14px 0; border-top: 1px solid rgba(138, 104, 40, .22); }
.faq__item:first-child { border-top: 0; padding-top: 4px; }
.faq__item h3 {
  margin: 0 0 6px; font-size: 1.05rem;
  font-family: "Cinzel", Georgia, serif; color: var(--ouro-claro);
  letter-spacing: .03em;
}
.faq__item p { margin: 0; color: var(--creme-fraco); font-size: 19px; line-height: 1.65; }

/* ── cartas ────────────────────────────────────────────────────────────── */
.leque { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 6px; }
.leque--1 { grid-template-columns: minmax(0, 190px); justify-content: center; }
.leque--2 { grid-template-columns: repeat(2, 1fr); }
.leque--4 { grid-template-columns: repeat(2, 1fr); }

/*
 * `container-type` mora AQUI, e nao na face do verso: a face e uma das duas
 * paginas de um giro 3D, e contencao numa delas achata o `preserve-3d` do par
 * — o verso pararia de sumir ao virar. Aqui em cima, fora da mecanica do
 * giro, a carta continua sendo so a referencia de largura para o nome
 * impresso no verso (ver `.carta__verso::after`).
 */
.carta { position: relative; perspective: 1100px; container-type: inline-size; }

/* o par frente/verso que gira */
.carta__flip {
  position: relative; width: 100%; aspect-ratio: 170 / 321;
  transform-style: preserve-3d;
  /* Estado PADRAO = frente a mostra. E o que faz a biblioteca abrir com as
     cartas ja viradas, e o que salva a tela se a animacao nao rodar (movimento
     reduzido, JS desligado): sem isto, a pessoa ficaria olhando seis versos. */
  transform: rotateY(180deg);
}
.carta__face {
  position: absolute; inset: 0; border-radius: 7px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  /* a moldura de ouro tambem na carta: e ela que costura a arte de Marselha
     (creme, chapada) ao tema escuro sem precisar redesenhar o baralho */
  border: 1px solid var(--ouro-fundo);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .55);
  overflow: hidden;
}
.carta__frente { transform: rotateY(180deg); background: var(--papel-alto); }
.carta__frente img { display: block; width: 100%; height: 100%; object-fit: cover; }
/*
 * A MESMA sujeira de borda nas cartas.
 *
 * E o que faz o baralho de Marselha — impresso liso, fundo creme uniforme —
 * pertencer ao resto da tela: as cartas envelhecem junto com o pergaminho em
 * vez de parecerem uma digitalizacao limpa colada por cima. Vai num
 * `::after` porque a arte e um <img> e sombra interna nao a alcanca.
 */
.carta__frente::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow:
    inset 0 0 30px rgba(88, 56, 16, .50),
    inset 0 0 9px rgba(70, 40, 10, .55);
  /* as manchas tambem na carta, so que mais fracas que no papel: a arte
     precisa continuar legivel por baixo delas */
  background:
    radial-gradient(ellipse 50% 30% at 10% 8%, rgba(126, 88, 34, .16), transparent 70%),
    radial-gradient(ellipse 45% 28% at 92% 78%, rgba(112, 76, 28, .15), transparent 72%);
}
/*
 * O grao da borda tambem na carta. Vai num segundo pseudo-elemento (o
 * `::after` acima ja carrega a sombra e as manchas) porque a mascara que
 * limita o grao a beirada apagaria as duas se dividissem o mesmo elemento.
 */
.carta__frente::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--grao-borda);
  -webkit-mask-image: var(--grao-borda-mascara);
          mask-image: var(--grao-borda-mascara);
  opacity: .8;
}

/* ── O VERSO ──────────────────────────────────────────────────────────────
 *
 * Nao ha imagem de verso no acervo: ele e desenhado aqui. E a superficie que
 * MAIS aparece no site — as sete cartas embaralhando durante a espera inteira
 * da IA, e todas as cartas de uma tiragem antes de virarem — entao e ela que
 * leva a marca da casa, como num baralho impresso de verdade.
 *
 * As regras do verso e as do baralho que embaralha andam JUNTAS, num seletor
 * so. Elas ja foram duas copias do mesmo desenho, e copia envelhece torta: na
 * primeira alteracao a pilha que embaralha deixaria de ser o mesmo baralho que
 * cai na mesa um segundo depois.
 */
.carta__verso, .baralho__c {
  /*
   * O selo entra como camada de fundo, e nao como <img>: o verso e decorativo
   * (`aria-hidden` no HTML) e existe em sete copias na tela do embaralhamento
   * — sete <img> da marca seriam sete elementos que ninguem le.
   *
   * A url mora AQUI, e nao numa variavel em `:root`: `url()` dentro de custom
   * property tem historico de resolver contra o documento em vez de contra a
   * folha, e o caminho quebraria dependendo do navegador.
   */
  background:
    url(logo.png) no-repeat 50% 38% / 44% auto,
    repeating-linear-gradient(45deg, rgba(212, 169, 94, .07) 0 5px, transparent 5px 11px),
    repeating-linear-gradient(-45deg, rgba(212, 169, 94, .07) 0 5px, transparent 5px 11px),
    /* o brilho roxo acompanha o GRUPO (selo + nome), nao so o selo: centrado
       no logotipo ele deixava a palavra caida numa parte escura da carta */
    radial-gradient(circle at 50% 45%, rgba(107, 63, 168, .5), transparent 62%),
    linear-gradient(to bottom, #2b1a45, #150d22);
}
/*
 * O nome, sob o selo.
 *
 * `cqw` e obrigatorio aqui: a mesma carta e desenhada com 112px de largura no
 * celular e com 300px no desktop, quase o triplo. Em pixel fixo o nome sairia
 * grande demais numa ponta ou ilegivel na outra; em porcentagem da largura da
 * carta, ele ocupa sempre a mesma fatia do verso — que e como uma marca
 * impressa se comporta. O px antes serve de reserva para quem nao tem `cqw`.
 */
.carta__verso::after, .baralho__c::after {
  content: "CliSoul";
  /* 60% poe o conjunto selo+nome com o centro OTICO em ~48% da altura — um
     fio acima do meio geometrico, que e onde uma marca impressa assenta */
  position: absolute; left: 4%; right: 4%; top: 60%;
  text-align: center; white-space: nowrap;
  font-family: "Cinzel", Georgia, serif; text-transform: uppercase;
  font-size: 11px;
  font-size: 9.2cqw;
  letter-spacing: .17em;
  /* o `letter-spacing` poe espaco DEPOIS da ultima letra tambem; sem este
     empurrao a palavra assenta um fio a esquerda do centro da carta */
  text-indent: .17em;
  color: var(--ouro);
  text-shadow: 0 0 12px rgba(212, 169, 94, .5), 0 1px 2px rgba(0, 0, 0, .6);
}
.carta__verso {
  box-shadow: inset 0 0 0 3px rgba(212, 169, 94, .3), inset 0 0 26px rgba(0, 0, 0, .55);
}
.carta__pos {
  font-family: "Cinzel", Georgia, serif; font-size: 13px;
  letter-spacing: .08em; text-transform: uppercase;
  margin: 9px 0 0; text-align: center; color: var(--ouro); line-height: 1.25;
}
.carta__nome { margin: 3px 0 0; text-align: center; color: var(--creme); line-height: 1.2; font-size: 17px; }

/* entrada escalonada: cada carta chega um pouco depois da anterior */
@keyframes surgir { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.carta { animation: surgir .75s cubic-bezier(.16, 1, .3, 1) both; }

/* ── A REVELACAO ──────────────────────────────────────────────────────────
 *
 * So na leitura recem-tirada (`.leque--revelar`). Quem reabre uma leitura da
 * biblioteca nao esta descobrindo nada: virar carta de novo ali seria teatro
 * repetido, e teatro repetido cansa.
 *
 * Tres tempos por carta: ela POUSA (desliza e assenta), VIRA (gira em 3D com
 * um leve avanco na direcao de quem olha, para o giro ter volume) e so entao
 * o NOME aparece — se a legenda viesse antes, entregaria a carta e mataria o
 * unico segundo que importa.
 */
@keyframes pousar {
  0%   { opacity: 0; transform: translateY(-26px) scale(.9) rotate(var(--tombo, -4deg)); }
  70%  { opacity: 1; transform: translateY(4px)   scale(1.02) rotate(0deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes virar {
  0%   { transform: rotateY(0deg)   translateZ(0)    scale(1); }
  45%  { transform: rotateY(90deg)  translateZ(38px) scale(1.07); }
  100% { transform: rotateY(180deg) translateZ(0)    scale(1); }
}
@keyframes legenda { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.leque--revelar .carta       { animation: pousar .7s cubic-bezier(.16, 1, .3, 1) both; }
.leque--revelar .carta__flip { animation: virar .95s cubic-bezier(.5, 0, .2, 1) both; }
.leque--revelar .carta__pos,
.leque--revelar .carta__nome { animation: legenda .6s ease-out both; }

/* tombo alternado na queda: pilha feita a mao, nao empilhada por maquina */
.leque--revelar .carta:nth-child(odd)  { --tombo: -5deg; }
.leque--revelar .carta:nth-child(even) { --tombo:  5deg; }

/*
 * O escalonamento. Sao 12 posicoes porque A Roda do Ano tem doze cartas —
 * e o CSS nao sabe contar irmaos sozinho.
 *
 * Passo de 0.42s: rapido o bastante para doze cartas nao virarem espera
 * (a ultima cai em ~5s), lento o bastante para cada virada ser um evento.
 */
.leque--revelar .carta:nth-child(1)  { animation-delay: .10s }
.leque--revelar .carta:nth-child(2)  { animation-delay: .52s }
.leque--revelar .carta:nth-child(3)  { animation-delay: .94s }
.leque--revelar .carta:nth-child(4)  { animation-delay: 1.36s }
.leque--revelar .carta:nth-child(5)  { animation-delay: 1.78s }
.leque--revelar .carta:nth-child(6)  { animation-delay: 2.20s }
.leque--revelar .carta:nth-child(7)  { animation-delay: 2.62s }
.leque--revelar .carta:nth-child(8)  { animation-delay: 3.04s }
.leque--revelar .carta:nth-child(9)  { animation-delay: 3.46s }
.leque--revelar .carta:nth-child(10) { animation-delay: 3.88s }
.leque--revelar .carta:nth-child(11) { animation-delay: 4.30s }
.leque--revelar .carta:nth-child(12) { animation-delay: 4.72s }

/* a virada comeca depois da queda, e a legenda depois da virada */
.leque--revelar .carta:nth-child(1)  .carta__flip { animation-delay:  .45s } .leque--revelar .carta:nth-child(1)  .carta__pos, .leque--revelar .carta:nth-child(1)  .carta__nome { animation-delay: 1.20s }
.leque--revelar .carta:nth-child(2)  .carta__flip { animation-delay:  .87s } .leque--revelar .carta:nth-child(2)  .carta__pos, .leque--revelar .carta:nth-child(2)  .carta__nome { animation-delay: 1.62s }
.leque--revelar .carta:nth-child(3)  .carta__flip { animation-delay: 1.29s } .leque--revelar .carta:nth-child(3)  .carta__pos, .leque--revelar .carta:nth-child(3)  .carta__nome { animation-delay: 2.04s }
.leque--revelar .carta:nth-child(4)  .carta__flip { animation-delay: 1.71s } .leque--revelar .carta:nth-child(4)  .carta__pos, .leque--revelar .carta:nth-child(4)  .carta__nome { animation-delay: 2.46s }
.leque--revelar .carta:nth-child(5)  .carta__flip { animation-delay: 2.13s } .leque--revelar .carta:nth-child(5)  .carta__pos, .leque--revelar .carta:nth-child(5)  .carta__nome { animation-delay: 2.88s }
.leque--revelar .carta:nth-child(6)  .carta__flip { animation-delay: 2.55s } .leque--revelar .carta:nth-child(6)  .carta__pos, .leque--revelar .carta:nth-child(6)  .carta__nome { animation-delay: 3.30s }
.leque--revelar .carta:nth-child(7)  .carta__flip { animation-delay: 2.97s } .leque--revelar .carta:nth-child(7)  .carta__pos, .leque--revelar .carta:nth-child(7)  .carta__nome { animation-delay: 3.72s }
.leque--revelar .carta:nth-child(8)  .carta__flip { animation-delay: 3.39s } .leque--revelar .carta:nth-child(8)  .carta__pos, .leque--revelar .carta:nth-child(8)  .carta__nome { animation-delay: 4.14s }
.leque--revelar .carta:nth-child(9)  .carta__flip { animation-delay: 3.81s } .leque--revelar .carta:nth-child(9)  .carta__pos, .leque--revelar .carta:nth-child(9)  .carta__nome { animation-delay: 4.56s }
.leque--revelar .carta:nth-child(10) .carta__flip { animation-delay: 4.23s } .leque--revelar .carta:nth-child(10) .carta__pos, .leque--revelar .carta:nth-child(10) .carta__nome { animation-delay: 4.98s }
.leque--revelar .carta:nth-child(11) .carta__flip { animation-delay: 4.65s } .leque--revelar .carta:nth-child(11) .carta__pos, .leque--revelar .carta:nth-child(11) .carta__nome { animation-delay: 5.40s }
.leque--revelar .carta:nth-child(12) .carta__flip { animation-delay: 5.07s } .leque--revelar .carta:nth-child(12) .carta__pos, .leque--revelar .carta:nth-child(12) .carta__nome { animation-delay: 5.82s }

/* ── o ritual: o baralho embaralhando enquanto o servidor trabalha ─────── */
.ritual {
  min-height: 62vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.ritual p {
  font-family: "Cinzel", Georgia, serif; font-size: 1.05rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ouro-claro); margin: 0 0 10px;
}
.ritual .mini { letter-spacing: .1em; color: var(--creme-fraco); font-size: .85rem; }

/* a luz continua, agora como halo ATRAS do baralho.
   `inset: 0 + margin: auto` centraliza sem gastar o `transform`, que a
   animacao de respiro precisa ter so para ela. */
.luz {
  position: absolute; inset: 0; margin: auto;
  width: 74vmin; height: 74vmin; border-radius: 50%;
  background: radial-gradient(circle, rgba(107, 63, 168, .45) 0%, transparent 62%);
  animation: respirar 6s ease-in-out infinite; pointer-events: none;
}
@keyframes respirar { 0%, 100% { transform: scale(.9); opacity: .5 } 50% { transform: scale(1.06); opacity: .95 } }

/*
 * A PILHA. Sete cartas empilhadas; cada uma sai por um lado, descreve um
 * arco e volta por baixo — que e como uma mao embaralha de verdade. O
 * atraso desigual entre elas e proposital: passo exato soa a maquina.
 *
 * Isto roda em laco ate a pagina trocar, entao ele cobre uma espera de 2s
 * ou de 20s sem mudar nada. A lentidao da IA vira parte do ritual em vez de
 * virar um spinner pedindo desculpa.
 *
 * O ciclo e de 2.6s de proposito. Mais rapido, o olho perde o arco e so
 * sobra tremelique — o gesto precisa durar o suficiente para ser LIDO como
 * uma mao embaralhando.
 */
/* `container-type` pelo mesmo motivo de `.carta`: e daqui que o nome no verso
   tira a largura de referencia. Ver `.carta__verso`, onde o verso e desenhado
   uma vez so para as duas superficies. */
.baralho {
  position: relative; width: 132px; height: 249px; margin-bottom: 30px;
  container-type: inline-size;
}
.baralho__c {
  position: absolute; inset: 0; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--ouro-fundo);
  box-shadow: inset 0 0 0 3px rgba(212, 169, 94, .26), 0 8px 20px rgba(0, 0, 0, .55);
  animation: embaralhar 2.6s cubic-bezier(.35, 0, .3, 1) infinite;
}
@keyframes embaralhar {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  14%  { transform: translate(0, -14px) rotate(0deg) scale(1.04); }
  38%  { transform: translate(var(--lado, 76px), -30px) rotate(var(--giro, 13deg)) scale(1.04); }
  62%  { transform: translate(var(--lado, 76px), 8px) rotate(var(--giro, 13deg)) scale(1); }
  86%  { transform: translate(0, 2px) rotate(0deg) scale(1); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}
.baralho__c:nth-child(1) { --lado:  78px; --giro:  14deg; animation-delay: 0s;    z-index: 7 }
.baralho__c:nth-child(2) { --lado: -74px; --giro: -12deg; animation-delay: .33s;  z-index: 6 }
.baralho__c:nth-child(3) { --lado:  70px; --giro:  10deg; animation-delay: .69s;  z-index: 5 }
.baralho__c:nth-child(4) { --lado: -80px; --giro: -15deg; animation-delay: .98s;  z-index: 4 }
.baralho__c:nth-child(5) { --lado:  66px; --giro:  11deg; animation-delay: 1.34s; z-index: 3 }
.baralho__c:nth-child(6) { --lado: -70px; --giro: -13deg; animation-delay: 1.66s; z-index: 2 }
.baralho__c:nth-child(7) { --lado:  74px; --giro:  12deg; animation-delay: 2.01s; z-index: 1 }

/* ── texto da leitura ──────────────────────────────────────────────────── */
.leitura { font-size: 19px; line-height: 1.75; color: var(--creme); }
.leitura p { margin: 0 0 18px; }
.leitura p:first-child::first-letter {
  font-family: "Cinzel", Georgia, serif; font-weight: 600;
  font-size: 3.1em; line-height: .82; float: left; padding: .06em .12em 0 0; color: var(--ouro);
}

/* ── biblioteca ────────────────────────────────────────────────────────── */
.item {
  position: relative;
  display: flex; gap: 14px; align-items: center; text-decoration: none;
  background: var(--papel-fundo);
  border: 1px solid var(--ouro-fundo);
  border-radius: var(--raio); padding: 12px 15px; margin-bottom: 10px;
  box-shadow: var(--papel-sujeira), 0 6px 18px rgba(0, 0, 0, .38);
}
.item__t {
  font-family: "Cinzel", Georgia, serif; font-size: .88rem; line-height: 1.3;
  letter-spacing: .05em; text-transform: uppercase; color: #4a3110;
}
.item__s { color: var(--tinta-fraca); font-size: 17px; line-height: 1.35; }
.item__q { font-style: italic; color: var(--tinta); }

/*
 * Filtro por tiragem: uma fita horizontal de chips, nao um <select>. No
 * celular rola com o polegar; a barra de rolagem some (webkit) porque o
 * gesto ja diz "tem mais" sem precisar da barra por cima.
 */
.chips {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  padding: 2px 2px 4px; margin: 14px 0 16px;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; white-space: nowrap; text-decoration: none;
  padding: 7px 15px; border-radius: 999px; border: 1px solid var(--ouro-fundo);
  color: var(--creme-fraco); font-size: 15px;
  font-family: "Cinzel", Georgia, serif; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(58, 33, 96, .3);
}
.chip.on { color: var(--ouro-claro); border-color: var(--ouro); background: rgba(107, 63, 168, .38); }

.paginacao {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 22px 0 6px;
}
.paginacao .btn--menor { flex: none; }

/*
 * O LEQUE EM MINIATURA.
 *
 * As cartas se abrem em torno de um ponto ABAIXO delas (transform-origin em
 * 50% 130%): e assim que um leque se abre na mao, e o que evita que a
 * sobreposicao pareca so uma pilha torta. Cada carta gira um passo a mais
 * que a anterior, com o eixo do leque no meio (a 3a fica reta).
 */
.mini-leque {
  position: relative; flex: none;
  display: flex; align-items: flex-start;
  padding: 6px 2px 10px;                 /* respiro para a rotacao nao cortar */
}
.mini-leque img {
  width: 36px; flex: none;
  border-radius: 4px; border: 1px solid var(--ouro-fundo);
  box-shadow: 0 3px 9px rgba(0, 0, 0, .4);
  transform-origin: 50% 130%;
  /* --i vem do PHP: 0 na primeira carta. O -2 poe o eixo na do meio. */
  transform: rotate(calc((var(--i) - 2) * 7deg));
  z-index: calc(var(--i) + 1);           /* a de cima e sempre a mais recente */
}
.mini-leque img + img { margin-left: -22px; }
/* `position: relative` + z-index alto: sem isso o contador some por baixo da
   ultima carta, que e um elemento posicionado e ganha a pintura. */
.mini-leque__mais {
  position: relative; z-index: 9;
  align-self: center; margin-left: 13px;   /* limpa o canto da carta girada */
  color: var(--tinta-rubrica); font-size: 15px; white-space: nowrap;
}
/* uma carta so nao e leque: fica reta e um pouco maior */
.mini-leque img:only-child { transform: none; width: 44px; }

/* ── grade: uma coluna no celular, duas no desktop ─────────────────────── */
.grade > form { margin: 0; }
.grade > form .tiragem { height: 100%; }

/* ── navegacao inferior: o polegar alcanca sem esticar ─────────────────── */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(14, 9, 23, .97);
  border-top: 1px solid var(--ouro-fundo);
  padding-bottom: env(safe-area-inset-bottom);
  backdrop-filter: blur(10px);
}
.nav a {
  position: relative;
  min-height: var(--rodape); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  text-decoration: none; color: var(--creme-fraco);
  font-family: "Cinzel", Georgia, serif; font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase;
}
.nav a.on { color: var(--ouro-claro); background: rgba(107, 63, 168, .22); }
/* a marca de aba ativa: um fio de ouro colado no topo do item */
.nav a.on::before {
  content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ouro), transparent);
}
.nav svg { width: 23px; height: 23px; flex: none; }
/*
 * A gema no lugar do icone de traco em "Creditos". Ela e um losango alto,
 * entao a ALTURA e quem manda e a largura segue — travar as duas achataria
 * a pedra. Um pouco maior que os 23px dos irmaos porque, sendo estreita,
 * no mesmo tamanho ela parecia menor que todos eles.
 */
.nav__gema { height: 26px; width: auto; flex: none; filter: drop-shadow(0 0 7px rgba(139, 92, 199, .55)); }
.nav__legenda { display: none; }   /* o sublabel so cabe no trilho do desktop */

/* ── o trilho lateral ──────────────────────────────────────────────────────
 *
 * `display: contents` e a peca central do layout. No celular a <aside> some
 * como CAIXA mas seus filhos continuam existindo, virando filhos diretos do
 * <body>: a marca e o rodape do trilho se escondem por regra propria, e o
 * <nav> volta a ser a barra fixa de baixo. Assim existe UM SO <nav> no
 * documento servindo as duas telas — dois <nav> iguais fariam um leitor de
 * tela anunciar a navegacao inteira duas vezes.
 */
.lateral { display: contents; }
.lateral > .marca, .lateral__fim { display: none; }
.corpo { min-width: 0; }

/* ── chat do Circulo ──────────────────────────────────────────────────────
 *
 * As DUAS vozes falam em pergaminho. Quem separa uma da outra e o lado, o
 * retrato e o nome — como num mensageiro — e nao a cor: com a Oracula em
 * roxo, o texto longo dela (que e o que se le de verdade) caia sobre o
 * unico fundo escuro da tela, e a conversa ficava listrada.
 */
.chat__lista { padding-bottom: 96px; }
.chat__vazio { color: var(--creme-fraco); font-style: italic; margin: 8px 0 30px; }

/* a linha: o retrato de fora, a bolha dentro.
   `scroll-margin` para o `scrollIntoView` da mensagem nova nao a encostar
   embaixo do compositor (fixo) nem embaixo do cabecalho (sticky). */
.chat__linha {
  display: flex; align-items: flex-end; gap: 9px; margin-bottom: 12px;
  scroll-margin-bottom: calc(var(--compositor) + 12px);
  scroll-margin-top: 96px;   /* a barra da conversa, o unico sticky da tela */
}
.chat__linha--eu { justify-content: flex-end; }
.chat__avatar {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  object-fit: cover; object-position: 50% 20%;   /* o rosto, nao o manto */
  border: 1px solid var(--ouro-fundo);
  /* desce junto com a base da bolha, como no WhatsApp */
  margin-bottom: 2px;
}

.chat__msg {
  position: relative;
  max-width: 84%; padding: 9px 14px 6px;
  border-radius: 14px; font-size: 18px; line-height: 1.55;
  border: 1px solid var(--ouro-fundo);
  background: var(--papel-fundo);
  box-shadow: var(--papel-sujeira-leve);
  color: var(--tinta);
}
.chat__msg p { margin: 0 0 8px; }
.chat__msg p:last-of-type { margin-bottom: 0; }
.chat__msg--eu  { border-bottom-right-radius: 4px; }
.chat__msg--ia  { border-bottom-left-radius: 4px; }
.chat__msg--oraculo { opacity: .96; }

/* o nome de quem fala, no alto da bolha — so a Oracula leva, porque so ela
   tem nome a dizer: a outra ponta e sempre a propria pessoa */
.chat__autor {
  display: block; margin-bottom: 3px;
  font-family: "Cinzel", Georgia, serif; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-rubrica);
}

/*
 * A hora, encostada na direita e recuada para dentro da ultima linha, como
 * num mensageiro. `float: right` (e nao um bloco proprio) para o texto
 * poder correr ao lado dela quando o paragrafo final for curto — assim uma
 * mensagem de tres palavras nao ganha uma linha inteira so para o relogio.
 */
.chat__hora {
  float: right; margin: 4px 0 0 12px;
  font-size: 13px; color: var(--tinta-fraca); letter-spacing: .04em;
}

/*
 * "DIGITANDO" — as tres bolinhas.
 *
 * Mora numa bolha de verdade (mesmo pergaminho, mesmo retrato ao lado), e
 * nao num aviso a parte: e a resposta CHEGANDO, entao ela ocupa desde ja o
 * lugar onde a resposta vai aparecer. Um spinner solto no rodape diria
 * "carregando"; isto diz "ela esta escrevendo".
 *
 * O passo de 0.16s entre as bolinhas e a onda que o olho le como digitacao.
 * Igual, seria pisca-pisca; muito mais lento, viraria contagem.
 */
.chat__msg--digitando { padding: 14px 18px; }
.digitando { display: flex; align-items: center; gap: 6px; }
.digitando i {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--tinta-rubrica);
  animation: pontinho 1.25s ease-in-out infinite;
}
.digitando i:nth-child(2) { animation-delay: .16s; }
.digitando i:nth-child(3) { animation-delay: .32s; }
@keyframes pontinho {
  0%, 60%, 100% { opacity: .28; transform: translateY(0) scale(.85); }
  30%           { opacity: 1;   transform: translateY(-4px) scale(1); }
}
/* Sem movimento, as bolinhas ficam paradas e visiveis — some a animacao,
   nao o aviso de que a resposta esta vindo. */
@media (prefers-reduced-motion: reduce) {
  .digitando i { opacity: .7; }
}

/*
 * O cabecalho da conversa — a barra do aplicativo desta tela.
 *
 * Gruda em `top: 0` porque no chat ele e o UNICO cabecalho: a barra do site
 * nao e desenhada aqui (`$semTopo` em `abrirPagina`). Duas barras sticky
 * disputando `top: 0` faziam uma sumir sob a outra, e empilhadas comiam
 * 120px de uma tela de celular que ja precisa do teclado.
 *
 * Sangra para fora da coluna com margens negativas e volta a largura toda:
 * barra de aplicativo encostada nas bordas da tela le como parte do
 * aplicativo; centrada e com respiro dos lados, leria como mais um cartao.
 */
/*
 * `.oracula` e so a IDENTIFICACAO dela: retrato + nome + estado. Aparece em
 * tres lugares — na barra do chat, no cartao da tela inicial e no convite
 * para assinar — entao ela nao carrega posicao, fundo nem margem propria.
 * Quem faz dela uma barra de aplicativo e o `.barra-chat` abaixo; nos
 * cartoes ela e apenas uma linha de conteudo.
 */
.oracula { display: flex; align-items: center; gap: 11px; min-width: 0; }

/*
 * A barra da conversa. CHAPADA de proposito: fundo solido igual ao da tela,
 * um fio de linha embaixo e nada mais. Com sombra, desfoque e moldura ela
 * lia como um cartao flutuando sobre a conversa; barra de aplicativo nao
 * flutua — ela E a borda de cima da tela, e so o fio a separa do que rola
 * por baixo. Sangra para fora da coluna para encostar nas bordas.
 */
.barra-chat {
  position: sticky; top: 0; z-index: 15;
  display: flex; align-items: center; gap: 6px;
  padding: calc(env(safe-area-inset-top) + 9px) 16px 9px;
  margin: 0 -16px 10px;
  background: var(--noite-funda);
  border-bottom: 1px solid rgba(138, 104, 40, .45);
}
.barra-chat__voltar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; margin-left: -8px;
  color: var(--creme); text-decoration: none;
}
.barra-chat__voltar svg { width: 22px; height: 22px; }
.oracula img {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  object-fit: cover;          /* o retrato ja vem recortado no rosto */
  border: 1px solid rgba(138, 104, 40, .55);
}
.oracula__nome {
  font-family: "Cinzel", Georgia, serif; font-size: .88rem;
  letter-spacing: .06em; color: var(--creme); text-transform: none;
}
.oracula__estado { color: var(--verde); font-size: 14px; letter-spacing: .03em; }
.oracula__estado::before { content: "●"; margin-right: 5px; font-size: 9px; vertical-align: 2px; }

/*
 * O compositor fica na base da tela (nao em cima da barra de baixo): no
 * celular/tablet ela some no chat (ver `.nav--chat`), e no desktop a barra
 * e um trilho lateral que nunca ocupa a base — entao `bottom: 0` sempre serve.
 */
.compositor {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; gap: 9px; align-items: flex-end;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(14, 9, 23, .97); border-top: 1px solid var(--ouro-fundo);
  backdrop-filter: blur(10px);
}
/*
 * O campo usa o MESMO pergaminho das bolhas — mesma textura, mesma borda
 * queimada, mesma tinta. O que a pessoa escreve ali vira a bolha logo acima
 * dele, entao o campo ser de outro material fazia o envio parecer uma
 * troca de suporte em vez da mesma folha continuando.
 */
.compositor textarea {
  flex: 1; height: 46px; max-height: 116px; resize: none;
  padding: 9px 16px; border-radius: 16px; line-height: 1.35;
  border: 1px solid var(--ouro-fundo);
  background: var(--papel-fundo); color: var(--tinta);
  box-shadow: var(--papel-sujeira-leve);
  font-family: inherit; font-weight: 600; font-size: 19px;
  /* Sem isto o navegador desenha a barrinha de rolagem mesmo com UMA linha
     de texto: `height` e `line-height + padding` batem quase exato, e a
     diferenca de fracao de pixel entre eles ja e o bastante para o overflow
     "existir" aos olhos do navegador, ainda que invisivel a olho nu. O JS
     reabre o scroll so quando o texto realmente passa do teto de altura. */
  overflow-y: hidden;
}
.compositor textarea::placeholder { color: var(--tinta-fraca); opacity: .85; }
.compositor textarea:focus {
  outline: none; border-color: var(--ouro);
  box-shadow: var(--papel-sujeira-leve), 0 0 0 3px rgba(212, 169, 94, .28);
}
/* o botao de enviar e redondo: so o simbolo, sem palavra, como no mockup */
.compositor .btn {
  flex: none; width: 46px; height: 46px; min-height: 46px; padding: 0;
  border-radius: 50%; font-size: 1rem;
}
.compositor .btn svg { width: 20px; height: 20px; }

/* a tela sem cabecalho do site (o chat) nao precisa do respiro que o
   cabecalho dava: o conteudo comeca colado no alto */
.corpo--sem-topo .env { padding-top: 0; }

/*
 * A barra de baixo some no chat, so no celular/tablet — ali a pessoa nao
 * esta navegando o site, esta dentro de uma conversa, e aquele espaco faz
 * falta ao compositor e ao teclado. Escondida por padrao; a media query de
 * 1040px abaixo devolve ela no desktop, onde e trilho lateral e nunca some.
 */
.nav--chat { display: none; }

/* ── o portico: o cartao de boas-vindas com a Oracula ─────────────────────
 *
 * A arte NAO e recortada num retangulo: ela sangra por baixo do texto e
 * some num degrade (a mascara). Recortada, deixaria uma emenda dura no meio
 * do cartao; assim o retrato parece impresso no proprio pergaminho.
 *
 * No celular ela fica atras do texto, com o degrade cobrindo a esquerda —
 * por isso o texto leva `position: relative` e sobe para o z-index 1.
 */
.portico {
  position: relative; overflow: hidden;
  border: 1px solid var(--ouro-fundo); border-radius: var(--raio);
  background: var(--papel-fundo);
  /* a sujeira do portico vem no `::after`, junto do veu — aqui ela ficaria
     POR BAIXO da arte, e a borda suja precisa passar por cima dela */
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  margin: 6px 0 16px; padding: 22px 20px 24px; min-height: 250px;
}
.portico::before {
  content: "";
  position: absolute; inset: 5px;
  border: 1px solid rgba(196, 152, 74, .62);
  border-radius: calc(var(--raio) - 6px);
  pointer-events: none; z-index: 2;
}
.portico__arte {
  position: absolute; top: 0; right: 0; height: 100%; width: 62%;
  object-fit: cover; object-position: 62% 10%;
  /* o degrade que dissolve a foto no papel */
  -webkit-mask-image: linear-gradient(to left, #000 34%, transparent 96%);
          mask-image: linear-gradient(to left, #000 34%, transparent 96%);
  opacity: .92;
}
/*
 * O VEU. No celular nao ha largura para o texto ficar FORA da arte, entao
 * ele passa por cima dela — e sobre o cabelo escuro dela a tinta marrom
 * some. Este degrade de pergaminho cobre a metade esquerda do cartao por
 * baixo do texto e devolve o contraste, sem escurecer a arte a direita.
 */
.portico::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right,
    var(--papel) 26%, rgba(233, 217, 180, .86) 46%, rgba(233, 217, 180, .35) 66%, transparent 82%);
  /* a borda suja por CIMA da arte: envelhece a foto junto com o papel, em
     vez de deixar um retrato limpo colado numa folha velha */
  box-shadow: var(--papel-sujeira);
}
/* a porta de entrada (deslogado) da mais espaco ao retrato: e a unica tela
   em que a arte esta vendendo o produto, e nao so ambientando */
.portico--alto { min-height: 330px; padding-top: 26px; }
/*
 * z-index 3 porque no portico a ordem e outra: a arte (0), o veu (::after,
 * 1), o grao e a moldura (::before, 2) e so entao o texto. Aqui o grao
 * PRECISA passar por cima da arte — e ela que envelhece junto com o papel —
 * entao quem sobe para nao ser salpicado e o texto, nao o grao.
 */
.portico__texto { position: relative; z-index: 3; max-width: 64%; }
.portico__texto .rotulo { color: var(--tinta-ouro); }
.portico__texto h1 { color: #4a3110; font-size: 1.25rem; }
.portico__lema { color: var(--tinta-fraca); margin: 0 0 16px; font-size: 18px; }
/* dentro do portico a tinta e de PERGAMINHO: o `--creme-fraco` de `.mini`
   foi feito para o fundo de noite e sumia por cima do papel */
.portico__texto .mini { color: var(--tinta-fraca); }
.portico .btn { width: auto; display: inline-flex; }
/* a chamada principal da home: atravessa o cartao, fora da coluna de texto */
.portico__acao {
  position: relative; z-index: 3;
  width: 100%; display: flex; margin-top: 16px;
  /* ocupando a largura toda, o respiro lateral de 22px so tira espaco do
     rotulo — e sao esses pixels que decidem se ele cabe em uma linha */
  padding-inline: 14px;
}

/*
 * A variante das paginas de conteudo.
 *
 * O texto de abertura delas e um paragrafo inteiro, e nao a frase curta da
 * home — nos 64% de largura padrao ele virava sete linhas e empurrava o botao
 * para tres. Aqui o texto toma a largura toda e a arte recua para o papel de
 * ambiente que ela e nesta pagina: quem chegou de uma busca precisa LER, e
 * so decide olhar o retrato depois.
 */
.portico--tema .portico__texto { max-width: 100%; }
.portico--tema .portico__arte { opacity: .62; width: 54%; }
/* com o texto por cima da arte inteira, o veu deixa de ser degrade lateral e
   vira uma cobertura de papel quase cheia */
.portico--tema::after {
  background: linear-gradient(to right,
    var(--papel) 40%, rgba(233, 217, 180, .93) 64%, rgba(233, 217, 180, .6) 86%, rgba(233, 217, 180, .28));
}

/* ── a carta do dia ────────────────────────────────────────────────────── */
.dia { display: flex; gap: 16px; align-items: flex-start; }
.dia__carta {
  width: 104px; flex: none; border-radius: 7px;
  border: 1px solid var(--ouro-fundo); box-shadow: 0 8px 20px rgba(0, 0, 0, .4);
}
.dia__nome {
  font-family: "Cinzel", Georgia, serif; font-size: 1rem;
  letter-spacing: .07em; text-transform: uppercase; color: #4a3110; margin: 0 0 6px;
}
.dia__essencia { color: var(--tinta-fraca); margin: 0 0 14px; }
.dia .btn { width: auto; }

/* cabecalho de secao com um link a direita ("Ver histórico") */
.secao__topo {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin: 0 0 12px;
}
.secao__topo .mini { color: var(--ouro); text-decoration: none; white-space: nowrap; }

/* ── a faixa de creditos do rodape ─────────────────────────────────────── */
.faixa {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 18px; margin: 22px 0 30px;
  border: 1px solid var(--ouro-fundo); border-radius: var(--raio);
  background: linear-gradient(120deg, rgba(58, 33, 96, .55), rgba(36, 24, 57, .55));
}
.faixa__gema {
  height: 54px; width: auto; flex: none;
  filter: drop-shadow(0 0 14px rgba(139, 92, 199, .5));
}
.faixa__t {
  font-family: "Cinzel", Georgia, serif; font-size: .9rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ouro-claro);
}
.faixa .btn { width: auto; margin-left: auto; }

/* ── o saldo grande da tela de creditos ────────────────────────────────── */
.saldo-grande { display: flex; align-items: center; gap: 16px; margin: 8px 0 12px; }
.saldo-grande__gema {
  height: 76px; width: auto; flex: none;
  filter: drop-shadow(0 0 18px rgba(139, 92, 199, .55));
}
.saldo-grande__n {
  font-family: "Cinzel", Georgia, serif; font-size: 2.6rem; line-height: 1;
  color: var(--ouro-claro); margin: 2px 0 0;
}

/* ── a citacao do trilho ───────────────────────────────────────────────── */
.citacao {
  margin: 22px 12px 16px; padding: 16px 14px; text-align: center;
  border: 1px solid var(--ouro-fundo); border-radius: 12px;
  background: rgba(58, 33, 96, .28);
  color: var(--creme); font-style: italic; font-size: 17px; line-height: 1.5;
}
.citacao__joia { display: block; margin-top: 8px; color: var(--ouro); font-style: normal; }

/* ══ DESKTOP ═══════════════════════════════════════════════════════════════
 *
 * Tres degraus, e nessa ordem:
 *
 *   760px  tablet — a barra do polegar vira barra de topo e a coluna cresce
 *  1040px  desktop — a navegacao vira trilho lateral fixo e as listas viram
 *          duas colunas: a tela larga passa a mostrar MAIS, nao a mesma
 *          coluna de celular boiando no meio de dois vazios
 *  1500px  telao — so mais folga; a coluna de leitura NAO cresce, porque
 *          linha longa demais e o jeito mais rapido de cansar quem le
 *
 * Ponteiro tambem ganha estados de :hover aqui. No celular `:active` basta
 * (nao ha cursor pairando), mas no desktop um cartao que nao reage ao mouse
 * parece desligado.
 */

@media (min-width: 760px) {
  :root { --col: 620px; }
  body { padding-bottom: 40px; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.25rem; }
  .leque { gap: 14px; }

  /* a barra inferior vira barra superior: no desktop o polegar nao manda */
  .nav {
    position: sticky; top: 0; bottom: auto;
    max-width: var(--col); margin: 0 auto 18px; border-radius: 0 0 var(--raio) var(--raio);
    border: 1px solid var(--ouro-fundo); border-top: none;
  }
  .nav a { min-height: 56px; flex-direction: row; gap: 9px; }
  .nav a.on::before { top: auto; bottom: 0; }

  /*
   * A partir daqui a coluna de leitura para de ocupar a tela toda, e a barra
   * da conversa passa a ser `fixed` para continuar atravessando o painel de
   * ponta a ponta — igual ao compositor la embaixo. Presa no fluxo, ela
   * encolheria para os 620px da coluna e ficaria boiando no meio.
   * (No chat a barra de navegacao nao existe nesta faixa, entao o topo esta
   * livre — ver `.nav--chat`.)
   */
  /*
   * `height` fixa, e nao padding: com a barra fora do fluxo, o espaco que
   * ela ocupa vira `padding-top` do `.env`, e os dois PRECISAM bater. Com
   * altura derivada do conteudo, ela media 88px enquanto o padding reservava
   * 68 — e a primeira mensagem nascia por baixo da barra. Travada aqui, a
   * mesma variavel serve aos dois e nao ha como um sair do outro.
   */
  .barra-chat {
    position: fixed; top: 0; left: 0; right: 0;
    margin: 0; padding: 0 24px; height: var(--barra-chat);
    z-index: 20;
  }
  .corpo--sem-topo .env { padding-top: calc(var(--barra-chat) + 14px); }
}

@media (min-width: 1040px) {
  /*
   * 940px, e nao 780: sem o painel de chat que o desenho original punha a
   * direita, uma coluna estreita deixava a metade da tela vazia e o
   * conteudo parecia ter escorregado para o canto.
   */
  /* o cabecalho cresce no desktop (mais respiro + a pilula de saldo maior),
     entao o que gruda abaixo dele tem de descer junto */
  :root { --col: 940px; --altura-topo: 85px; }

  /*
   * O corpo vira duas colunas: o trilho a esquerda em toda a altura, e o
   * resto (cabecalho + conteudo) a direita. A <aside> deixa de ser
   * `display: contents` e volta a ser uma caixa de verdade, levando o <nav>
   * junto — e por isso que a navegacao muda de lugar sem duplicar HTML.
   */
  body:not(.sozinho) {
    display: flex; align-items: flex-start;
    padding-bottom: 0;
  }
  .corpo { flex: 1; min-width: 0; }

  .topo {
    padding: 18px 34px 16px;
    background: rgba(21, 14, 33, .92);
    border-bottom: 1px solid rgba(138, 104, 40, .5);
    backdrop-filter: blur(8px);
  }
  /*
   * No desktop a marca mora no trilho, entao some do cabecalho — mas SO
   * quando ha trilho. Sem o `:not(.sozinho)` a pagina de quem nao esta
   * logado (que nao tem trilho nenhum) ficava sem logo em lugar algum.
   */
  body:not(.sozinho) .topo .marca { display: none; }
  .saldo { padding: 9px 17px; margin-left: auto; }
  .topo .topo__comprar { display: inline-flex; }

  /*
   * Centrada no que sobra do trilho: encostada a esquerda, uma tela de
   * 1920px deixaria 900px de vazio de um lado so.
   *
   * O `width: 100%` nao e enfeite. Em grid, `margin: auto` sozinho faz o
   * item encolher ate o tamanho do CONTEUDO em vez de ocupar a faixa — a
   * biblioteca com duas linhas curtas fechava numa coluna de 386px enquanto
   * a tela inicial, cheia, ficava com os 780px. Com a largura declarada, o
   * `max-width` e quem manda e as margens automaticas so centralizam.
   */
  .env { padding: 22px 40px 70px; width: 100%; margin: 0 auto; }

  /* o trilho: a coluna escura da esquerda, alta o bastante para nunca
     terminar antes da dobra */
  /*
   * `align-self: flex-start` + `height: 100dvh` — nao `stretch`.
   *
   * Como item de um flex, o padrao `stretch` esticava o trilho ate a altura
   * do DOCUMENTO. Numa pagina de 4000px, o rodape do trilho (a citacao e o
   * perfil, empurrados por `margin-top: auto`) ia parar nos 4000px, muito
   * abaixo da tela — parecia que o trilho "nao terminava". Preso em exatos
   * 100dvh, o `sticky` faz ele acompanhar a rolagem e o rodape encosta na
   * base da TELA, que e onde ele deve estar.
   *
   * `overflow-y: auto` cobre a tela baixa (ou o zoom grande), onde os cinco
   * destinos + citacao + perfil nao cabem em 100dvh: ali o trilho rola por
   * dentro, em vez de cortar o perfil.
   */
  .lateral {
    display: flex; flex-direction: column; flex: none;
    width: var(--trilho); align-self: flex-start;
    position: sticky; top: 0; height: 100dvh; overflow-y: auto;
    background: linear-gradient(to bottom, #130c1e, var(--noite-funda));
    border-right: 1px solid rgba(138, 104, 40, .5);
    padding: 24px 0 18px;
  }
  .lateral > .marca {
    display: flex; flex-direction: column; gap: 8px; text-align: center;
    padding: 0 16px 20px; font-size: 1.5rem; letter-spacing: .2em;
  }
  .lateral > .marca img { width: 62px; height: 62px; }
  .marca__lema {
    display: block; font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 13px; letter-spacing: .16em; color: var(--creme-fraco);
    text-transform: uppercase; font-weight: 600;
  }
  /* o filete que fecha o cabecalho do trilho */
  .lateral > .marca::after {
    content: ""; display: block; width: 78%; height: 1px; margin: 16px auto 0;
    background: linear-gradient(90deg, transparent, var(--ouro-fundo), transparent);
  }
  .lateral__fim { display: block; margin-top: auto; }

  .perfil {
    display: flex; align-items: center; gap: 11px;
    margin: 0 12px; padding: 12px 14px;
    border-top: 1px solid rgba(138, 104, 40, .4);
    color: var(--creme); text-decoration: none;
  }
  .perfil svg { width: 30px; height: 30px; flex: none; color: var(--ouro); }
  .perfil__nome { font-family: "Cinzel", Georgia, serif; font-size: .82rem; letter-spacing: .08em; }
  .perfil__link { color: var(--creme-fraco); font-size: 15px; }

  /* a navegacao vira lista vertical dentro do trilho */
  .nav {
    position: static;
    display: block; max-width: none; margin: 0;
    min-height: 0; padding: 4px 12px;
    background: none; backdrop-filter: none;
    border: none; border-radius: 0;
  }
  .nav a {
    min-height: 58px; flex-direction: row; justify-content: flex-start;
    align-items: center; gap: 13px;
    padding: 0 15px; margin-bottom: 5px; border-radius: 10px;
    font-size: .84rem; letter-spacing: .1em;
    border: 1px solid transparent;
  }
  /* o item ativo ganha moldura de ouro, como um cartao pequeno */
  .nav a.on {
    background: linear-gradient(120deg, rgba(107, 63, 168, .45), rgba(58, 33, 96, .3));
    border-color: var(--ouro-fundo);
  }
  .nav a.on::before {
    top: 12px; bottom: 12px; left: 0; right: auto; width: 2px; height: auto;
    background: linear-gradient(180deg, transparent, var(--ouro), transparent);
  }
  .nav svg { width: 25px; height: 25px; }
  .nav__gema { height: 30px; }
  /* no trilho cabe o sublabel: "INICIO / Visao geral" */
  .nav__legenda {
    display: block; font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 15px; letter-spacing: .02em; text-transform: none;
    color: var(--creme-fraco); font-weight: 600; line-height: 1.2;
  }
  .nav a.on .nav__legenda { color: var(--creme); }

  /* as listas se abrem em duas colunas */
  .grade {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px; align-items: start;
  }
  .grade .tiragem, .grade .item { margin-bottom: 0; height: 100%; }

  /*
   * A biblioteca continua em UMA coluna. Em duas, cada leitura ficava com
   * ~175px de texto ao lado do leque — a pergunta quebrava em quatro linhas
   * e a lista ficava mais dificil de varrer do que no celular. Cartao curto
   * (catalogo, pacotes) ganha com duas colunas; linha de lista, nao.
   */
  .grade--lista { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .grade--lista .item { padding: 14px 20px; }

  /* no desktop os filtros cabem em duas linhas em vez de sumirem para fora
     da tela: rolagem lateral e gesto de celular, nao de mouse */
  .chips { flex-wrap: wrap; overflow-x: visible; }

  /* a leitura respira: cartas maiores e texto num pouco mais de corpo */
  .leque { gap: 18px; }
  .leque--1 { grid-template-columns: minmax(0, 250px); }   /* carta unica: vale a tela */
  .leitura { font-size: 20px; }
  h1 { font-size: 2rem; }

  /*
   * O portico ganha ar: a arte deixa de ser fundo e vira metade do cartao.
   * Com largura sobrando, o texto cabe FORA dela — entao o veu recua para
   * onde a arte comeca, em vez de lavar o retrato inteiro.
   */
  .portico { padding: 34px 34px 36px; min-height: 300px; }
  .portico__texto { max-width: 52%; }
  .portico__texto h1 { font-size: 1.7rem; }
  .portico__arte { width: 54%; object-position: 55% 8%; }
  .portico::after {
    background: linear-gradient(to right,
      transparent 40%, rgba(233, 217, 180, .18) 52%, transparent 68%);
  }
  /* aqui ha largura de sobra: o texto do tema volta a parar antes do retrato,
     em vez de correr por cima do rosto dela como precisa fazer no celular */
  /* aqui ha largura de sobra: o botao volta a hospedar-se ao lado do texto,
     do tamanho do proprio rotulo */
  .portico__acao { width: auto; display: inline-flex; margin-top: 4px; }
  .portico--tema .portico__texto { max-width: 62%; }
  .portico--tema .portico__arte { opacity: .9; }
  .portico--tema::after {
    background: linear-gradient(to right,
      transparent 34%, rgba(233, 217, 180, .2) 50%, transparent 70%);
  }
  .dia__carta { width: 132px; }

  /*
   * O compositor nao cobre o trilho, e o que ele contem fica alinhado com a
   * coluna de leitura: a barra atravessa a tela toda (e o rodape do chat),
   * mas o campo comeca e termina onde as mensagens comecam e terminam. Sem
   * isto o campo ficava largo demais e desalinhado das bolhas acima dele.
   */
  .compositor {
    left: var(--trilho);
    padding-inline: max(16px, calc((100% - var(--col)) / 2));
  }

  /* o trilho lateral volta no chat: aqui ele nunca ocupa a base da tela */
  .nav--chat { display: block; }

  /*
   * A barra da conversa atravessa o painel inteiro, como o compositor faz
   * embaixo — e por isso ela vira `fixed` aqui em vez de `sticky`: presa
   * dentro do `.env`, a largura dela parava na coluna de leitura (940px) e
   * ela virava uma faixa boiando no meio da tela, desalinhada da barra de
   * escrever logo abaixo. O `padding-top` no `.env` devolve o espaco que
   * ela deixa de ocupar no fluxo.
   */
  .barra-chat { left: var(--trilho); padding: 0 40px; }
  .corpo--sem-topo .env { padding-top: calc(var(--barra-chat) + 16px); }
}

@media (min-width: 1500px) {
  :root { --trilho: 280px; }
  .env { padding: 24px 64px 80px; }
  .topo { padding: 20px 64px 16px; }
}

/* estados de ponteiro: so onde existe cursor de verdade */
@media (hover: hover) and (pointer: fine) {
  .tiragem:hover {
    border-color: var(--ouro); transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(212, 169, 94, .3), 0 14px 34px rgba(0, 0, 0, .5);
  }
  .item { transition: border-color .2s ease, transform .18s ease, box-shadow .2s ease; }
  .item:hover {
    border-color: var(--ouro); transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .48);
  }
  .item:hover .mini-leque img { box-shadow: 0 5px 14px rgba(0, 0, 0, .5); }
  .btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
  .btn--fantasma:hover { border-color: var(--ouro); background: rgba(107, 63, 168, .3); }
  .nav a:hover { color: var(--ouro-claro); }
  .saldo:hover { border-color: var(--ouro); }
  .chip:hover { border-color: var(--ouro); color: var(--ouro-claro); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}