/*
 * As Três Runas - o baú, a mesa e a leitura.
 *
 * Vive sobre `marca/astrofala.css`, de onde vêm as cores e os tipos de letra da
 * marca. Aqui ficam só as variáveis dos OBJETOS - a madeira do baú, o ferro das
 * ferragens, a pedra das runas - e o que é próprio deste produto.
 *
 * ⚠️ As variáveis dos objetos NÃO seguem o tema: uma pedra é uma pedra e uma
 * tábua é uma tábua, no claro e no escuro. São coisas, não interface.
 */

/*
 * ⚠️ As cores dos OBJETOS vivem em `:root`, e não em `.af-runas`.
 *
 * Os `<defs>` do SVG - os gradientes da pedra e da madeira - são declarados no
 * topo da página, FORA da div do produto. Variáveis CSS herdam-se pela árvore
 * do DOM: postas em `.af-runas`, não chegavam lá, os gradientes resolviam para
 * nada e a pedra saía PRETA. Foi exatamente o que aconteceu.
 */
:root {
    /* a luz da marca */
    --af-luz-quente: #F0C36B;
    --af-luz-fria: #6E5AB8;
    /* a madeira e o ferro do baú */
    --af-mad-crista: #7A5B36;
    --af-mad-alta: #5E4527;
    --af-mad-meia: #41301B;
    --af-mad-baixa: #251B0F;
    --af-mad-borda: #1A120A;
    --af-mad-sulco: #180F07;
    --af-ferro: #C79A47;
    --af-ferro-luz: #F0C36B;
    --af-ferro-sombra: #6E5119;
    /* a pedra das runas */
    --af-pedra-alta: #8B9198;
    --af-pedra-meia: #565C64;
    --af-pedra-baixa: #2A2F36;
    --af-pedra-aresta-luz: #A9B0B8;
    --af-pedra-aresta-sombra: #171B20;
    --af-sulco: #12151A;
    --af-sulco-sombra: #07090C;
    --af-sulco-luz: #AEB5BC;
}

.af-runas {
    /*
     * A NOITE DA MARCA, e agora é mesmo a da marca.
     *
     * ⚠️ Estes três valores eram #08071C / #131033 / #04030D, que é um violeta
     * quase preto e NÃO existe na paleta da Astrofala. Ele apanhou isso a
     * 2026-08-13: "o fundo não está da cor do herói do site, ou do fundo do
     * tarot". Tinha razão, e a diferença via-se ao passar de uma página para a
     * outra.
     *
     * O padrão da casa está em `.af-hero` (assets/home/astrofala-home.css):
     * violeta #4A2A8C no alto, a cair para o azul-noite #010535, que é o
     * `--af-night` de assets/marca/astrofala.css e é o mesmo fundo que o Tarot
     * dos 7 Dias usa. É isso que estes três valores reproduzem.
     *
     * ⚠️ A forma NÃO é copiada do herói tal e qual. Lá o radial cobre 100% da
     * altura, porque o herói é uma faixa; aqui a página é comprida (a leitura
     * inteira) e um radial dessa altura deixava a página toda violeta. Por isso
     * o violeta fica concentrado no topo e o resto é o degradê linear.
     */
    --af-noite: #16103C;
    --af-noite-2: #0B0A2C;
    --af-noite-3: #010535;
    --af-tinta: #EFEBFA;
    --af-tinta-2: #B9B2D6;
    --af-tinta-3: #8079A6;
    --af-risco: #241F45;
    --af-ouro: #F0C36B;
    --af-ouro-fundo: #C79A47;

    --af-runas-dur: 2600ms;

    /*
     * O tom do bloco "Outros mapas" (partials/outros_mapas.php).
     *
     * Esse bloco é claro por omissão, e o título dele saía com o `--af-heading`
     * da marca - que é #010535, a MESMA cor em que este gradiente acaba.
     * Contraste 1,00: desaparecia por completo no fim da página. Apanhado por
     * ele a 2026-08-28.
     *
     * Reaproveitam-se as tintas desta página, que é o que o resto do texto já
     * usa: 16,69 e 9,68 de contraste no fundo, 15,28 e 8,86 no topo do
     * gradiente. Quem tiver fundo escuro e incluir aquele bloco declara estas
     * duas variáveis - o outros-mapas.css não conhece páginas pelo nome.
     */
    --md-outros-titulo: var(--af-tinta);
    --md-outros-sub: var(--af-tinta-2);

    position: relative;
    color: var(--af-tinta);
    background:
        radial-gradient(ellipse 125% 62% at 50% -4%, #4A2A8C 0%, transparent 64%),
        linear-gradient(180deg, var(--af-noite) 0%, var(--af-noite-2) 45%, var(--af-noite-3) 100%);
    font-family: var(--af-font, "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    padding: 2.5rem 0 4.5rem;
    min-height: 70vh;
}

.af-runas-wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.4rem; }

/* ---------------- cabeçalho ---------------- */
.af-runas-cabecalho { text-align: center; margin-bottom: 2rem; }
.af-runas-titulo {
    font-family: var(--af-font-title, "Poppins", sans-serif);
    font-size: clamp(1.9rem, 5vw, 3rem);
    font-weight: 600; line-height: 1.1; margin: 0 0 .7rem;
}
.af-gold-text {
    background: linear-gradient(178deg, #FFF6E2 8%, var(--af-ouro) 52%, #8A6420 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.af-runas-lede {
    color: var(--af-tinta-2); font-size: 1.05rem; line-height: 1.6;
    max-width: 56ch; margin: 0 auto;
}
.af-runas-periodo {
    display: inline-flex; align-items: center; gap: .5rem;
    color: var(--af-ouro); font-size: .95rem; margin: 0;
}
.af-runas-periodo-passado { color: var(--af-tinta-3); }

/* ---------------- o campo do nome ---------------- */
.af-runas-nome-campo {
    max-width: 26rem; margin: 0 auto 2rem; display: flex;
    flex-direction: column; gap: .45rem; text-align: left;
}
.af-runas-nome-campo label { font-size: .9rem; color: var(--af-tinta-2); }
.af-runas-input {
    background: rgba(255, 255, 255, .05); border: 1px solid var(--af-risco);
    border-radius: 3px; padding: .8rem 1rem; color: var(--af-tinta);
    font: inherit; font-size: 1.02rem;
}
.af-runas-input::placeholder { color: var(--af-tinta-3); }
.af-runas-input:focus { outline: 2px solid var(--af-ouro); outline-offset: 2px; }
.af-runas-erro { color: #FF9E8F; font-size: .9rem; margin: 0; }

/* A nota de privacidade debaixo do campo do nome, com os mesmos valores da
   do Tarot dos 7 Dias (af-lt-nota-dados): informa, não vende.

   Não há selo de preço nesta página - ver a nota na view. */
.af-runas-nota-dados {
    margin: .7rem 0 0;
    color: rgba(244, 236, 200, .45);
    font-size: .78rem;
    text-align: center;
}

/* ---------------- o palco ---------------- */
.af-runas-palco {
    display: grid; grid-template-columns: 260px 1fr; gap: 2.2rem; align-items: start;
}
.af-runas-zona-bau {
    position: relative; display: flex; flex-direction: column;
    align-items: center; gap: 1rem;
}
.af-runas-bau {
    background: none; border: 0; padding: 0; cursor: pointer; width: 100%; display: block;
    transition: transform .3s cubic-bezier(.2, 1, .3, 1);
}
.af-bau-svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .55)); }
.af-runas-bau:hover:not(:disabled) { transform: translateY(-6px); }
.af-runas-bau:focus-visible, .af-runas-btn:focus-visible { outline: 2px solid var(--af-ouro); outline-offset: 3px; }

/*
 * A cerimónia. O andamento é lento de propósito: o gesto tem de parecer um
 * ritual e não um botão. `--af-runas-dur` é escrita pelo JS, porque a 1ª runa
 * leva a cerimónia inteira e a 3ª, que fecha o jogo, leva ainda mais.
 */
.af-runas-bau-abre { animation: af-runas-abre var(--af-runas-dur) cubic-bezier(.32, .06, .24, 1); }
@keyframes af-runas-abre {
    0%   { transform: translateY(0) scale(1); }
    16%  { transform: translateY(-13px) scale(1.045); }
    30%  { transform: translateY(-15px) scale(1.05); }
    62%  { transform: translateY(-13px) scale(1.042); }
    100% { transform: translateY(0) scale(1); }
}
.af-runas-clarao {
    position: absolute; left: 50%; top: 34%; width: 250px; height: 250px;
    transform: translate(-50%, -50%); border-radius: 50%;
    pointer-events: none; opacity: 0;
    background: radial-gradient(circle, rgba(240, 195, 107, .85) 0%, rgba(240, 195, 107, .34) 36%, transparent 70%);
}
.af-runas-clarao-acende { animation: af-runas-clarao var(--af-runas-dur) cubic-bezier(.25, .5, .3, 1); }
@keyframes af-runas-clarao {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
    20%  { opacity: .95; transform: translate(-50%, -50%) scale(1); }
    55%  { opacity: .8; transform: translate(-50%, -50%) scale(1.12); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.42); }
}

.af-runas-btn {
    font-family: var(--af-font-title, "Poppins", sans-serif);
    letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
    font-size: .82rem; cursor: pointer; border: 0; border-radius: 3px;
    padding: .85rem 1.2rem; width: 100%;
    background: linear-gradient(180deg, var(--af-ouro) 0%, var(--af-ouro-fundo) 100%);
    color: #150F02; box-shadow: 0 0 22px rgba(240, 195, 107, .28);
    transition: filter .18s, box-shadow .18s;
}
.af-runas-btn:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 0 30px rgba(240, 195, 107, .42); }
.af-runas-btn:disabled { opacity: .6; cursor: default; }
.af-runas-nota { font-size: .87rem; color: var(--af-tinta-3); text-align: center; line-height: 1.5; margin: 0; }

/* ---------------- os três lugares ---------------- */
.af-runas-lugares { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.af-runas-lugar {
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
    text-align: center; padding: 1rem .6rem;
}
/* pousam desalinhadas, como caídas - e não em três colunas iguais */
.af-runas-lugar:nth-child(1) { padding-top: 1.6rem; }
.af-runas-lugar:nth-child(3) { padding-top: 2.4rem; }
.af-runas-lugar-area {
    font-family: var(--af-font-title, "Poppins", sans-serif);
    font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--af-ouro); font-weight: 600;
}
.af-runas-lugar-diz { font-size: .84rem; color: var(--af-tinta-3); line-height: 1.4; max-width: 20ch; }
.af-runas-vaga {
    width: 100%; max-width: 128px; aspect-ratio: 100 / 140;
    border: 1px dashed var(--af-risco);
    border-radius: 48% 52% 46% 54% / 44% 48% 52% 56%;
    display: grid; place-items: center;
    color: var(--af-tinta-3); font-size: .78rem;
}
/* Ocupada: a pedra desenhada entra por dentro e traz o seu próprio volume,
   por isso o tracejado da vaga desaparece em vez de virar moldura. */
.af-runas-vaga-cheia {
    border: 0; aspect-ratio: 300 / 348; max-width: 158px;
}
.af-runas-vaga-cheia svg { width: 100%; height: 100%; display: block; }
.af-runas-lugar-runa {
    display: flex; flex-direction: column; gap: .15rem; align-items: center;
    font-size: .95rem; color: var(--af-tinta);
}
.af-runas-lugar-inv {
    font-style: normal; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
    color: #150F02; background: var(--af-ouro); border-radius: 3px; padding: .1rem .45rem;
}
.af-runas-lugar-trad { font-size: .84rem; color: var(--af-tinta-3); font-style: italic; }

/* a pedra que voa do baú até ao lugar */
/* A pedra que voa é a runa já desenhada pelo servidor - não um verso. */
.af-runas-voadora { position: fixed; z-index: 60; pointer-events: none; display: block; }
.af-runas-voadora svg { width: 100%; height: 100%; display: block; }

/* ---------------- a leitura ---------------- */
.af-runas-mesa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin: 2rem 0; }
.af-runa {
    display: flex; flex-direction: column; align-items: center; gap: .6rem;
    text-align: center; padding: 1.2rem .8rem;
    border: 1px solid var(--af-risco); border-radius: 4px;
    background: rgba(255, 255, 255, .028);
}
.af-runa-area { display: flex; flex-direction: column; gap: .2rem; margin: 0; }
.af-runa-area-nome {
    font-family: var(--af-font-title, "Poppins", sans-serif);
    font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--af-ouro); font-weight: 600;
}
.af-runa-area-diz { font-size: .82rem; color: var(--af-tinta-3); }
/* A pedra traz o seu próprio fundo, sombra e halo, desenhados no SVG: pôr aqui
   um gradiente e uma sombra era duplicá-los e sujar o resultado. */
.af-runa-pedra {
    width: 100%; max-width: 152px; aspect-ratio: 300 / 348;
    display: grid; place-items: center;
}
.af-runa-pedra svg { width: 100%; height: 100%; display: block; }
.af-runa-nome {
    font-family: var(--af-font-title, "Poppins", sans-serif);
    font-size: 1.16rem; font-weight: 600; margin: 0; letter-spacing: .04em;
}
.af-runa-marca {
    font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
    color: #150F02; background: var(--af-ouro); border-radius: 3px; padding: .15rem .5rem;
}
.af-runa-trad { font-size: .87rem; color: var(--af-tinta-3); font-style: italic; margin: 0; }
.af-runa-frase { font-size: .97rem; color: var(--af-tinta-2); line-height: 1.6; }
.af-runa-frase p { margin: 0 0 .5rem; }

/* ---------------- o botão da interpretação ---------------- */
.af-runas-interpretacao {
    border: 1px solid var(--af-risco); border-radius: 4px;
    background: rgba(255, 255, 255, .028); margin: 2rem 0;
}
.af-runas-abrir {
    cursor: pointer; padding: 1.3rem 1.4rem; display: flex;
    flex-direction: column; gap: .3rem; align-items: center; text-align: center;
    list-style: none;
}
.af-runas-abrir::-webkit-details-marker { display: none; }
.af-runas-abrir-texto {
    font-family: var(--af-font-title, "Poppins", sans-serif);
    font-size: 1.02rem; font-weight: 600; color: var(--af-ouro);
    display: inline-flex; align-items: center; gap: .6rem;
}
.af-runas-abrir-nota { font-size: .87rem; color: var(--af-tinta-3); }
.af-runas-abrir:hover .af-runas-abrir-texto { filter: brightness(1.12); }
.af-runas-interpretacao[open] .af-runas-abrir { border-bottom: 1px solid var(--af-risco); }
.af-runas-corpo { padding: 1.6rem 1.4rem; display: flex; flex-direction: column; gap: 2rem; }

.af-runa-leitura { display: flex; flex-direction: column; gap: .7rem; }

/*
 * O cabeçalho de cada item da interpretação: a pedra à esquerda, a área e o
 * título à direita.
 *
 * ⚠️ A pedra aqui é a MESMA do helper, e vive a 72px contra os 152px da mesa.
 * Quem chega à interpretação já rolou para longe das três pedras do topo, e sem
 * ela o item passa a ser só texto - a pessoa perde de vista qual runa está a
 * ler. Como é SVG, encolher não custa nada nem perde definição.
 *
 * O `min-width: 0` no bloco de texto não é decorativo: sem ele um título
 * comprido empurra a pedra e desalinha os três itens uns dos outros, porque o
 * conteúdo de um flex-item não encolhe abaixo do tamanho natural dele.
 */
.af-runa-leitura-cab {
    display: flex; align-items: center; gap: 1rem;
}
.af-runa-leitura-pedra {
    width: 72px; flex: none; aspect-ratio: 300 / 348;
    display: grid; place-items: center;
}
.af-runa-leitura-pedra svg { width: 100%; height: 100%; display: block; }
.af-runa-leitura-id {
    min-width: 0; display: flex; flex-direction: column; gap: .35rem;
}

.af-runa-leitura-area {
    font-family: var(--af-font-title, "Poppins", sans-serif);
    font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--af-ouro); display: flex; align-items: center; gap: .6rem;
    flex-wrap: wrap; margin: 0;
}
.af-runa-leitura-num {
    width: 1.6rem; height: 1.6rem; border-radius: 50%; flex: none;
    display: grid; place-items: center;
    border: 1px solid currentColor; font-size: .8rem;
}
.af-runa-leitura-runa { color: var(--af-tinta-3); letter-spacing: .04em; }
.af-runa-leitura-titulo {
    font-family: var(--af-font-title, "Poppins", sans-serif);
    font-size: 1.2rem; font-weight: 600; margin: 0;
}
.af-runa-moldura, .af-runa-texto { color: var(--af-tinta-2); line-height: 1.7; }
.af-runa-moldura { font-size: .95rem; color: var(--af-tinta-3); }
.af-runa-nota-invertida {
    font-size: .9rem; color: var(--af-ouro); margin: 0;
    display: flex; gap: .5rem; align-items: flex-start; line-height: 1.5;
}
/*
 * A frase do cadeado é DOURADA, e o cadeado com ela.
 *
 * Estava em `--af-tinta-3`, o cinzento-lilás do texto secundário, o que a fazia
 * ler-se como nota de rodapé - justamente a linha que diz à pessoa que há mais
 * para ler. O dourado é a cor com que a marca marca o que vale dinheiro, e é a
 * mesma do título de cada leitura.
 *
 * ⚠️ O ícone herda a cor por `currentColor` (o Font Awesome desenha em fonte),
 * portanto basta a cor no `p` - não é preciso pintar o `i` à parte.
 */
.af-runa-cadeado {
    font-size: .88rem; color: var(--af-ouro); margin: 0;
    display: flex; gap: .5rem; align-items: center;
}

.af-runas-sintese { border-top: 1px solid var(--af-risco); padding-top: 1.4rem; }
.af-runas-sintese-titulo {
    font-family: var(--af-font-title, "Poppins", sans-serif);
    font-size: 1.15rem; font-weight: 600; margin: 0 0 .7rem;
}
/* Dourada, e o cadeado com ela - pela mesma razão da `.af-runa-cadeado`: é a
   linha que diz que há mais para ler, e não uma nota de rodapé. O ícone herda
   a cor por `currentColor`. */
.af-runas-sintese-fechado { color: var(--af-ouro); display: flex; gap: .6rem; align-items: center; margin: 0; }
.af-runas-sintese-texto { color: var(--af-tinta-2); line-height: 1.7; }

.af-runas-passou {
    border: 1px solid var(--af-risco); border-radius: 4px; padding: 1.1rem 1.3rem;
    display: flex; flex-wrap: wrap; gap: .9rem; align-items: center;
    justify-content: space-between; margin-bottom: 1.6rem;
}
.af-runas-passou-texto { color: var(--af-tinta-2); font-size: .95rem; margin: 0; display: flex; gap: .6rem; align-items: center; }
.af-runas-passou-btn {
    color: var(--af-ouro); text-decoration: none; font-weight: 600; font-size: .92rem;
    display: inline-flex; gap: .5rem; align-items: center; white-space: nowrap;
}
.af-runas-refazer { text-align: center; margin: 1.6rem 0 0; }
.af-runas-refazer a { color: var(--af-tinta-3); text-decoration: none; font-size: .93rem; }
.af-runas-refazer a:hover { color: var(--af-ouro); }

@media (prefers-reduced-motion: reduce) {
    .af-runas-bau-abre, .af-runas-clarao-acende { animation: none; }
    .af-runas-bau { transition: none; }
}

@media (max-width: 900px) {
    .af-runas-palco { grid-template-columns: 1fr; gap: 1.8rem; }
    .af-runas-zona-bau { max-width: 240px; margin: 0 auto; }
}
@media (max-width: 680px) {
    .af-runas-lugares, .af-runas-mesa { grid-template-columns: 1fr; }
    .af-runas-lugar:nth-child(n) { padding-top: 0; }
    .af-runas-vaga, .af-runa-pedra { max-width: 108px; }
    /* a pedra do cabeçalho encolhe na mesma proporção da mesa */
    .af-runa-leitura-pedra { width: 54px; }
    .af-runa-leitura-cab { gap: .8rem; }
}

/* Na impressão, a interpretação abre-se sempre: um `<details>` fechado
   imprimia uma página com três pedras e mais nada. */
@media print {
    .af-runas { background: #fff; color: #000; }
    .af-runas-interpretacao[open], .af-runas-interpretacao { border: 0; }
    .af-runas-corpo { display: block !important; }
    .af-runas-abrir, .af-runas-zona-bau, .af-runas-refazer, .nao-imprimir { display: none !important; }
    .af-runa-frase, .af-runa-texto, .af-runa-moldura, .af-runas-sintese-texto { color: #000; }
    .af-runa-pedra { background: none; box-shadow: none; color: #000; border: 1px solid #999; }
}