/*
 * 📚 O GRIMÓRIO — a capa de livro em 3D de cada mapa
 * ════════════════════════════════════════════════════════════════════════════
 *
 * 🔴 ISTO NÃO SE REDESENHA. Vem de `docs/prototipos/meus-mapas-grimorios.html`
 * (28/08), onde ele comparou quatro variantes lado a lado e escolheu a B: o
 * grimório em 3D com o emblema A CORES. Antes de mexer aqui, abre-se o
 * protótipo.
 *
 * Vive num ficheiro próprio desde 2026-09-02, quando ele pediu os livros também
 * na home: *"agora quero colocar a imagem de cada livro na home em Escolha seu
 * mapa e comece agora"*. Estava dentro do `<style>` de "Meus Mapas", e a
 * alternativa era copiá-lo - que é como duas cópias começam a divergir.
 *
 * O livro tem TRÊS faces, e é isso que o faz parecer um objeto e não um cartão
 * inclinado: a capa, a lombada, e o topo com o corte das folhas.
 *
 * ⚠️ DUAS PROPRIEDADES QUE FALHAM EM SILÊNCIO:
 *   1. `perspective` vive no `.gr-palco`, não no livro. Sem ela no pai, as
 *      rotações dos filhos não produzem volume nenhum
 *   2. `transform-style: preserve-3d` no `.gr-livro`. Sem isto as três faces
 *      achatam-se num plano - sem erro e sem aviso
 *
 * ── O TAMANHO ───────────────────────────────────────────────────────────────
 * `--gr-l` (largura) e `--gr-a` (altura) são o mesmo livro em escalas
 * diferentes: 158x210 na estante de "Meus Mapas", mais pequeno na vitrine da
 * home, onde divide o cartão com a lista de benefícios e o preço.
 *
 * ⚠️ A ESPESSURA ACOMPANHA: o `translateZ` da capa e o `translateX` da lombada
 * são metade da espessura (`--gr-e`). Mudar a largura sem mexer nestes abre uma
 * fenda entre a capa e a lombada.
 *
 * ── A COR ───────────────────────────────────────────────────────────────────
 * `--capa` (o gradiente) e `--capa-solida` (o canto da lombada visto de cima)
 * vão inline em cada `.gr-livro`, e o valor sai do registo `Produtos::TIPOS`.
 * Nunca de uma segunda lista escrita à mão.
 */

:root{
    --gr-l: 158px;   /* largura da capa */
    --gr-a: 210px;   /* altura */
    --gr-e: 34px;    /* espessura do livro (a largura da lombada) */
}

/* ═══════════════════════════════════════════════════════════════════════
   📚 A ESTANTE — variante B do protótipo, o grimório em 3D
   ═══════════════════════════════════════════════════════════════════════
   Ordem dele a 2026-09-02: *"quero mudar apenas a vitrine, os formato dos
   mapas livros em vez de blocos"*. E, quando lhe mostrei um desenho meu:
   *"o modelo do livro 3D nao era este. tinhamos feito outro modelo que eu
   ja havia escolhido."*

   🔴 ISTO NAO SE REDESENHA. Vem de `docs/prototipos/meus-mapas-grimorios.html`
   (28/08), onde ele comparou quatro variantes lado a lado e escolheu a B: o
   grimorio em 3D com o emblema A CORES. Antes de mexer aqui, abre-se o
   prototipo.

   O livro tem TRES faces, e e isso que o faz parecer um objecto e nao um
   cartao inclinado: a capa, a lombada, e o topo com o corte das folhas.

   ⚠️ `perspective` vive no `.gr-palco` e `transform-style: preserve-3d` no
   `.gr-livro`. Sem qualquer um deles as tres faces achatam-se num plano -
   sem erro e sem aviso.
   ══════════════════════════════════════════════════════════════════════ */
/*
 * 🔴 O MINIMO DE 285px NAO E ARBITRARIO, e nao se troca por colunas do
 * Bootstrap.
 *
 * O livro tem 158px de largura e roda 24 graus: a projecao ocupa mais do
 * que isso, e o selo do estado vive no canto do palco. Com uma coluna mais
 * estreita, o selo cai POR CIMA do livro - foi o que ele viu no Mac de 15
 * polegadas a 2026-09-02, depois de eu ter trocado a grelha do prototipo
 * por `col-lg-4`.
 *
 * O `auto-fill` trata do resto: quantas couberem, e nunca mais estreitas
 * do que o desenho aguenta.
 */
.gr-grelha{display:grid;gap:1.5rem;
    /* O `min(285px,100%)` em vez de `285px` seco: num telemovel estreito um
       minimo fixo maior do que o ecra faz a grelha transbordar para fora e
       aparece scroll horizontal em toda a pagina. */
    grid-template-columns:repeat(auto-fill,minmax(min(285px,100%),1fr))}

.gr-card{background:#fff;border-radius:.65rem;box-shadow:0 1px 3px rgba(17,24,39,.08);
    overflow:hidden;height:100%;display:flex;flex-direction:column;
    transition:box-shadow .2s ease,transform .2s ease}
.gr-card:hover{box-shadow:0 14px 32px rgba(17,24,39,.18);transform:translateY(-3px)}

.gr-palco{position:relative;padding:2.1rem 1.25rem 1.6rem;display:flex;justify-content:center;
    background:linear-gradient(180deg,#fbfbfc,#eeeef3);
    perspective:1500px;perspective-origin:50% 14%}
.gr-sombra{position:absolute;bottom:1.1rem;left:50%;width:182px;height:17px;
    transform:translateX(-52%);border-radius:50%;
    background:radial-gradient(ellipse at center, rgba(17,24,39,.34), rgba(17,24,39,0) 70%);
    filter:blur(3px)}

.gr-livro{position:relative;width:var(--gr-l);height:var(--gr-a);transform-style:preserve-3d;
    transform:rotateX(-13deg) rotateY(24deg);transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.gr-card:hover .gr-livro{transform:rotateX(-9deg) rotateY(12deg)}

.gr-capa{position:absolute;inset:0;transform:translateZ(calc(var(--gr-e) / 2));
    border-radius:2px 6px 6px 2px;background:var(--capa);overflow:hidden;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:1.3rem .8rem 1rem;
    box-shadow:inset -14px 0 22px -14px rgba(0,0,0,.5), inset 3px 0 8px -3px rgba(255,255,255,.25)}
/* as estrelas do couro */
.gr-capa::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
    background-image:
      radial-gradient(1.2px 1.2px at 20px 26px, rgba(255,255,255,.9), transparent),
      radial-gradient(1px 1px at 64px 72px, rgba(255,255,255,.6), transparent),
      radial-gradient(1.3px 1.3px at 104px 38px, rgba(255,255,255,.5), transparent),
      radial-gradient(1px 1px at 40px 132px, rgba(255,255,255,.55), transparent);
    background-size:130px 160px}
/* o brilho que atravessa a capa */
.gr-capa::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(112deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.05) 26%,
               rgba(255,255,255,0) 46%, rgba(0,0,0,.12) 100%)}

.gr-moldura{position:absolute;inset:9px 9px 9px 12px;border:1px solid rgba(240,217,122,.5);
    border-radius:2px;pointer-events:none;z-index:1}
.gr-emblema{width:62px;height:62px;position:relative;z-index:2;margin-bottom:.6rem;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.55))}
.gr-titulo{position:relative;z-index:2;font-family:Georgia,"Times New Roman",serif;
    font-size:.88rem;font-weight:700;line-height:1.25;text-align:center;color:#fff;
    text-shadow:0 1px 5px rgba(0,0,0,.65);padding:0 .15rem}
.gr-filete{position:relative;z-index:2;width:38px;height:1px;margin-top:.5rem;
    background:linear-gradient(90deg, transparent, rgba(240,217,122,.85), transparent)}

.gr-lombada{position:absolute;left:0;top:0;width:var(--gr-e);height:var(--gr-a);
    transform:translateX(calc(var(--gr-e) / -2)) rotateY(-90deg);
    background:var(--capa);border-radius:2px 0 0 2px;overflow:hidden}
.gr-lombada::before{content:"";position:absolute;inset:0;
    background:linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.12) 45%, rgba(0,0,0,.42))}
.gr-lombada::after{content:"";position:absolute;left:5px;right:5px;top:14px;bottom:14px;
    border-top:1px solid rgba(240,217,122,.55);border-bottom:1px solid rgba(240,217,122,.55)}

.gr-topo{position:absolute;left:0;top:0;width:var(--gr-l);height:var(--gr-e);
    transform:translateY(calc(var(--gr-e) / -2)) rotateX(90deg);border-radius:1px;
    box-shadow:inset 0 0 10px rgba(0,0,0,.18);
    background:
      /* a lombada assoma a esquerda, e o corte e dourado do lado de fora */
      linear-gradient(90deg,
        var(--capa-solida) 0 7px,
        rgba(0,0,0,.3) 7px 8px,
        transparent 8px calc(100% - 3px),
        rgba(212,175,55,.9) calc(100% - 3px)),
      /* as folhas: cada linha corre ao longo da largura, e elas
         empilham-se ao longo da espessura */
      repeating-linear-gradient(0deg,
        #f7f3e8 0 1.6px, #cfc7b4 1.6px 3.2px)}

.gr-selo{position:absolute;top:.7rem;right:.7rem;z-index:5;font-size:.63rem;font-weight:700;
    letter-spacing:.03em;text-transform:uppercase;padding:.22rem .5rem;border-radius:.35rem;
    box-shadow:0 1px 3px rgba(17,24,39,.25)}
.gr-selo-sample{color:#7c2d12;background:#fed7aa}
.gr-selo-paid{color:#14532d;background:#bbf7d0}

.gr-acoes{display:flex;gap:.4rem;margin-top:.8rem}
.gr-bt{flex:1;display:block;padding:.52rem .25rem;border-radius:.42rem;font-size:.74rem;
    font-weight:600;text-decoration:none;text-align:center;border:1px solid #e2e2e8;
    color:#4b5563;background:#fff;position:relative;z-index:2;white-space:nowrap;
    transition:border-color .15s ease,background .15s ease,color .15s ease}
.gr-bt:hover{border-color:#c9c9d4;color:#1f2937;background:#fafafb}
/*
 * DUAS CORES, e dizem a mesma coisa que o selo la em cima: dourado enquanto
 * e amostra, verde quando o mapa e do cliente. Ordem dele a 2026-09-02:
 * *"quando for Ver Mapa coloque em verde para diferenciar"*.
 *
 * ⚠️ As cores foram MEDIDAS, nao escolhidas a olho. O texto assenta sobre o
 * proprio fundo do botao (branco com 7-8% da cor), e e ai que o contraste
 * se mede - nao sobre branco puro:
 *
 *   #8a6b1c sobre #fcf9f1 (dourado) ... 4,75:1
 *   #166534 sobre #ecf8f1 (verde) ..... 6,54:1
 *
 * O minimo da WCAG para texto normal e 4,5:1. Um verde mais claro - o
 * #15803d, por exemplo - dava 4,60:1: passa, mas sem folga nenhuma para
 * quem mexer no fundo a seguir.
 */
.gr-bt-ouro{border-color:rgba(168,132,44,.45);color:#8a6b1c;background:rgba(212,175,55,.07)}
.gr-bt-ouro:hover{background:rgba(212,175,55,.16);color:#6d5310;border-color:rgba(168,132,44,.7)}
.gr-bt-verde{border-color:rgba(22,163,74,.45);color:#166534;background:rgba(22,163,74,.08)}
.gr-bt-verde:hover{background:rgba(22,163,74,.17);color:#14532d;border-color:rgba(22,163,74,.72)}

/* ⚠️ O padding de cima nao e enfeite: o `.gr-palco` acaba num fundo cinzento, e
   com os .2rem do prototipo o nome do cliente ficava colado a essa borda. Ele
   apanhou-o a 2026-09-02: *"desça um pouco o texto, esta muito colado ao quadro
   cinza"*. */
.gr-dados{padding:1.05rem 1.1rem 1.15rem;text-align:center}
.gr-nome{display:block;font-size:1.02rem;font-weight:700;color:#1f2937;text-decoration:none;line-height:1.3}
.gr-card:hover .gr-nome{color:#111827}
.gr-data{color:#9ca3af;font-size:.85rem;margin-top:.15rem}
.gr-foot{margin-top:.7rem;padding-top:.6rem;border-top:1px solid #f1f1f4}
.gr-palco-link{position:absolute;inset:0;z-index:4}