/*
 * Home da Astrofala - plataforma multi-produto de mapas.
 *
 * A paleta sai da identidade da empresa (Website/css/custom.css):
 *   --primary-color #010535   azul-noite, o fundo da marca
 *   --accent-color  #1956C1   azul de acento
 *   --secondary     #FAFAFB   o claro
 * e os dourados foram amostrados do proprio logotipo
 * (logo-astrofala-horizontal-site-dourado.png).
 *
 * Regra de contraste que este ficheiro respeita em todo o lado:
 * dourado SO em fundo escuro. Sobre branco o dourado claro nao chega ao
 * minimo AA (2,5:1), por isso em fundo claro ele so aparece como elemento
 * decorativo ou na variante escura --af-gold-deep.
 *
 * So e carregado pela view da home, por isso pode sobrepor `body.index`.
 */

/* A paleta e os botoes vivem em assets/marca/astrofala.css, carregado antes
   deste ficheiro pela view. */

/* ---------------------------------------------------------------- base --- */

/* Os CTA principais sao ancoras para a grelha dos mapas - o salto e suave,
   e o topo das seccoes nao fica escondido atras do menu. */
html { scroll-behavior: smooth; }
.af-home [id] { scroll-margin-top: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/*
 * O herói encosta ao topo e a barra de menus flutua por cima dele.
 *
 * Antes havia 9rem de branco acima do azul-noite: 1,5rem do `mt-4`, 3,5rem da
 * própria navbar e 4rem do `mb-6`. Tirando o container do menu do fluxo, o
 * gradiente começa no primeiro pixel da página e a barra mantém a cor e a
 * forma que já tinha - só passa a assentar sobre o céu em vez de sobre branco.
 *
 * O `:has()` faz isto sem tocar no HTML, que é do template e serve todas as
 * páginas. Num browser sem `:has()` a regra é simplesmente ignorada e a home
 * fica como estava: degrada sem partir nada.
 */
:root {
    /* 1,5rem do mt-4 + 4,25rem da barra (logo de 3,25rem + .5rem de padding) */
    --af-nav-espaco: 5.75rem;

    /*
     * O violeta do topo do céu, e o claro das estrelas.
     *
     * O violeta é escuro de propósito - é fundo, não é luz. A referência
     * (jornadadamanifestacao.lovable.app) usa `hsl(268 50% 14%)` no topo do
     * gradiente, um violeta que quase não se lê como cor até se comparar com o
     * azul ao lado. Este é o mesmo tom trazido para a paleta da marca.
     *
     * Em componentes RGB soltos porque cada paragem do gradiente lhes dá um
     * alfa próprio.
     *
     * Não confundir com o roxo #8351F0 do template, que saiu do site: aquele
     * era cor primária de botões e links; este é cor de fundo, e nunca pinta
     * texto nem controlos.
     */
    --af-violeta:     58, 38, 105;   /* #3A2669 - o violeta do topo do céu */
    --af-violeta-luz: 196, 181, 253; /* #C4B5FD - o rasto das cadentes */

    /*
     * ┌──────────────────────────────────────────────────────────────────────┐
     * │ FORÇA DO CÉU - o número a mexer se estiver a mais ou a menos.        │
     * └──────────────────────────────────────────────────────────────────────┘
     * Governa as estrelas e as cadentes ao mesmo tempo. 1 é o céu cheio, 0
     * deixa só o gradiente. Está em .85: as estrelas são poucas e pequenas, e
     * abaixo disto começam a desaparecer no violeta do topo.
     */
    --af-ceu-forca: .85;
}

.container:has(> #navbar) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-inline: auto;
    z-index: 30;
}

/* ------------------------------------ barra de menus dissolvida no céu --- */
/*
 * A barra deixou de ser um objeto e passou a ser o topo do herói.
 *
 * Passou por duas versões antes desta: a pílula branca do template, que se lia
 * como um retângulo colado por cima da imagem, e depois um vidro translúcido
 * com fio dourado. O vidro resolvia o branco mas continuava a desenhar uma
 * caixa: por mais discreta que fosse, havia sempre um contorno e um degrau de
 * cor entre a barra e o céu por baixo dela. Ele pediu que desaparecesse.
 *
 * Agora não há fundo, contorno, sombra nem desfoque - o céu do herói atravessa
 * a barra sem interrupção e o único que lá vive é o logotipo, os links e o
 * botão. A luz violeta corre por trás sem encontrar nada pelo caminho.
 *
 * As classes `border border-gray-100` vêm do template e servem todas as
 * páginas, por isso não se tiram do HTML - neutralizam-se aqui, que é o
 * ficheiro que só a home carrega. Nas outras páginas o fundo é claro e a barra
 * branca do template continua a ser o certo.
 *
 * O `!important` na borda não é preguiça: os utilitários do Bootstrap são eles
 * próprios `!important` (`.border-gray-100 { border-color: #f6f8f8 !important }`)
 * e sem isto a moldura clara sobrevivia a tudo o que se escrevesse aqui, por
 * mais específico que fosse o seletor. O `.navbar-main` acrescenta ainda um
 * `border-bottom`, que o `border: 0` apanha de caminho.
 */
#navbar {
    position: relative;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0 !important;
    box-shadow: none;
}

/* o conteúdo fica acima da luz que passa por trás */
#navbar > .container { position: relative; }

/* --- o que estava escrito para fundo branco e agora vive sobre escuro --- */

#navbar .nav-link { color: rgba(255, 255, 255, .86); }
#navbar .nav-link:hover,
#navbar .nav-link:focus { color: #fff; }
#navbar .nav-link i { color: var(--af-gold-bright); }
#navbar .navbar-custom-toggler { color: #fff; }

#navbar .btn-outline-primary {
    color: #fff;
    background: transparent;
    border-color: rgba(255, 255, 255, .45);
}
#navbar .btn-outline-primary:hover,
#navbar .btn-outline-primary:focus {
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border-color: #fff;
}

/* O CTA era azul sólido, que sobre o azul-noite se diluía (perto de 2:1).
   Passa ao dourado da marca, o mesmo dos botões do herói. */
#navbar .btn-primary {
    background: linear-gradient(135deg, var(--af-gold-bright), var(--af-gold));
    border-color: transparent;
    color: #2b1f05;
    font-weight: 600;
}
#navbar .btn-primary:hover,
#navbar .btn-primary:focus {
    background: linear-gradient(135deg, var(--af-gold-bright), var(--af-gold));
    border-color: transparent;
    color: #2b1f05;
    filter: brightness(1.06);
}

/* O menu suspenso dos Mapas abria um painel branco no meio do vidro */
#navbar .dropdown-menu {
    background: rgba(1, 5, 53, .94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(222, 196, 96, .22);
    box-shadow: 0 18px 40px rgba(1, 5, 53, .45);
}
#navbar .dropdown-item { color: rgba(255, 255, 255, .86); }
#navbar .dropdown-item:hover,
#navbar .dropdown-item:focus {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}
#navbar .dropdown-header { color: var(--af-gold-bright); }
#navbar .dropdown-divider { border-top-color: rgba(255, 255, 255, .14); }

/* Logotipo maior: 2,5rem era a medida do template, não uma decisão de marca */
#navbar .navbar-logo {
    height: 3.25rem;
    max-height: 3.25rem;
}

/* ---------------------------------------- o menu aberto no telemóvel --- */
/*
 * O PROBLEMA QUE ISTO RESOLVE
 *
 * Tirar o fundo à barra foi o que se pediu e está certo - fechada, ela tem de
 * desaparecer no céu. Mas no telemóvel a barra não é só a barra: ao tocar no
 * ícone das três riscas, o Bootstrap abre um painel com dez ou doze linhas por
 * baixo dela. Sem fundo, esse painel cai POR CIMA do título e do formulário do
 * herói, e ficam duas camadas de texto branco sobrepostas. Era o que ele viu, e
 * "poluído" é a palavra exata.
 *
 * A barra continua sem fundo. Só o painel, e só enquanto está aberto, ganha
 * superfície própria - que é o que qualquer menu de telemóvel tem.
 *
 * O `.collapsing` está na lista com o `.show` de propósito: é a classe que o
 * Bootstrap usa durante a animação de abrir e fechar. Sem ela, o fundo só
 * aparecia depois de o painel estar aberto, e via-se meio segundo de texto
 * sobreposto em cada toque - precisamente o defeito, agora intermitente.
 */
@media (max-width: 991.98px) {
    #navbar .navbar-collapse.show,
    #navbar .navbar-collapse.collapsing {
        margin-top: .85rem;
        padding: .35rem 1rem .9rem;
        border-radius: var(--af-radius);
        background: rgba(14, 9, 46, .94);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        border: 1px solid rgba(255, 255, 255, .1);
        box-shadow: 0 24px 60px rgba(1, 5, 53, .6);

        /* Num telemóvel deitado, ou com muitos mapas na lista, o painel passava
           o fim do ecrã e os últimos itens ficavam inalcançáveis. Assim rola
           dentro de si mesmo em vez de crescer sem fim. */
        max-height: calc(100vh - 9rem);
        overflow-y: auto;
    }

    /* Uma linha ténue entre itens: com dez ou doze seguidos e sem separação
       nenhuma, a lista lê-se como um bloco de texto. */
    #navbar .navbar-collapse.show .navbar-nav > .nav-item + .nav-item {
        border-top: 1px solid rgba(255, 255, 255, .07);
    }

    /*
     * O submenu dos Mapas deixa de ser uma caixa.
     *
     * Fora do painel ele é um cartão flutuante e precisa de fundo próprio.
     * Dentro dele, esse fundo desenha uma segunda caixa escura por cima da
     * primeira, com duas bordas a um milímetro uma da outra - e é aí que a
     * poluição se vê mais. Aqui dentro ele é só uma lista indentada.
     */
    #navbar .navbar-collapse.show .dropdown-menu {
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border: 0;
        box-shadow: none;
        padding-left: .5rem;
        margin: 0 0 .25rem;
        /* a barra dourada substitui a moldura: diz que aquilo pertence ao item
           de cima sem acrescentar um retângulo à composição */
        border-left: 2px solid rgba(222, 196, 96, .35);
        border-radius: 0;
    }

    /*
     * Entrar e Criar conta empilham-se à largura toda, e saem da lista.
     *
     * São dois `<li>` como os outros, mas não são navegação: são as duas ações
     * da página. Com o traço por cima e a largura do texto, liam-se como mais
     * duas linhas do menu. Aqui perdem o traço, ganham a largura toda e ficam
     * no fim, separados do resto e um do outro.
     */
    #navbar .navbar-collapse.show .nav-item:has(> .btn) {
        border-top: 0;
        padding: 0 !important;
    }

    /*
     * Os dois espaços, e porque são seletores de irmão e não `:first-of-type`.
     *
     * `:first-of-type` conta o primeiro `<li>` do menu, não o primeiro que tem
     * botão - e o primeiro `<li>` do menu é o Tarot. A regra que aqui estava
     * com `:first-of-type` não se aplicava a rigorosamente nada, o que explica
     * os botões colados um ao outro.
     *
     * Ler de trás para a frente:
     *   um item COM botão precedido de um SEM  -> é o primeiro do grupo, e leva
     *                                             o respiro que o separa do menu
     *   um item COM botão precedido de outro COM -> é o segundo, e leva só o
     *                                             espacinho entre os dois
     */
    #navbar .navbar-collapse.show .nav-item:not(:has(> .btn)) + .nav-item:has(> .btn) {
        margin-top: 1rem;
    }
    #navbar .navbar-collapse.show .nav-item:has(> .btn) + .nav-item:has(> .btn) {
        margin-top: .6rem;
    }

    #navbar .navbar-collapse.show .btn {
        display: flex;
        width: 100%;
        justify-content: center;
        padding: .65rem 1rem;
    }
}

.af-home {
    font-family: var(--af-font);
    color: var(--af-text);
    background: var(--af-bg);
    /* sai do container do wrapper para o hero poder ir de margem a margem */
    margin: 0 0 -3rem;
    overflow-x: hidden;
}

.af-home h1,
.af-home h2,
.af-home h3,
.af-home h4 {
    font-family: var(--af-font-title);
    color: var(--af-heading);
    font-weight: 600;
    line-height: 1.18;
    margin: 0;
}

.af-home p { line-height: 1.65; margin: 0; }

.af-wrap {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

.af-section { padding: 4.5rem 0; }
.af-section-head { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
.af-section-head h2 { font-size: 2rem; margin-bottom: .85rem; }
.af-section-head p { font-size: 1.0625rem; }
.af-step h3 + p { margin-top: .5rem; }

/* Palavra em destaque nos titulos claros: dourado escuro, que passa AA */
.af-accent { color: var(--af-gold-deep); }

.af-eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--af-blue);
    margin-bottom: .85rem;
}

/* ---------------------------------------------------------------- hero --- */

/*
 * O CÉU VIVE SÓ AQUI.
 *
 * Isto é o herói, e o herói é o topo da home - mais nada. O resto da página
 * continua com o fundo claro que sempre teve, e as outras páginas do site nem
 * sequer carregam este ficheiro. O site de referência é escuro de alto a baixo;
 * o nosso não é, e não passa a ser.
 *
 * O GRADIENTE É UM SÓ, E ISSO É A REGRA MAIS IMPORTANTE AQUI.
 *
 * Chegou a ter três camadas sobrepostas: uma elipse violeta, uma mancha
 * dourada no canto e um gradiente vertical por baixo de tudo. O resultado
 * parecia manchado, e com razão - onde duas camadas se cruzavam nascia uma
 * zona mais clara que não pertencia a nenhuma delas. É o defeito clássico de
 * empilhar gradientes translúcidos: cada um sozinho parece bem e a soma
 * parece suja.
 *
 * A referência (jornadadamanifestacao.lovable.app) resolve isto com UMA linha:
 *
 *     radial-gradient(ellipse at top, hsl(268 50% 14%), hsl(245 40% 7%) 45%, hsl(240 45% 4%))
 *
 * Uma só camada, quatro paragens, transição contínua do violeta ao escuro.
 * Sem sobreposições não há sítio nenhum onde possa aparecer uma mancha.
 *
 * TRÊS PARAGENS, NÃO CINCO - e é aqui que estava o segundo erro.
 *
 * Convertendo o HSL da referência para o que se lê: #221236 no topo, #0C0B19
 * já aos 45% do raio, quase preto no fim. Ou seja, o violeta desaparece
 * DEPRESSA. É esse corte rápido que o faz parecer nítido - não é a cor ser
 * clara, é o que está por baixo ser muito escuro logo a seguir.
 *
 * A minha primeira versão espalhava cinco paragens por toda a altura, e o
 * violeta atravessava o herói inteiro a desmaiar aos poucos. Lido de longe
 * parecia um azul a puxar ao roxo, e ele disse-o: "o violeta nota-se pouco".
 * Com menos paragens e a queda concentrada nos primeiros 45%, a mesma cor
 * passa a ver-se muito mais.
 *
 * As cores: o violeta do topo é mais claro do que o da referência, que é quase
 * preto e não serviria a uma marca que não é escura de alto a baixo; a última
 * paragem é o azul-noite da marca, que é onde o herói tem de acabar para
 * encontrar o resto da página. A elipse é o que faz a luz parecer vir de cima
 * em vez de ser uma banda a atravessar a direito.
 */
.af-hero {
    position: relative;
    background: radial-gradient(ellipse 125% 100% at 50% -6%,
        #4A2A8C 0%,
        #16103C 45%,
        var(--af-night) 100%);
    /*
     * O topo abre espaço para a barra de menus, que flutua por cima, MAIS o
     * respiro por baixo dela. As 4rem de respiro são as mesmas que o `mb-6` do
     * template dava antes de a barra sair do fluxo: com 1,5rem, que foi o
     * primeiro valor, o título encostava à barra em telemóvel.
     */
    padding: calc(var(--af-nav-espaco) + 4rem) 0 5.5rem;
    overflow: hidden;
    isolation: isolate;
}

/*
 * As estrelas mudaram de sítio.
 *
 * Aqui viveu um campo de dezasseis pontos em dois pseudo-elementos do herói.
 * Passou para o bloco `.af-ceu`, mais abaixo, quando lhe fizeram companhia as
 * estrelas cadentes: as duas coisas são o mesmo céu e têm de subir e descer
 * juntas com a mesma variável, o que não dá para fazer com uma metade em
 * pseudo-elementos e a outra em elementos.
 *
 * O `::before` e o `::after` do herói ficam livres de propósito: são o sítio
 * óbvio para a próxima camada de fundo que apareça.
 */

/* ------------------------------------------------- o céu: só a moldura --- */
/*
 * As estrelas e as cadentes vivem num canvas, desenhadas por
 * `assets/marca/ceu.js`. Aqui fica só o sítio onde ele assenta.
 *
 * PORQUE SAÍRAM DO CSS
 * Estiveram aqui, como setenta radial-gradients num `background-image`. Duas
 * coisas não davam para resolver por esta via: as posições eram percentagens,
 * portanto esticavam com o ecrã e em certas larguras alinhavam-se sozinhas -
 * o Wagner viu uma fileira vertical no meio do herói, que era exatamente isso;
 * e todas as estrelas de uma camada partilhavam a mesma animação, portanto
 * cintilavam em bloco, que é o contrário de um céu.
 *
 * O canvas resolve as duas: recalcula as posições em pixels a cada
 * redimensionamento, e dá a cada estrela a sua própria fase.
 *
 * Se o JavaScript não correr, fica só o gradiente violeta do herói - que já é
 * a maior parte do efeito, e nunca foi o que torna alguma coisa legível.
 */
.af-ceu {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* as estrelas clareiam o gradiente, nunca o tapam */
    mix-blend-mode: screen;
    opacity: var(--af-ceu-forca);
    /* sem isto o céu chegava cortado a direito à fronteira com a secção branca
       de baixo e desenhava lá uma linha */
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 66%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 66%, transparent 100%);
}

/*
 * O céu é FUNDO e passa sempre por trás do texto, do logotipo e das imagens.
 *
 * A regra apanha todos os filhos do herói menos o próprio céu, e não só o
 * `.af-wrap` que lá está hoje: quem amanhã acrescentar um bloco ao herói fica
 * coberto sem ter de se lembrar disto. A barra de menus não precisa da regra
 * porque vive fora do herói, com z-index próprio muito acima.
 */
.af-hero > *:not(.af-ceu) { position: relative; z-index: 1; }

.af-hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    text-align: center;
}

.af-hero h1 {
    color: #fff;
    font-size: clamp(2rem, 5.4vw, 3rem);
    letter-spacing: -.02em;
    margin-bottom: 1.15rem;
    /* "Ser Magnifico" e uma unidade: nunca parte a meio */
    text-wrap: balance;
}

.af-hero h1 .af-gold-text { white-space: nowrap; }

.af-home .af-hero-sub {
    color: rgba(255, 255, 255, .82);
    font-size: clamp(1rem, 2.2vw, 1.1875rem);
    max-width: 620px;
    margin: 0 auto 2.25rem;
}

.af-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(222, 196, 96, .35);
    color: var(--af-gold-pale);
    font-size: .8125rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(6px);
}

.af-hero-badge .fa-star { color: var(--af-gold-bright); }

.af-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    justify-content: center;
}

/* ------------------------------------------ formulário no herói (opcional) ---
 * Só aparece com o interruptor `$af_hero_com_formulario` ligado na view. Todo
 * o bloco pode desaparecer sem deixar buracos: o herói volta aos dois botões.
 */
.af-hero-form {
    max-width: 460px;
    margin: 0 auto;
}

/* Um campo por linha, e não dois lado a lado: o nome é o campo mais longo do
   site e lado a lado ficava com metade da largura - "Maria Fernanda" já não
   cabia inteiro à vista. Empilhados, cada campo tem o herói todo. */
.af-hf-campos {
    display: grid;
    grid-template-columns: 1fr;
    gap: .7rem;
    margin-bottom: 1rem;
}

/* Cada campo é uma caixa com o ícone por dentro - o ícone diz o que se escreve
   ali antes de a pessoa ler o placeholder. */
.af-hf-campo {
    position: relative;
    min-width: 0;
}

.af-hf-campo .af-hf-icone {
    position: absolute;
    left: 1.35rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(222, 196, 96, .75);
    font-size: .95rem;
    pointer-events: none;
    transition: color .15s ease;
}

/*
 * Campos em PÍLULA de vidro, na paleta da marca.
 *
 * Duas tentativas antes desta: translúcido a 7% (elegante mas invisível - não
 * se via que havia ali onde escrever) e branco sólido com sombra preta pesada
 * (visível mas duro, um bloco branco a cortar o azul-noite).
 *
 * A forma vem da linguagem que o concorrente usa e que funciona: raio total,
 * borda fina TINGIDA da cor da marca, sombra suave também tingida em vez de
 * preta, e desfoque por trás. O que muda é a paleta - os deles são brancos
 * porque o herói deles é claro; num herói escuro o branco bate de frente.
 *
 * A borda dourada é o que define a forma, e é por isso que o campo se vê sem
 * precisar de fundo branco.
 */
.af-hf-input {
    width: 100%;
    min-width: 0;
    padding: 1.05rem 1.4rem 1.05rem 3.1rem;
    border-radius: 999px;
    border: 1.5px solid rgba(222, 196, 96, .5);
    background: rgba(255, 255, 255, .09);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--af-gold-pale);
    font-size: 1.0625rem;
    font-family: inherit;
    box-shadow: 0 2px 16px rgba(222, 196, 96, .1);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.af-hf-input::placeholder { color: rgba(244, 236, 200, .62); opacity: 1; }

.af-hf-input:hover {
    border-color: rgba(222, 196, 96, .75);
    background: rgba(255, 255, 255, .13);
}

.af-hf-input:focus {
    outline: none;
    border-color: var(--af-gold-bright);
    background: rgba(255, 255, 255, .16);
    box-shadow: 0 0 0 4px rgba(222, 196, 96, .2), 0 2px 20px rgba(222, 196, 96, .14);
}

.af-hf-campo:focus-within .af-hf-icone { color: var(--af-gold-bright); }

/* O botão acompanha a forma dos campos - se ficasse de cantos redondos ao lado
   de duas pílulas, lia-se como peça de outro conjunto. */
.af-hf-btn { border-radius: 999px; }

.af-hf-btn { width: 100%; justify-content: center; }

.af-hf-nota {
    /* .85rem → 1.6rem → 2.4rem, em dois pedidos dele a 2026-08-13: colada ao
       botão, a garantia lia-se como parte dele em vez de uma nota do formulário.
       O botão não tem margem inferior nenhuma, portanto todo o respiro entre os
       dois vem daqui. */
    margin: 2.4rem 0 0;
    font-size: .875rem;
    color: rgba(244, 236, 200, .7);
    text-align: center;
}

/*
 * "Quer outro mapa?" na linha de baixo, e SEMPRE centrado.
 *
 * ⚠️ O `text-align` aqui é explícito de propósito. Este link é um filho direto
 * do `.af-hero-form`, que no desktop alinha à esquerda com o resto do herói -
 * sem esta linha, ele herdava a esquerda. A nota acima está no mesmo caso e
 * resolve-o com a sua própria regra.
 */
.af-hf-outro {
    display: block;
    margin-top: .55rem;
    text-align: center;
    font-size: .875rem;
    color: var(--af-gold-bright);
    text-decoration: underline;
}

.af-hf-outro:hover,
.af-hf-outro:focus { color: var(--af-gold-bright); text-decoration: underline; opacity: .85; }

.af-hero-stats {
    display: flex;
    gap: 2.5rem;
    justify-content: center;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
    flex-wrap: wrap;
}

.af-stat-number {
    display: block;
    font-family: var(--af-font-title);
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.af-stat-label {
    font-size: .8125rem;
    color: rgba(255, 255, 255, .62);
    letter-spacing: .04em;
}

/* Emblema da marca, so em ecra largo */
.af-hero-emblem { display: none; }

@media (min-width: 992px) {
    .af-hero { padding: calc(var(--af-nav-espaco) + 4.5rem) 0 6.5rem; }
    .af-hero-inner {
        grid-template-columns: 1.25fr .75fr;
        text-align: left;
    }
    /* prefixado com .af-home para vencer a regra base, que centra com margin auto */
    .af-home .af-hero-sub { margin-left: 0; margin-right: 0; }
    .af-hero-actions { justify-content: flex-start; }
    /* no desktop o herói é alinhado à esquerda, e o formulário acompanha */
    .af-hero-form { margin-left: 0; margin-right: 0; }
    /* ⚠️ A nota e o link do fim do formulário são a EXCEÇÃO: ficam centrados
       também no desktop, por pedido dele a 2026-08-13. Havia aqui um
       `.af-hf-nota { text-align: left; }` que os puxava para a esquerda com o
       resto do herói - foi removido de propósito, não esquecido. */
    .af-hero-stats { justify-content: flex-start; }
    .af-hero-emblem {
        display: block;
        justify-self: center;
        position: relative;
    }
    .af-hero-emblem img {
        /*
         * Cresce com o ecrã em vez dos 260px fixos de antes. O tecto são 360px
         * por causa do ficheiro: tem 500px de lado, e acima disto deixa de
         * haver o dobro dos pixeis que um ecrã de alta densidade pede. Para ir
         * além de 360px, reexportar o PNG a 800px de lado.
         *
         * O halo por trás usa `inset: -22%`, por isso acompanha sozinho.
         */
        width: clamp(300px, 22vw, 360px);
        height: clamp(300px, 22vw, 360px);
        /* halo suave em vez de um borrao largo, que fazia o emblema
           parecer desfocado nas bordas */
        filter: drop-shadow(0 6px 18px rgba(1, 5, 53, .55)) drop-shadow(0 0 34px rgba(53, 119, 194, .38));
        animation: af-float 7s ease-in-out infinite;
    }
    /* halo por tras do emblema */
    .af-hero-emblem::before {
        content: "";
        position: absolute;
        inset: -22%;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(222, 196, 96, .18), transparent 62%);
        z-index: -1;
    }
}

@keyframes af-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

/* ------------------------------------------------------------ produtos --- */

.af-produtos { background: var(--af-bg); }

.af-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

/* Tres colunas, decidido a 2026-08-05. Eram quatro, e com seis mapas a grelha
   fechava 4 + 2: a segunda fila ficava a meio, com dois buracos ao lado. A tres
   fecham duas filas cheias.

   Se um dia forem sete (o Mapa Astral esta desligado, ver Produtos::ativo), a
   ultima fila volta a ter um cartao solto - nessa altura ou se acrescenta o
   oitavo ou se volta a quatro. Nao ha numero de colunas que sirva todos os
   totais, so o que serve o total de hoje. */
.af-grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* A grelha de baixo tem poucos cartoes: sem teto de largura, dois cartoes
   esticavam-se a meia pagina cada um. */
.af-grid-conta {
    grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
    justify-content: center;
}

@media (min-width: 768px) and (max-width: 1199px) {
    .af-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
    .af-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.af-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--af-surface);
    border: 1px solid var(--af-divider);
    border-radius: var(--af-radius);
    overflow: hidden;
    box-shadow: var(--af-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.af-card:hover,
.af-card:focus-within {
    transform: translateY(-5px);
    box-shadow: var(--af-shadow-hover);
    border-color: transparent;
}

/* barra de cor do produto - a mesma paleta de "Meus Mapas" */
.af-card-bar { height: 5px; width: 100%; background: linear-gradient(90deg, var(--c1), var(--c2)); }

.af-card-body { padding: 1.5rem 1.4rem 1.25rem; display: flex; flex-direction: column; flex: 1; }

.af-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--c1), var(--c2));
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 1.1rem;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--c1) 35%, transparent);
}

.af-card h3 { font-size: 1.1875rem; margin-bottom: .55rem; }

.af-home .af-card-text {
    font-size: .9375rem;
    color: var(--af-text);
    margin-bottom: 1.25rem;
}

.af-card-list { list-style: none; padding: 0; margin: 0 0 1.25rem; }

.af-card-list li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .875rem;
    color: var(--af-heading);
    margin-bottom: .5rem;
    line-height: 1.45;
}

.af-card-list i { color: #16a34a; margin-top: .2rem; font-size: .8125rem; }

.af-card-foot {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--af-divider);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.af-price { font-family: var(--af-font-title); font-weight: 600; color: var(--af-heading); font-size: .9375rem; min-width: 0; }
.af-price small { display: block; font-weight: 400; font-size: .75rem; color: var(--af-text); }
.af-price-free { color: #16a34a; }

/*
 * O preco de tabela riscado, ao lado do que se cobra.
 *
 * ⚠️ O SELETOR TEM DE SER `.af-price small.af-price-antes` e nao so
 * `.af-price-antes`: a regra acima poe `display: block` em TODOS os <small>
 * deste bloco - e um bloco atirava o riscado para uma linha propria por cima do
 * preco, onde se le como dois precos diferentes em vez de um desconto.
 *
 * Ganha por especificidade (0,2,1 contra 0,1,1) e nao por `!important`, que
 * neste tema ja causou problemas por ninguem conseguir sobrepo-lo depois.
 *
 * A opacidade nao desce abaixo de .7: um riscado que nao se le nao ancora nada,
 * e a pessoa fica so a ver o preco final - perde-se metade do efeito.
 */
.af-price small.af-price-antes {
    display: inline;
    margin-right: .3rem;
    font-size: .8125rem;
    font-weight: 400;
    color: var(--af-text);
    opacity: .7;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.af-card-go {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--af-font-title);
    font-size: .875rem;
    font-weight: 600;
    color: var(--af-blue);
    /* "Criar conta" nao parte em duas linhas quando o preco e comprido */
    white-space: nowrap;
    flex-shrink: 0;
}

.af-card:hover .af-card-go i { transform: translateX(3px); }
.af-card-go i { transition: transform .18s ease; }

/* etiqueta de estado no canto */
.af-tag {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .3rem .6rem;
    border-radius: 999px;
    z-index: 2;
}

.af-tag-free { background: #dcfce7; color: #15803d; }
.af-tag-account { background: #eef2ff; color: #4338ca; }

/* cartao com selo de mais procurado */
.af-card-featured { border-color: var(--af-gold); box-shadow: 0 0 0 1px var(--af-gold), var(--af-shadow); }

.af-ribbon {
    position: absolute;
    top: 0;
    left: 1.4rem;
    background: linear-gradient(135deg, var(--af-night-2), var(--af-night));
    color: var(--af-gold-bright);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .35rem .75rem .3rem;
    border-radius: 0 0 8px 8px;
    z-index: 2;
}

/* o cartao inteiro e clicavel */
.af-stretch::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* ------------------------------------------------------- bloco da conta --- */

.af-conta { background: #fff; border-top: 1px solid var(--af-divider); }

.af-card-compact .af-card-body { padding: 1.35rem 1.25rem 1.1rem; }
.af-card-compact .af-card-icon { width: 44px; height: 44px; border-radius: 13px; font-size: 1.05rem; margin-bottom: .9rem; }
.af-card-compact h3 { font-size: 1.0625rem; }

/* ---------------------------------------------------------------- tarot --- */

/* Faixa escura entre os produtos e o "como funciona": corta a página ao meio
   com o mesmo céu do hero e destaca o que é grátis de quem cobra. */
.af-oraculo-faixa {
    position: relative;
    background:
        radial-gradient(700px 320px at 20% 0%, rgba(25, 86, 193, .5), transparent 70%),
        linear-gradient(150deg, var(--af-night) 0%, var(--af-night-2) 100%);
    padding: 3.5rem 0;
    overflow: hidden;
}

.af-of-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    text-align: center;
}

@media (min-width: 768px) {
    .af-of-inner { grid-template-columns: auto 1fr; gap: 3rem; text-align: left; }
}

.af-oraculo-faixa h2 { color: #fff; font-size: 1.875rem; margin-bottom: .75rem; }
.af-oraculo-faixa .af-eyebrow { color: var(--af-gold-bright); }
.af-home .af-of-texto p { color: rgba(255, 255, 255, .8); max-width: 520px; margin-bottom: 1.5rem; }

@media (min-width: 768px) {
    .af-home .af-of-texto p { margin-left: 0; }
}

/* três versos em leque, com a capa real do baralho */
.af-of-cartas {
    display: flex;
    justify-content: center;
    padding: .5rem 1.5rem;
}

.af-of-cartas span {
    width: 74px;
    aspect-ratio: 579 / 1000;
    border-radius: 8px;
    background: url('../oraculo/verso.png') center/cover no-repeat, var(--af-night);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
    display: block;
}

.af-of-cartas span:nth-child(1) { transform: rotate(-11deg) translateX(16px); }
.af-of-cartas span:nth-child(2) { transform: translateY(-8px); z-index: 2; }
.af-of-cartas span:nth-child(3) { transform: rotate(11deg) translateX(-16px); }

/* --------------------------------------------------------------- passos --- */

.af-passos { background: var(--af-bg); }

.af-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 2rem;
    counter-reset: af-step;
}

.af-step { text-align: center; position: relative; }

.af-step-num {
    counter-increment: af-step;
    width: 56px;
    height: 56px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--af-night-2), var(--af-night));
    color: var(--af-gold-bright);
    font-family: var(--af-font-title);
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: 0 10px 26px rgba(1, 5, 53, .22);
}

.af-step-num::before { content: counter(af-step); }

.af-step h3 { font-size: 1.125rem; margin-bottom: .5rem; }
.af-step p { font-size: .9375rem; }

/* ------------------------------------------------------------- incluido --- */

.af-incluido { background: #fff; }

.af-compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.af-compare-card {
    border: 1px solid var(--af-divider);
    border-radius: var(--af-radius);
    padding: 1.75rem 1.6rem;
    background: var(--af-bg);
}

.af-compare-card.is-paid {
    background: linear-gradient(165deg, var(--af-night) 0%, var(--af-night-2) 100%);
    border-color: transparent;
    color: rgba(255, 255, 255, .85);
    position: relative;
    overflow: hidden;
}

.af-compare-card.is-paid h3 { color: #fff; }
.af-compare-card.is-paid .af-compare-list li { color: rgba(255, 255, 255, .88); }
.af-compare-card.is-paid .af-compare-list i { color: var(--af-gold-bright); }

.af-compare-card h3 { font-size: 1.25rem; margin-bottom: .35rem; }
.af-home .af-compare-kicker { font-size: .875rem; margin-bottom: 1.4rem; }

.af-compare-list { list-style: none; padding: 0; margin: 0; }
.af-compare-list li {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    font-size: .9375rem;
    color: var(--af-heading);
    margin-bottom: .7rem;
    line-height: 1.5;
}
.af-compare-list i { color: #16a34a; margin-top: .25rem; font-size: .875rem; }
.af-compare-list .af-x { color: #9ca3af; }

/* A nota dos mapas que são grátis por inteiro. Fica FORA dos dois cartões de
   propósito: eles comparam amostra com versão paga, e a Energia do Dia e o
   Tarot do Dia não são nem uma coisa nem outra - dão tudo. Metê-los num dos
   cartões prometia-lhes menos do que eles dão.

   O dourado escuro e não o claro: isto assenta em fundo branco, e o
   --af-gold-bright só passa contraste sobre o azul-noite. */
/* ⚠️ PREFIXADO COM `.af-home`, e não é estilo: é obrigatório.
   A nota é um `<p>`, e a regra base `.af-home p { margin: 0 }` tem
   especificidade (0,1,1) - uma classe MAIS um elemento. Uma regra só com
   `.af-compare-nota` vale (0,1,0) e PERDE, por isso a margem ia a zero e,
   sem o `auto`, a nota deixava de centrar. Os dois defeitos ao mesmo tempo,
   e a mesma armadilha que já está documentada na linha do `.af-hero-sub`.
   Com o prefixo isto vale (0,2,0) e ganha. */
.af-home .af-compare-nota {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .7rem;
    /* 3.5rem em cima para descolar dos dois cartões: a nota é outro assunto,
       fala dos mapas que não entram na comparação, e colada lia-se como o
       rodapé do cartão pago. */
    margin: 3.5rem auto 0;
    max-width: 46rem;
    padding: 1rem 1.5rem;
    border: 1px solid var(--af-divider);
    border-radius: var(--af-radius);
    background: var(--af-bg);
    font-size: .9375rem;
    line-height: 1.5;
    color: var(--af-heading);
}

.af-home .af-compare-nota i {
    color: var(--af-gold-deep);
    font-size: .95rem;
    flex-shrink: 0;
}

.af-home .af-compare-nota strong { color: var(--af-heading); }

/* No telemóvel o ícone passa para cima do texto: lado a lado sobra pouca
   largura para a frase, e ela parte-se em quatro linhas. */
@media (max-width: 480px) {
    .af-home .af-compare-nota {
        flex-direction: column;
        gap: .5rem;
    }
}

/* --------------------------------------------------------- depoimentos --- */

.af-depoimentos { background: var(--af-bg); }

.af-quote {
    background: #fff;
    border: 1px solid var(--af-divider);
    border-radius: var(--af-radius);
    padding: 1.75rem 1.6rem;
    box-shadow: var(--af-shadow);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.af-quote-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; }
.af-quote-stars { color: var(--af-gold); font-size: .8125rem; margin-bottom: .85rem; letter-spacing: .1em; }
.af-quote p { font-size: .9375rem; margin-bottom: 1.15rem; }
.af-quote-name { margin-top: auto; font-family: var(--af-font-title); font-weight: 600; color: var(--af-heading); font-size: .9375rem; }
.af-quote-role { font-size: .8125rem; color: var(--af-text); }

/* ------------------------------------------------------------------ faq --- */

.af-faq { background: #fff; }
.af-faq-list { max-width: 780px; margin: 0 auto; }

.af-faq-item {
    border: 1px solid var(--af-divider);
    border-radius: var(--af-radius-sm);
    margin-bottom: .75rem;
    background: var(--af-bg);
    overflow: hidden;
}

/* <details>/<summary> nativo: abre e fecha sem uma linha de JavaScript */
.af-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    padding: 1.1rem 1.25rem;
    font-family: var(--af-font-title);
    font-size: 1rem;
    font-weight: 500;
    color: var(--af-heading);
    cursor: pointer;
    list-style: none;
}

.af-faq-q::-webkit-details-marker { display: none; }
.af-faq-q::marker { content: ""; }

.af-faq-q:focus-visible { outline: 3px solid var(--af-blue); outline-offset: -3px; }
.af-faq-q i { color: var(--af-blue); transition: transform .2s ease; flex-shrink: 0; }
.af-faq-item[open] .af-faq-q i { transform: rotate(180deg); }
.af-faq-item[open] { background: #fff; border-color: var(--af-blue); }

.af-faq-a { padding: 0 1.25rem 1.25rem; font-size: .9375rem; }

/* ------------------------------------------------------------ cta final --- */

.af-cta {
    position: relative;
    background:
        radial-gradient(700px 320px at 50% 0%, rgba(25, 86, 193, .5), transparent 70%),
        linear-gradient(160deg, var(--af-night) 0%, var(--af-night-2) 100%);
    padding: 4.5rem 0;
    text-align: center;
    overflow: hidden;
}

.af-cta h2 { color: #fff; font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 1rem; }
.af-cta p { color: rgba(255, 255, 255, .8); max-width: 540px; margin: 0 auto 2rem; }

.af-cta-links {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    justify-content: center;
    margin-top: 2rem;
}

.af-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .9);
    font-size: .875rem;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease;
}

.af-chip:hover {
    background: rgba(222, 196, 96, .16);
    border-color: rgba(222, 196, 96, .5);
    color: #fff;
    text-decoration: none;
}

/* ---------------------------------------------------- ajustes ao wrapper --- */

/* o menu do tema e um cartao branco flutuante; encosta-se ao hero */
body.index .navbar-main { margin-bottom: 1rem !important; }

/*
 * O roxo #8351F0 do tema antigo vem do CSS personalizado das definicoes e
 * vale para o site inteiro. Aqui so se reveste o que aparece NESTA pagina -
 * o menu do topo - com o azul da marca. Como esta folha so e carregada pela
 * home, nenhuma outra pagina e afetada. Trocar o roxo em todo o lado e uma
 * decisao a tomar nas definicoes, nao aqui.
 */
body.index .navbar-main .btn-outline-primary {
    color: var(--af-blue);
    border-color: var(--af-blue);
}

body.index .navbar-main .btn-outline-primary:hover,
body.index .navbar-main .btn-outline-primary:focus {
    background-color: var(--af-blue);
    border-color: var(--af-blue);
    color: #fff;
}

body.index .navbar-main .btn-primary {
    background: linear-gradient(135deg, var(--af-blue), #0f3f95);
    border-color: transparent;
    color: #fff;
}

body.index .navbar-main .btn-primary:hover,
body.index .navbar-main .btn-primary:focus {
    background: linear-gradient(135deg, #0f3f95, var(--af-night-2));
    border-color: transparent;
    color: #fff;
}

body.index .navbar-main .nav-link { color: var(--af-heading); }
body.index .navbar-main .nav-link:hover { color: var(--af-blue); }
body.index .navbar-main .navbar-logo { max-height: 40px; }

/* o menu dos mapas herda a tipografia da marca */
body.index .dropdown-menu { font-family: var(--af-font); border-radius: var(--af-radius-sm); }
body.index .dropdown-header {
    font-family: var(--af-font-title);
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--af-blue);
}

@media (max-width: 575px) {
    .af-section { padding: 3.25rem 0; }
    /*
     * O topo TEM de contar com a barra de menus, que flutua sobre o herói.
     * Esta regra dizia só `3rem`, herdado de quando a barra ainda ocupava
     * espaço no fluxo: como a barra sozinha mede 5,75rem, o título ficava por
     * baixo dela. Quem mexer aqui não pode escrever um valor solto no topo.
     */
    .af-hero { padding: calc(var(--af-nav-espaco) + 3.5rem) 0 4rem; }
    .af-hero-stats { gap: 1.75rem; }
    .af-hero-actions .af-btn { width: 100%; }
}

/* Quem pediu menos movimento nao leva nenhum */
@media (prefers-reduced-motion: reduce) {
    .af-home *,
    .af-home *::before,
    .af-home *::after {
        animation: none !important;
        transition: none !important;
    }
    .af-card:hover { transform: none; }
    .af-btn:hover { transform: none; }
}

/* --------------------------------------------- os outros mapas, no herói ---
   Substituem o "Quer outro mapa?", que se lia como "gerar outra matriz para
   outra pessoa" em vez de "temos mapas diferentes". A frase corrida que os
   nomeava ficou grande demais debaixo do formulário; em pílulas ocupam menos
   e cada uma leva direto ao seu mapa.

   Reaproveitam o `.af-chip` do "Seu mapa está a um clique" e só encolhem: aqui
   não podem competir com o botão dourado que está logo acima. */
.af-hf-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    margin-top: .7rem;
}

.af-chip-sm {
    padding: .32rem .7rem;
    font-size: .78rem;
    gap: .35rem;
}

/* o "+N mapas" é o único que não nomeia um mapa: fica mais discreto, para se
   ler como "e há mais" e não como mais um produto */
.af-chip-mais {
    background: transparent;
    border-style: dashed;
    color: var(--af-gold-bright);
}


/* ═══════════════════════════════════════════════════════════════════════════
   📚 A CAPA DO LIVRO na vitrine "Escolha seu mapa e comece agora"
   ═══════════════════════════════════════════════════════════════════════════
   O desenho vem inteiro de `marca/grimorio.css` - as três faces, a moldura, o
   couro. Aqui só se muda a escala e o que a escala obriga a mudar com ela.

   ⚠️ O `.gr-palco` traz do outro ficheiro um fundo cinzento e um padding
   pensados para a estante de "Meus Mapas", onde o livro é o cartão inteiro.
   Aqui ele divide o cartão com a lista de benefícios e o preço, e o fundo tem
   de desaparecer.
   ══════════════════════════════════════════════════════════════════════════ */
.af-card-livro{
    --gr-l: 108px;
    --gr-a: 143px;
    --gr-e: 23px;
    /*
     * ✅ DECIDIDO a 2026-09-02, depois de ver os dois lado a lado: *"o fundo dos
     * livros na home estao otimos com fundo transparentes e ficam."*
     *
     * O `.gr-palco` traz de `marca/grimorio.css` um fundo cinzento claro, que na
     * estante de "Meus Mapas" funciona como montra. Aqui não: o livro divide o
     * cartão com a lista de benefícios e o preço, e o cartão já é branco - um
     * segundo fundo lá dentro faria duas caixas em vez de uma.
     */
    background: transparent;
    padding: 1.5rem 0 1.7rem;
    /* ⚠️ E o título precisa de respirar depois dele. Sem esta margem o nome do
       produto encosta à borda do fundo claro - ele apanhou-o a 2026-09-02:
       *"na home esta muito colado"*. */
    margin-bottom: 1.15rem;
}

/* O emblema e o título não escalam sozinhos com as variáveis: são `px` e
   `rem`. Sem isto, o mesmo emblema de 62px ocupava metade de uma capa que
   agora tem 108. */
.af-card-livro .gr-emblema{ width: 42px; height: 42px; margin-bottom: .45rem }
.af-card-livro .gr-titulo{ font-size: .66rem; line-height: 1.2 }
.af-card-livro .gr-filete{ width: 28px; margin-top: .35rem }
.af-card-livro .gr-moldura{ inset: 6px 6px 6px 8px }
.af-card-livro .gr-capa{ padding: .8rem .5rem .7rem }

/* A sombra acompanha a largura do livro, senão fica um halo à volta de nada. */
.af-card-livro .gr-sombra{ width: 124px; height: 12px; bottom: .8rem }

/* O livro roda ao passar o rato no CARTÃO, não no livro: o cartão é o que a
   pessoa está a olhar, e o livro é pequeno demais para ser um alvo. */
.af-card:hover .af-card-livro .gr-livro{ transform: rotateX(-9deg) rotateY(12deg) }