/* glossario.css — Layout do Glossário do Tarot (A–Z).
   Tokens de cor, gradiente e tipografia vêm de theme.css; a navbar, de navbar.css.

   Sem caixa em volta do conteúdo, de propósito: superfície fechada (`.panel`) é
   reservada para UI funcionalmente delimitada (formulários), nunca para texto de
   leitura — mesma decisão do Sprint 6. O que separa as partes aqui é ritmo
   tipográfico e filete, não moldura. */

.glossary-container {
    padding: 140px 1.5rem 6rem;
    max-width: 46rem;      /* medida de leitura: ~75 caracteres por linha */
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.glossary-content h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.15;
    margin-bottom: 0.75rem;
    background: var(--gradient-arcane);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
}

.glossary-intro {
    text-align: center;
    font-size: 1.05rem;
    color: var(--color-text-muted);
    line-height: 1.7;
}

.glossary-caveat {
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-text-dim);
    line-height: 1.6;
    margin-top: 0.75rem;
}

/* Linha de contagem de verbetes abaixo da barra alfabética. */
.glossary-count {
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-text-dim);
    margin: 0.5rem 0 0.25rem;
    letter-spacing: 0.04em;
}

/* --- BARRA ALFABÉTICA --- */

.alphabet__hint {
    margin: 2.5rem 0 0.9rem;
    text-align: center;
    font-size: 0.82rem;
    color: var(--color-text-dim);
}

/* Barra no fluxo, não fixa. Fixá-la parecia melhor — alfabeto sempre à mão —
   mas ela mede 117px e, somada à navbar, comia 26% de uma janela de 760px, além
   de exigir um `scroll-margin-top` calibrado à mão que quebrava assim que as
   letras reenrolavam em outra largura. O link "voltar ao índice" no fim de cada
   letra resolve o retorno sem custo nenhum de tela. */
.alphabet {
    margin: 0 0 1rem;
    padding: 0.9rem 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    text-align: center;
    /* É o alvo do "voltar ao índice" no fim de cada letra. */
    scroll-margin-top: 6.5rem;
}

.alphabet ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.15rem 0.1rem;
}

.alphabet li { display: flex; }

.alphabet a,
.alphabet span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.3rem 0.45rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1;
    border-radius: 6px;
    text-decoration: none;
    transition: color 0.25s ease, background-color 0.25s ease;
}

.alphabet a { color: var(--color-text); }

.alphabet a:hover,
.alphabet a:focus-visible {
    color: #050506;
    background: var(--gradient-arcane);
}

/* Letra sem verbete: presente para o alfabeto não ficar esburacado, mas
   claramente inerte — não é link e não responde ao mouse. */
.alphabet span {
    color: var(--color-text-dim);
    opacity: 0.4;
    cursor: default;
}

/* Atalho para os guias. Sem ele os guias começavam a 66% da página, a 29 telas
   de rolagem, e não havia UM link para eles em lugar nenhum — só se chegava lá
   rolando os 152 verbetes. Fica na barra por ser onde já se procura navegação,
   e não parece letra: outra tipografia, separado por um filete. */
.alphabet__guias {
    display: inline-block;
    margin-top: 0.8rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--color-border);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.25s ease;
}

.alphabet__guias:hover { color: var(--color-text); }

/* Item especial da lista alfabética que aponta para os guias (classe gerada pelo
   script gen_glossario.py). Mesma tipografia do alphabet__guias, mas como <li>. */
.nav-guias-sep {
    width: 100%;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
}

.nav-guias-sep a {
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.25s ease;
}

.nav-guias-sep a:hover {
    color: var(--color-text);
    background: none;
}

/* --- BLOCOS DE LETRA --- */

/* O separador mora no bloco, não no título. Antes o único filete ficava EMBAIXO
   da letra — ele agrupava a letra com seus verbetes, mas nada marcava onde a
   letra anterior terminava: 22 listas corriam emendadas, separadas só por 56px
   de ar. Agora cada letra abre com um filete que a desliga da anterior. */
.letter-block + .letter-block {
    margin-top: 2.75rem;
    padding-top: 2.25rem;
    border-top: 1px solid var(--color-border);
}

.letter-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-display);
    font-size: 2.4rem;
    line-height: 1;
    margin: 0 0 1.25rem;
    background: var(--gradient-arcane);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Folga para o alvo do salto não parar atrás da navbar fixa (77px). */
    scroll-margin-top: 6.5rem;
}

/* O primeiro bloco não tem letra anterior para se desligar; herda o filete da
   barra alfabética logo acima. */
.letter-block:first-of-type { margin-top: 1.5rem; }

.letter-back {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-text-dim);
    -webkit-text-fill-color: var(--color-text-dim);  /* escapa do clip do h2 */
    text-decoration: none;
    transition: color 0.25s ease;
}

.letter-back:hover {
    color: var(--color-text-muted);
    -webkit-text-fill-color: var(--color-text-muted);
}

/* --- VERBETES ---
   <dl> em vez de tabela: é o elemento semanticamente correto para termo e
   definição, e resolve de saída o estouro horizontal que 11 tabelas de duas
   colunas provocavam no celular. */

.terms { margin: 0; }

.terms dt {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-top: 1.5rem;
    scroll-margin-top: 6.5rem;   /* link direto para um verbete */
}

.terms dt:first-child { margin-top: 0; }

.terms dd {
    margin: 0.35rem 0 0;
    padding-left: 1rem;
    border-left: 1px solid var(--color-border);
    color: var(--color-text-muted);
    line-height: 1.75;
}

.terms dd strong { color: var(--color-text); font-weight: 600; }

/* --- GUIAS DE LEITURA (a prosa que não cabe em verbete) --- */

/* Mesmo tratamento dos blocos de letra, inclusive o "voltar ao índice" — daqui
   até o topo são 29 telas. */
#guias {
    position: relative;
    margin-top: 6rem;
    padding-top: 3rem;
    scroll-margin-top: 6.5rem;
}

/* Título da seção de guias (h2 gerado pelo script). */
.guides-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3.2vw, 2.2rem);
    line-height: 1.2;
    color: var(--color-text);
}

/* Parágrafo introductório da seção de guias. */
.guides-intro {
    font-size: 0.9rem;
    color: var(--color-text-dim);
    margin: 0.5rem 0 1.5rem;
    line-height: 1.6;
}

/* Container de cada seção de guia (div.guide-section). Isola o scroll-margin
   e o separador do bloco pai, sem precisar de !important nos h3 internos. */
.guide-section {
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--color-border);
    scroll-margin-top: 6.5rem;
}

.guide-section:first-of-type {
    margin-top: 1.25rem;
    padding-top: 0;
    border-top: none;
}

.guide-section h3 {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Filete do gradiente da marca, não um traço a mais. Aqui não acaba uma letra,
   acaba o glossário e começa outra coisa — com os separadores de letra também
   em 1px cinza, um 1px um pouco mais claro não daria conta de dizer isso.
   Absoluto de propósito: filho posicionado de um flex container não vira item
   do flex, então não entra na linha do título. */
#guias::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-arcane);
    opacity: 0.55;
}

/* Índice dos 10 guias. Quem chega pelo atalho da barra aterrissa aqui, e sem
   ele encararia 10 seções sem saber o que há adiante. Duas colunas em tela
   larga, uma quando não couber. */
.guides-index {
    list-style: none;
    padding: 1.25rem 0 0;
    margin: 0 0 1rem;
    border-top: 1px solid var(--color-border);
    columns: 2;
    column-gap: 2.5rem;
    counter-reset: guia;
}

.guides-index li {
    break-inside: avoid;
    margin-bottom: 0.55rem;
    counter-increment: guia;
}

.guides-index a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}

.guides-index a::before {
    content: counter(guia, decimal-leading-zero);
    margin-right: 0.6rem;
    font-size: 0.78rem;
    color: var(--color-text-dim);
    font-variant-numeric: tabular-nums;
}

.guides-index a:hover { color: var(--color-text); }

@media (max-width: 620px) {
    .guides-index { columns: 1; }

    /* Em coluna estreita o "voltar à lista de guias" ficava com 172px de 335,
       mais largo que o próprio título, que despencava para 4 linhas. O link é
       secundário: desce para baixo do título em vez de disputar a linha. */
    .glossary-content h3 {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
    }
}

/* Mesmo par de sempre: título à esquerda, caminho de volta à direita. Aqui a
   volta é para a lista de guias, não para o alfabeto — quem entrou por ela é
   para lá que quer voltar.

   E o mesmo separador dos blocos de letra. Sem ele, um guia novo era anunciado
   por 48px de espaço e uma subseção nova por 32px: 16px de diferença, ou seja,
   hierarquia invisível — não dava para saber se um título abria um guia ou uma
   parte dele. O filete resolve por natureza, não por medida.

   Espaço aumentado numa segunda passada: com o parágrafo e o h4 também mais
   arejados (ver adiante), o contraste entre "novo guia" e "nova subseção"
   precisava crescer junto, senão os dois voltavam a se aproximar. Guia agora
   soma ~97px até o título (56 de margem + 1 de filete + 40 de respiro), quase
   o dobro do que uma subseção pede — a proporção que fazia a hierarquia de
   letra funcionar. */
.glossary-content h3 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.25;
    margin-top: 3.5rem;
    margin-bottom: 1.15rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text);
    scroll-margin-top: 6.5rem;
}

/* O primeiro guia vem logo abaixo da lista de guias: não há guia anterior do
   qual se desligar, mesma regra do primeiro bloco de letra. */
.glossary-content h3:first-of-type {
    margin-top: 1.25rem;
    padding-top: 0;
    border-top: none;
}

/* O h3 não usa background-clip, então aqui a cor é direta. 
   O link precisa quebrar a herança do h3 (display font, tamanho 1.5rem) 
   para se comportar de forma parecida com o .letter-back. */
.guide-back {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-text-dim);
    -webkit-text-fill-color: var(--color-text-dim);
    text-decoration: none;
    transition: color 0.25s ease;
    flex-shrink: 0;
}

.guide-back:hover {
    color: var(--color-text-muted);
    -webkit-text-fill-color: var(--color-text-muted);
}

/* Um degrau abaixo do guia, e agora claramente: guia abre com filete e ~97px;
   subseção, com 36px e nenhum traço — quase o triplo de distância do parágrafo
   comum (18px), o suficiente para o olho separar "novo assunto" de "mais uma
   frase". Por baixo, o h4 continua colado ao próprio parágrafo (o abaixo dele
   é o menor gap da escala): título e conteúdo devem ler como um grupo só —
   proximidade aqui é a pista, não a distância. */
.glossary-content h4 {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 2.25rem;
    margin-bottom: 0.7rem;
    color: var(--accent-violet);
}

/* Escala de respiro do corpo do texto: parágrafo (18px) < lista (24px) < h4
   (36px) < h3/guia (97px). Cada nível de novidade — mais uma frase, mais um
   grupo de itens, mais um subtema, mais um guia inteiro — ganha um salto maior
   que o anterior, então a distância sozinha já avisa o tamanho da mudança
   antes de o leitor ler o título. */
.glossary-content p {
    margin-bottom: 1.15rem;
    color: var(--color-text-muted);
    line-height: 1.8;
}

.glossary-content ul,
.glossary-content ol {
    margin-bottom: 1.5rem;
    padding-left: 1.25rem;
    color: var(--color-text-muted);
}

.glossary-content li { margin-bottom: 0.5rem; line-height: 1.7; }
.glossary-content strong { color: var(--color-text); font-weight: 600; }

.glossary-content a {
    color: var(--accent-cyan);
    text-decoration-color: rgba(34, 211, 238, 0.4);
    text-underline-offset: 3px;
}

.glossary-content a:hover { text-decoration-color: var(--accent-cyan); }

/* --- FÓRMULAS INTERPRETATIVAS ---
   Substituíam blocos de LaTeX cru que apareciam literalmente na página como
   "$$\text{Significado da carta} = ...". A primeira tentativa trocou o LaTeX
   por um título, um sinal de igual em linha própria e uma <ul> com "+" antes de
   cada item — tecnicamente sem marcador redondo, mas a estrutura ainda É uma
   lista (um item por linha, recuada), e lê como lista. Uma equação se lê da
   esquerda para a direita, em fluxo, não de cima para baixo.

   Agora é um único parágrafo de spans em `display: inline-flex` com `wrap`:
   alvo, =, termo, +, termo, +... — quebra como texto normal quando não cabe,
   nunca como lista. Bônus de acessibilidade: sem <ul>/<li>, um leitor de tela
   anuncia frase, não "lista, 4 itens".

   Considerado usar uma biblioteca de tipografia matemática (KaTeX/MathJax) para
   isto — descartado: o conteúdo não é notação matemática de verdade (não tem
   fração, expoente, integral), é uma equação de palavras com + e =, que o CSS
   já expressa sem ambiguidade. Trazer uma lib JS só para isto quebraria a única
   página do site sem nenhuma dependência de script. */
.formula {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.65rem;
    margin: 1.75rem 0;
    padding: 1.25rem 1.5rem;
    border-left: 2px solid var(--accent-violet);
}

.formula-term {
    font-family: var(--font-display);
    font-size: 1.02rem;
    color: var(--color-text-muted);
}

.formula-term--alvo {
    color: var(--color-text);
    font-size: 1.1rem;
}

.formula-op {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--accent-violet);
}

.formula-op--plus { color: var(--accent-cyan); }

/* --- FIGURA DE HISTÓRIA E ESTRUTURA ----------------------------------------
   Três colunas em ordem cronológica. A terceira ganha tratamento distinto de
   propósito: os naipes franceses não são a continuação da história do tarot,
   são um ramo paralelo que só foi ligado a ele séculos depois — a borda
   tracejada carrega essa informação, que o texto sozinho perderia de vista.
--------------------------------------------------------------------------- */
/* Largura das figuras que escapam da medida de leitura. Mais larga que os 62rem
   iniciais porque coluna estreita é coluna alta: a figura de história chegou a
   ocupar quase a viewport inteira em altura, e alargar as colunas encurta o
   texto em linhas em vez de espremer a tipografia. */
:root { --figura-larga: min(74rem, calc(100vw - 3rem)); }

.history-figure {
    margin: 2rem 0 3rem;
    width: var(--figura-larga);
    margin-left: 50%;
    transform: translateX(-50%);
}

.history-figure figcaption {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-dim);
    margin-bottom: 1rem;
}

.history-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
}

@media (max-width: 820px) {
    .history-grid { grid-template-columns: 1fr; }
}

/* Sem fundo: a borda basta para separar uma coluna da outra, e o preto da
   página segue sendo a única superfície. */
.epoch {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.05rem;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: transparent;
}

/* O tracejado continua sendo informação, não estilo: marca o ramo que não é
   continuação da história do tarot. Com todas as colunas transparentes ele fica
   até mais legível, porque não disputa mais com o fundo. */
.epoch--ramo {
    border-style: dashed;
}

.epoch__when {
    font-size: 0.68rem !important;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-violet) !important;
    margin-bottom: 0.4rem !important;
}

.epoch__title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--color-text) !important;
    margin-bottom: 0.55rem !important;
}

.epoch p:not(.epoch__when):not(.epoch__title) {
    font-size: 0.84rem !important;
    line-height: 1.55 !important;
    margin-bottom: 0.55rem !important;
}

/* Empurra a fileira de naipes para a base, alinhando-a entre as colunas. */
.epoch__pips {
    margin-top: auto;
    padding-top: 0.7rem;
    border-top: 1px solid var(--color-border);
}

.epoch__pips > span {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-dim);
    margin-bottom: 0.5rem;
}

.epoch__pips > div { display: flex; gap: 0.9rem; align-items: center; }

.pip { width: 26px; height: 26px; }

/* Naipes latinos são objetos desenhados: contorno. */
.pip--linha {
    fill: none;
    stroke: var(--color-text-muted);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Naipes franceses são pips: sólidos, e nas duas cores que fazem o baralho
   funcionar. O vermelho reaproveita o tom já definido para o elemento Fogo —
   nenhuma cor nova entra na página por causa desta figura. */
.pip--vermelho { fill: #ff8a5c; stroke: none; }
.pip--preto { fill: var(--color-text-muted); stroke: none; }

/* --- FIGURA DOS QUATRO NAIPES ---------------------------------------------
   Aqui a moldura é permitida, e a regra do projeto não está sendo quebrada: o
   veto a superfície fechada vale para conteúdo corrido de leitura, não para uma
   figura comparativa, onde a caixa é justamente o que separa um item do outro.

   As cores fogem do gradiente único de propósito. Cor elemental é informação,
   não enfeite: fogo vermelho e terra verde são a convenção que o leitor já traz.
   Água e Ar reaproveitam o ciano e o violeta da marca, então só dois tons novos
   entram — e dessaturados, para assentar no preto.
--------------------------------------------------------------------------- */
.suits-figure {
    --suit-fogo:  #ff8a5c;
    --suit-agua:  var(--accent-cyan);
    --suit-ar:    #b9c6ff;
    --suit-terra: #6ee7a8;

    margin: 2.5rem 0 3rem;
    /* Escapa da medida de leitura (46rem). Ela existe para o texto corrido —
       uma figura comparativa não se submete a ela, e com 4 colunas dentro de
       46rem a última carta ficava órfã numa segunda linha. */
    width: var(--figura-larga);
    margin-left: 50%;
    transform: translateX(-50%);
}

.suits-figure figcaption {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-dim);
    margin-bottom: 1rem;
}

/* Colunas explícitas em vez de auto-fit: com quatro itens, o auto-fit encontrava
   larguras onde cabiam 3 e deixava o quarto naipe sozinho numa segunda linha.
   4 → 2×2 → 1 nunca produz órfão. */
.suits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9rem;
}

@media (max-width: 900px) {
    .suits-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .suits-grid { grid-template-columns: 1fr; }
}

/* Sem fundo, como as colunas da figura de história: a borda superior colorida
   já identifica o naipe, e o ícone e o rótulo do elemento repetem a cor. Havia
   antes um véu do tom do naipe no topo — removido por ser redundante com a
   borda e por acrescentar superfície onde o projeto prefere ar. */
.suit {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.1rem;
    border: 1px solid var(--color-border);
    border-top: 2px solid var(--suit);
    border-radius: 14px;
    background: transparent;
    transition: transform 0.3s var(--ease-organic), border-color 0.3s ease;
}

.suit:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--suit) 45%, transparent);
}

.suit__mark {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

/* Ícones desenhados em SVG, não em caractere: fonte não decide a forma, e não
   há o risco de o navegador trocar o símbolo por emoji colorido. */
.suit__icon {
    width: 40px;
    height: 40px;
    fill: none;
    stroke: var(--suit);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.suit__element {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--suit);
    stroke-width: 1.2;
    stroke-linejoin: round;
    opacity: 0.55;
}

.suit__name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--color-text) !important;
    margin-bottom: 0.15rem !important;
}

.suit__name span {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--color-text-dim);
}

.suit__el {
    font-size: 0.72rem !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--suit) !important;
    margin-bottom: 0.75rem !important;
}

.suit__desc {
    font-size: 0.88rem !important;
    line-height: 1.65 !important;
    margin-bottom: 1rem !important;
    /* Empurra o domínio para a base: com textos de alturas diferentes, os quatro
       rodapés continuam alinhados entre si. */
    flex-grow: 1;
}

.suit__domain {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted) !important;
}

.suit__domain span {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-dim);
    margin-bottom: 0.2rem;
}

@media (prefers-reduced-motion: reduce) {
    .suit { transition: none; }
    .suit:hover { transform: none; }
}

/* Mesma ressalva legal que a landing e o Oráculo carregam — a página descreve
   práticas divinatórias e é a única do site que não tinha nenhuma. */
.glossary-note {
    max-width: 46rem;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--color-text-dim);
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .glossary-container { padding: 130px 1.25rem 4rem; }
    .letter-heading { font-size: 2rem; margin-top: 2.75rem; }
    .glossary-content h3 { margin-top: 2.25rem; }

    /* No celular o logo da navbar quebra em duas linhas e ela vai a 113px —
       a folga de 6.5rem do desktop deixaria o alvo do salto 9px atrás dela. */
    .alphabet,
    .letter-heading,
    .terms dt,
    .glossary-content h3,
    #guias { scroll-margin-top: 8.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .alphabet a, .letter-back { transition: none; }
}

/* --- CARD DETAIL LAYOUT --- */

.card-detail-layout {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem 0;
}

/* Back Link styling */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    margin-bottom: 2.5rem;
    transition: color 0.3s ease, transform 0.3s ease;
}

.back-link:hover {
    color: var(--accent-violet);
    transform: translateX(-4px);
}

.back-link svg {
    transition: transform 0.3s ease;
}

/* Split screen hero */
.card-hero-split {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 3.5rem;
    align-items: flex-start;
    margin-bottom: 3.5rem;
}

@media (max-width: 768px) {
    .card-hero-split {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }
    
    .card-visual-column {
        display: flex;
        justify-content: center;
        padding-bottom: 1.5rem;
    }
}

/* Card Visual Column & Glow */
.card-visual-column {
    perspective: 1000px;
}

.card-frame {
    position: relative;
    width: 160px;
    border-radius: 10px;
    box-shadow: 
        -10px 15px 30px rgba(0, 0, 0, 0.75), 
        -3px 3px 15px rgba(179, 136, 255, 0.15), 
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.2, 1, 0.2, 1), 
                box-shadow 0.6s cubic-bezier(0.2, 1, 0.2, 1);
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    animation: cardFloatAmbient 6s ease-in-out infinite alternate;
}

/* Fallback card frame size */
.card-frame:has(.card-placeholder-fallback) {
    height: 266px;
}

/* Glossy reflection shine sweep overlay */
.card-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        rgba(255, 255, 255, 0) 30%,
        rgba(255, 255, 255, 0.05) 45%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 55%,
        rgba(255, 255, 255, 0) 70%
    );
    transform: translateX(-100%);
    transition: transform 0.8s ease;
    pointer-events: none;
    z-index: 2;
}

/* Ambient Floating Animation */
@keyframes cardFloatAmbient {
    0% { transform: translateY(0); }
    100% { transform: translateY(-5px); }
}

/* Hover effects for the highlighted card */
.card-frame:hover {
    animation-play-state: paused;
    transform: perspective(1000px) rotateY(6deg) rotateX(3deg) rotateZ(1deg) translateY(-8px);
    box-shadow: 
        -10px 20px 35px rgba(0, 0, 0, 0.75), 
        -4px 4px 20px rgba(179, 136, 255, 0.25), 
        inset 0 0 0 1px rgba(179, 136, 255, 0.3);
}

.card-frame:hover::after {
    transform: translateX(100%);
}

.card-frame img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
    pointer-events: none;
    transition: transform 0.6s ease;
}

/* Fallback Card Placeholder */
.card-placeholder-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 1.5rem 1rem;
    position: relative;
    background: linear-gradient(160deg, #121217 0%, #050507 100%);
}

.card-placeholder-fallback::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(179, 136, 255, 0.12);
    border-radius: 6px;
    pointer-events: none;
}

.card-placeholder-sigil {
    font-size: 2.2rem;
    color: var(--accent-violet);
    margin-bottom: 0.75rem;
    text-shadow: 0 0 15px rgba(179, 136, 255, 0.6);
    animation: pulseSigil 3s ease-in-out infinite alternate;
}

@keyframes pulseSigil {
    0% { opacity: 0.7; transform: scale(0.96); }
    100% { opacity: 1; transform: scale(1.04); }
}

.card-placeholder-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    text-align: center;
    color: var(--color-text-muted);
    max-width: 90%;
    line-height: 1.3;
}

/* Title and Art Description column */
.card-text-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- CARD TITLE BLOCK --- */

.card-title-block {
    text-align: center;
    margin-bottom: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-title-main {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 3.4rem);
    line-height: 1.15;
    margin-bottom: 0.6rem;
    background: var(--gradient-arcane);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 500;
}

.card-title-subtitle {
    font-family: var(--font-body);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--color-text-dim);
    font-weight: 500;
    margin-bottom: 1.2rem;
}

.card-title-line {
    width: 40px;
    height: 2px;
    background: var(--gradient-arcane);
    border-radius: 2px;
}

.card-art-description {
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--color-text);
    font-style: italic;
    text-align: justify;
    opacity: 0.95;
}

.card-art-description p:first-child {
    margin-top: 0;
}

/* Divider styling */
.card-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3.5rem 0;
    position: relative;
}

.card-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-border) 20%, var(--color-border) 80%, transparent);
    z-index: 0;
}

.divider-sigil {
    background: var(--color-bg);
    padding: 0 1.5rem;
    color: var(--color-text-dim);
    font-size: 1.1rem;
    z-index: 1;
}

/* Body Content styling */
.card-body-content {
    font-family: var(--font-body);
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--color-text-muted);
}

.card-body-content p {
    margin-bottom: 1.8rem;
    text-align: justify;
    text-wrap: pretty;
}

.card-body-content p strong {
    color: var(--color-text);
}

/* --- CARD-TO-CARD PAGINATION --- */

.card-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: 1.5rem 0;
    margin: 4.5rem 0 3.5rem;
    gap: 1.5rem;
}

.pagination-prev, .pagination-next {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.92rem;
    font-family: var(--font-body);
    font-weight: 600;
    transition: color 0.3s ease, transform 0.3s ease;
    max-width: 45%;
}

.pagination-prev {
    text-align: left;
}

.pagination-next {
    text-align: right;
    justify-content: flex-end;
}

.pagination-prev:hover {
    color: var(--accent-violet);
    transform: translateX(-4px);
}

.pagination-next:hover {
    color: var(--accent-cyan);
    transform: translateX(4px);
}

.pagination-prev svg, .pagination-next svg {
    flex-shrink: 0;
}

.pagination-index {
    color: var(--color-text-dim);
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-index:hover {
    color: var(--color-text);
    transform: scale(1.2);
}

@media (max-width: 580px) {
    .card-pagination {
        flex-direction: column;
        gap: 1.2rem;
        padding: 1.5rem 0;
        align-items: center;
    }
    
    .pagination-prev, .pagination-next {
        max-width: 100%;
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    
    .pagination-index {
        order: -1; /* central star on top for mobile */
    }
}

/* --- BANNER DE AGENDAMENTO (CTA) --- */

.card-booking-cta {
    background: linear-gradient(135deg, rgba(179, 136, 255, 0.03) 0%, rgba(34, 211, 238, 0.02) 100%);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 3rem 2.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin: 4rem auto 2rem;
    max-width: 900px;
    box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.5);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.card-booking-cta:hover {
    border-color: rgba(179, 136, 255, 0.25);
    box-shadow: 
        0 20px 45px -15px rgba(0, 0, 0, 0.6),
        0 0 30px -10px rgba(179, 136, 255, 0.12);
}

/* Decorative background glowing light */
.card-booking-cta::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(179, 136, 255, 0.04) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.cta-decoration {
    font-size: 1.5rem;
    color: var(--accent-violet);
    margin-bottom: 0.8rem;
    text-shadow: 0 0 10px rgba(179, 136, 255, 0.4);
    position: relative;
    z-index: 1;
}

.card-booking-cta h2 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3.5vw, 1.85rem);
    line-height: 1.3;
    margin-bottom: 1rem;
    background: var(--gradient-arcane);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    z-index: 1;
}

.card-booking-cta p {
    font-family: var(--font-body);
    font-size: 0.96rem;
    line-height: 1.75;
    color: var(--color-text-muted);
    max-width: 580px;
    margin: 0 auto 2.2rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.card-booking-cta .cta-button {
    position: relative;
    z-index: 1;
    cursor: pointer;
    min-width: 240px;
    padding: 0.8rem 2.2rem;
    border-radius: 999px;
    box-shadow: 0 8px 20px -6px rgba(179, 136, 255, 0.35);
    transition: transform 0.3s var(--ease-organic), box-shadow 0.3s ease;
}

.card-booking-cta .cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 12px 25px -6px rgba(179, 136, 255, 0.5),
        0 0 20px -2px rgba(34, 211, 238, 0.25);
}