/* =========================================================================
   GUIA MODERNO DO TAROT — landing page

   Mesmo sistema visual do PDF (src/estilo.ts): grimório-zine, papel
   milimetrado, colagem recortada com fita, vermelho de serigrafia, dourado
   manuscrito. As fontes e as texturas são os MESMOS arquivos do livro.

   A REGRA QUE SUSTENTA OS DOIS TEMAS, igual à do PDF: toda cor mora nos dois
   blocos de tokens abaixo. Se você escrever um #… ou rgba(…) fora deles, a
   cor vaza de um tema pro outro. A única exceção proposital é o creme do
   .recorte — é a cor do papel da carta, não do tema.

   O alternador claro/escuro não é enfeite: o produto é vendido nos dois
   temas, então a página deixa a pessoa experimentar os dois antes de escolher.
   ========================================================================= */

/* ------------------------------------------------------------------ fontes */

@font-face { font-family:'Cartaz'; src:url('/assets/fontes/Anton-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap }
@font-face { font-family:'Punho'; src:url('/assets/fontes/Caveat-Variable.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap }
@font-face { font-family:'Sora'; src:url('/assets/fontes/Sora-Variable.woff2') format('woff2');
  font-weight:100 800; font-style:normal; font-display:swap }
@font-face { font-family:'Cormorant'; src:url('/assets/fontes/CormorantGaramond-Variable.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap }
@font-face { font-family:'Cormorant'; src:url('/assets/fontes/CormorantGaramond-Italic-Variable.woff2') format('woff2');
  font-weight:300 700; font-style:italic; font-display:swap }

/* ------------------------------------------------------------------ tokens */

:root,
[data-tema="dark"] {
  --papel:#0a0a0b;
  --tinta:#f4f3f0;
  --corpo:#9d9a94;
  --fraco:#6d6a66;
  --ouro:#d7b247;
  --ouro-forte:#f0d78a;
  --vermelho:#d5291d;
  --vermelho-texto:#ee5a4a;
  --linha:rgba(255,255,255,.12);
  --linha-forte:rgba(255,255,255,.24);
  --chip-fundo:#f4f3f0;
  --chip-tinta:#0a0a0b;
  --fita:rgba(228,222,200,.16);
  --sombra-papel:2px 3px 0 rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4);
  --sombra-alta:6px 8px 0 rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.4);
  /* DUAS CAMADAS, e não uma como no PDF. O herói é largo e tem carta bem atrás
     do título, onde a página A4 retrato tinha papel vazio — o véu radial único
     do livro não dava conta. A primeira camada abre uma clareira de papel sob
     o texto; a segunda faz o escurecimento geral e deixa as cartas aparecerem
     nas beiradas. */
  --veu-capa:
    radial-gradient(44% 38% at 50% 45%, rgba(10,10,11,.88), rgba(10,10,11,0) 72%),
    radial-gradient(68% 56% at 50% 46%, rgba(10,10,11,.42), rgba(10,10,11,.92) 80%);
  --contorno-display:4px 4px 0 rgba(0,0,0,.7), 0 0 60px rgba(0,0,0,.85);
  --textura:url('/assets/textura-dark.jpg');

  /* tokens que só a web precisa: superfícies e estados */
  --superficie:rgba(255,255,255,.028);
  --superficie-alta:rgba(255,255,255,.055);
  --vidro:rgba(10,10,11,.82);
  --botao-tinta:#f4f3f0;
  --foco:#d7b247;
}

[data-tema="light"] {
  --papel:#f7f2e7;
  --tinta:#16130f;
  --corpo:#4b453c;
  --fraco:#8a8074;
  --ouro:#96711a;
  --ouro-forte:#6b4f0e;
  --vermelho:#c8241a;
  --vermelho-texto:#9c1a11;
  --linha:rgba(30,24,16,.20);
  --linha-forte:rgba(30,24,16,.34);
  --chip-fundo:#16130f;
  --chip-tinta:#f7f2e7;
  --fita:rgba(150,125,60,.20);
  --sombra-papel:2px 3px 0 rgba(40,30,14,.22), 0 0 0 1px rgba(40,30,14,.28);
  --sombra-alta:6px 8px 0 rgba(40,30,14,.18), 0 0 0 1px rgba(40,30,14,.26);
  /* No claro a clareira precisa ser quase opaca: tinta escura sobre arte clara
     tem muito menos contraste do que tinta clara sobre arte escurecida. */
  --veu-capa:
    radial-gradient(46% 40% at 50% 45%, rgba(247,242,231,.97), rgba(247,242,231,0) 72%),
    radial-gradient(68% 56% at 50% 46%, rgba(247,242,231,.52), rgba(247,242,231,.94) 80%);
  --contorno-display:3px 3px 0 rgba(40,30,14,.22);
  --textura:url('/assets/textura-light.jpg');

  --superficie:rgba(30,24,16,.035);
  --superficie-alta:rgba(30,24,16,.07);
  --vidro:rgba(247,242,231,.86);
  --botao-tinta:#f7f2e7;
  --foco:#96711a;
}

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

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }

html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body {
  background:var(--papel);
  color:var(--tinta);
  font-family:'Sora', system-ui, sans-serif;
  font-weight:300;
  font-size:clamp(.95rem, .9rem + .25vw, 1.05rem);
  line-height:1.7;
  overflow-x:hidden;
  transition:background-color .35s ease, color .35s ease;
}

/* O papel de fundo é uma camada fixa em vez de background-attachment:fixed —
   o mesmo resultado sem o custo de repintura em scroll no celular. */
.papel {
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--papel) var(--textura) center/cover no-repeat;
  transition:opacity .35s ease;
}

img { max-width:100%; display:block }
a { color:inherit; text-decoration:none }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer }

:focus-visible { outline:2px solid var(--foco); outline-offset:3px }

::selection { background:var(--vermelho); color:var(--chip-fundo) }

.envolve { width:min(1140px, 92vw); margin-inline:auto }
.estreito { width:min(760px, 92vw); margin-inline:auto }

section { padding:clamp(4rem, 9vw, 7.5rem) 0; position:relative }

.pular {
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--chip-fundo); color:var(--chip-tinta); padding:.75rem 1.25rem;
}
.pular:focus { left:1rem; top:1rem }

/* Texto só para leitor de tela. */
.sr {
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
}

/* ------------------------------------------------------------------ peças */

/* Recorte de papel colado. Fundo creme nos DOIS temas: é a cor da carta,
   não do tema — mesma exceção que existe no PDF.

   A margem branca é uma medida explícita (--borda), e NÃO uma porcentagem:
   padding em % resolve contra a largura do elemento PAI, não do próprio
   elemento. Dentro de um flex como o leque do fechamento, 4,5% do container
   inteiro comia a carta toda e sobrava uma tarja de 2 px. Quem usa o recorte
   em tamanho diferente do padrão redefine --borda. */
.recorte {
  --borda:6px;
  position:relative; display:block;
  padding:var(--borda) var(--borda) calc(var(--borda) * 1.3);
  background:#efeadd; box-shadow:var(--sombra-papel);
}
.recorte img { width:100%; height:auto }
.recorte.alto { box-shadow:var(--sombra-alta) }

.fita {
  position:absolute; z-index:5; height:1.6rem; background:var(--fita);
  border-left:1px solid var(--linha); border-right:1px solid var(--linha);
  box-shadow:0 1px 4px rgba(0,0,0,.25);
  backdrop-filter:blur(1px);
}

.aba {
  display:inline-flex; align-items:center; gap:.6rem;
  border:1px solid var(--ouro); padding:.42rem 1rem;
  font-size:.66rem; font-weight:600; letter-spacing:.22em; text-indent:.22em;
  text-transform:uppercase; color:var(--ouro-forte);
}

.chip {
  display:inline-block; background:var(--chip-fundo); color:var(--chip-tinta);
  font-size:.72rem; font-weight:700; letter-spacing:.05em; padding:.35rem .8rem;
}

.rotulo {
  display:block; font-size:.66rem; font-weight:600; letter-spacing:.24em;
  text-indent:.24em; text-transform:uppercase; color:var(--fraco);
}

.punho {
  font-family:'Punho', cursive; font-weight:600; color:var(--ouro);
  font-size:1.5rem; line-height:1.3;
}

.cartaz {
  font-family:'Cartaz', 'Arial Black', sans-serif; font-weight:400;
  text-transform:lowercase; letter-spacing:-.02em; line-height:.86;
}

.divisor { height:1px; background:var(--linha); border:0 }

/* Título de seção: rótulo pequeno + cartaz grande, igual às aberturas do PDF */
.titulo { margin-bottom:clamp(2rem, 4vw, 3.25rem) }
.titulo .rotulo { margin-bottom:.9rem }
/* ENTRELINHA DO CARTAZ. No PDF os títulos em Anton usam .82 porque lá cabem
   sempre numa linha. Aqui quebram, sobretudo no celular, e aí vale a métrica
   da fonte: Anton tem ascendente 1,176em e descendente 0,329em (upem 2048),
   ou seja, caixa natural de 1,5em. Abaixo de ~1,1 a cauda do "q" de "quem"
   entra na linha de baixo. 1,12 é o menor valor que ainda não encosta —
   continua apertado, porque a letra já ocupa quase todo o em. */
.titulo h2 {
  font-family:'Cartaz', sans-serif; font-weight:400; text-transform:lowercase;
  letter-spacing:-.025em; line-height:1.12; color:var(--tinta);
  font-size:clamp(2.1rem, 5.6vw, 3.7rem);
}
.titulo h2 em { font-style:normal; color:var(--vermelho) }
.titulo p {
  margin-top:1.1rem; max-width:62ch; color:var(--corpo);
  font-size:clamp(.95rem, .9rem + .2vw, 1.08rem);
}
.titulo.centro { text-align:center }
.titulo.centro p { margin-inline:auto }

/* ---------------------------------------------------------------- botões */

.botao {
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  padding:1.05rem 2.1rem; font-size:.82rem; font-weight:700;
  letter-spacing:.14em; text-indent:.14em; text-transform:uppercase;
  border:1px solid transparent; text-align:center;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.botao--principal {
  background:var(--vermelho); color:var(--botao-tinta);
  box-shadow:var(--sombra-papel);
}
.botao--principal:hover { transform:translate(-2px,-2px); box-shadow:var(--sombra-alta) }
.botao--principal:active { transform:translate(1px,1px); box-shadow:none }
.botao--vazado {
  border-color:var(--ouro); color:var(--ouro-forte); background:transparent;
}
.botao--vazado:hover { background:var(--superficie-alta) }
.botao--largo { width:100% }

/* Checkout ainda não configurado em /config.js. Precisa parecer indisponível
   à primeira vista, não só recusar o clique: opacidade não basta sozinha, daí
   também o cursor e o traço riscado no rótulo. */
.botao--desativado,
.botao--desativado:hover {
  opacity:.45; cursor:not-allowed; transform:none; box-shadow:none;
  background:var(--superficie-alta); color:var(--fraco);
  border-color:var(--linha); text-decoration:line-through;
}
.botao--desativado::after {
  content:'em breve'; text-decoration:none; font-size:.7em; letter-spacing:.1em;
  opacity:.8;
}

/* ------------------------------------------------------- barra e cabeçalho */

.faixa-topo {
  background:var(--vermelho); color:var(--botao-tinta);
  font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  text-align:center; padding:.6rem 1rem; position:relative; z-index:40;
}
.faixa-topo b { font-weight:700 }
.faixa-topo .relogio { font-variant-numeric:tabular-nums }

.topo {
  position:sticky; top:0; z-index:30;
  background:var(--vidro); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--linha);
}
.topo .envolve {
  display:flex; align-items:center; gap:1.5rem; height:4.3rem;
}
.marca { display:flex; align-items:baseline; gap:.7rem; margin-right:auto }
.marca .sigla {
  font-family:'Cartaz', sans-serif; font-size:1.35rem; color:var(--vermelho);
  letter-spacing:.02em;
}
.marca .nome {
  font-size:.64rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fraco); line-height:1.3; max-width:9rem;
}
.topo nav { display:flex; gap:1.6rem }
.topo nav a {
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--corpo); padding:.3rem 0; border-bottom:1px solid transparent;
}
.topo nav a:hover { color:var(--tinta); border-bottom-color:var(--ouro) }
.topo .botao { padding:.7rem 1.3rem; font-size:.68rem }

/* alternador de tema — dois quadradinhos, escuro e claro */
.tema {
  display:inline-flex; border:1px solid var(--linha-forte); padding:2px; gap:2px;
}
.tema button {
  width:2rem; height:1.7rem; display:grid; place-items:center;
  color:var(--fraco); transition:background-color .2s ease, color .2s ease;
}
.tema button[aria-pressed="true"] { background:var(--superficie-alta); color:var(--ouro) }
.tema svg { width:.95rem; height:.95rem }

/* ------------------------------------------------------------------- capa */

.capa {
  position:relative; overflow:hidden; padding:0;
  min-height:min(92vh, 900px); display:grid; place-items:center;
}
.capa .colagem { position:absolute; inset:-6% -4%; z-index:1 }
.capa .colagem img {
  position:absolute; box-shadow:var(--sombra-papel); width:var(--w);
  left:var(--x); top:var(--y); transform:rotate(var(--r));
}
.capa .veu { position:absolute; inset:0; z-index:2; background:var(--veu-capa) }
.capa .miolo {
  position:relative; z-index:4; text-align:center;
  padding:clamp(4rem, 10vw, 7rem) 1rem;
}
.capa .chapeu {
  font-family:'Punho', cursive; font-weight:700; text-transform:uppercase;
  font-size:clamp(1.6rem, 5vw, 2.6rem); color:var(--tinta); line-height:1.05;
  transform:rotate(-2.2deg); margin-bottom:.6rem;
}
.capa h1 {
  font-family:'Cartaz', sans-serif; font-weight:400; text-transform:lowercase;
  font-size:clamp(4.5rem, 20vw, 12rem); line-height:.78; letter-spacing:-.035em;
  color:var(--vermelho); text-shadow:var(--contorno-display);
}
.capa .sub {
  margin:clamp(1.6rem, 3vw, 2.4rem) auto 0; max-width:34ch;
  font-size:clamp(1rem, .95rem + .35vw, 1.2rem); color:var(--tinta); font-weight:400;
}
.capa .acoes {
  margin-top:2.4rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
}
.capa .selo {
  position:absolute; z-index:5; width:clamp(6.5rem, 12vw, 10rem); aspect-ratio:1;
  top:clamp(1.5rem, 5vw, 4rem); right:clamp(1rem, 6vw, 5rem); transform:rotate(9deg);
  filter:drop-shadow(2px 3px 0 rgba(0,0,0,.4));
}
.selos-confianca {
  position:relative; z-index:4; display:flex; flex-wrap:wrap; justify-content:center;
  gap:.6rem 1.6rem; margin-top:2.6rem; font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--corpo);
}
.selos-confianca li { display:flex; align-items:center; gap:.5rem; list-style:none }
.selos-confianca svg { width:.85rem; height:.85rem; color:var(--ouro); flex:0 0 auto }

/* ---------------------------------------------------------------- números */

.numeros { padding:0; border-block:1px solid var(--linha) }
.numeros ul {
  display:grid; grid-template-columns:repeat(4, 1fr); list-style:none;
}
.numeros li {
  padding:clamp(1.6rem, 3.5vw, 2.6rem) 1rem; text-align:center;
  border-left:1px solid var(--linha);
}
.numeros li:first-child { border-left:0 }
.numeros b {
  display:block; font-family:'Cartaz', sans-serif; font-weight:400;
  font-size:clamp(2.2rem, 6vw, 3.4rem); line-height:.9; color:var(--ouro);
}
.numeros span {
  display:block; margin-top:.6rem; font-size:.66rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fraco);
}

/* ----------------------------------------------------------------- blocos */

/* Cartão-superfície genérico, usado em várias seções. */
.cartao {
  border:1px solid var(--linha); background:var(--superficie);
  padding:clamp(1.5rem, 3vw, 2.2rem);
}
.cartao h3 { font-size:1.02rem; font-weight:600; margin-bottom:.7rem; color:var(--tinta) }
.cartao p { color:var(--corpo); font-size:.93rem }
.cartao .icone { color:var(--ouro); margin-bottom:1rem }
.cartao .icone svg { width:1.6rem; height:1.6rem }

.colunas { display:grid; gap:clamp(1rem, 2.4vw, 1.6rem) }
.colunas--2 { grid-template-columns:repeat(2, 1fr) }
.colunas--3 { grid-template-columns:repeat(3, 1fr) }
.colunas--4 { grid-template-columns:repeat(4, 1fr) }

/* ------------------------------------------------------------- o que é/tem */

.entrega { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem, 5vw, 4.5rem); align-items:center }
.entrega .lista { list-style:none; display:grid; gap:1.4rem }
.entrega .lista li { display:flex; gap:1rem; align-items:flex-start }
.entrega .lista svg { width:1.15rem; height:1.15rem; color:var(--ouro); flex:0 0 auto; margin-top:.32rem }
.entrega .lista b { display:block; font-weight:600; color:var(--tinta); font-size:1rem }
.entrega .lista p { color:var(--corpo); font-size:.92rem }

/* Pilha de quatro arquivos, tortos como recortes empilhados */
.pilha { position:relative; display:grid; gap:.9rem }
.arquivo {
  display:flex; align-items:center; gap:1.1rem; padding:1.1rem 1.3rem;
  border:1px solid var(--linha); background:var(--superficie);
  box-shadow:var(--sombra-papel);
}
.arquivo:nth-child(odd) { transform:rotate(-.5deg) }
.arquivo:nth-child(even) { transform:rotate(.6deg) }
.arquivo .ext {
  font-family:'Cartaz', sans-serif; font-size:.95rem; letter-spacing:.04em;
  color:var(--vermelho); border:1px solid var(--linha-forte); padding:.4rem .55rem;
  text-transform:uppercase;
}
.arquivo b { display:block; font-weight:600; font-size:.95rem; color:var(--tinta) }
.arquivo span { font-size:.78rem; color:var(--fraco); letter-spacing:.04em }

/* ------------------------------------------------------------- por dentro */

.previas {
  display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(1rem, 3vw, 2.2rem);
  align-items:start;
}
.previa { position:relative }
.previa .recorte { --borda:14px; transform:rotate(var(--r, -1.2deg)); transition:transform .3s ease }
.previa:hover .recorte { transform:rotate(0deg) translateY(-6px) }
.previa figcaption { margin-top:1.4rem; text-align:center }
.previa figcaption b {
  display:block; font-size:.9rem; font-weight:600; color:var(--tinta); margin-bottom:.25rem;
}
.previa figcaption span { font-size:.8rem; color:var(--fraco) }

.aviso-tema {
  margin-top:clamp(2.5rem, 5vw, 3.5rem); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
}
.aviso-tema .punho { font-size:1.65rem; max-width:30ch; transform:rotate(-1.2deg) }

/* --------------------------------------------------------------- anatomia */

.anatomia-grade { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem, 4vw, 3rem) }
.pagina-tipo { border:1px solid var(--linha); padding:clamp(1.6rem, 3.4vw, 2.4rem); background:var(--superficie) }
.pagina-tipo > .rotulo { margin-bottom:.7rem }
.pagina-tipo h3 {
  font-family:'Cartaz', sans-serif; font-weight:400; text-transform:lowercase;
  font-size:clamp(1.5rem, 3.2vw, 2.1rem); letter-spacing:-.02em; color:var(--tinta);
  line-height:1.12; margin-bottom:1.6rem;
}
.pagina-tipo ul { list-style:none; display:grid; gap:1.1rem }
.pagina-tipo li { display:flex; gap:.85rem; align-items:flex-start; font-size:.9rem; color:var(--corpo) }
.pagina-tipo li svg { width:1rem; height:1rem; flex:0 0 auto; margin-top:.3rem }
.pagina-tipo li b { color:var(--tinta); font-weight:600 }

/* ---------------------------------------------------------------- amostra */

/* Recriação da ficha da carta — o mesmo arranjo da página 1 do livro. */
.ficha-demo {
  display:grid; grid-template-columns:minmax(0,13rem) 1fr;
  gap:clamp(1.5rem, 4vw, 3rem); align-items:start;
  border:1px solid var(--linha); background:var(--superficie);
  padding:clamp(1.6rem, 4vw, 3rem); position:relative;
}
.ficha-demo > .aba { position:absolute; top:-.85rem; right:clamp(1.5rem, 4vw, 3rem); background:var(--papel) }
.ficha-demo .retrato { transform:rotate(-1.6deg); position:relative }
.ficha-demo .retrato .recorte { --borda:10px }
.ficha-demo .voz { display:flex; gap:.7rem; margin-bottom:1.4rem }
.ficha-demo .voz svg { width:1.1rem; height:1.1rem; color:var(--ouro); flex:0 0 auto; margin-top:.35rem }
.ficha-demo .voz .punho { white-space:pre-line; font-size:1.45rem }
.ficha-demo .chaves {
  margin-top:1rem; font-size:clamp(1.5rem, 4.2vw, 2.3rem); font-weight:600;
  line-height:1.16; letter-spacing:-.015em; color:var(--tinta);
}
.ficha-demo .chaves u {
  text-decoration:none;
  background-image:linear-gradient(var(--ouro), var(--ouro));
  background-size:100% 2px; background-position:0 92%; background-repeat:no-repeat;
}
.ficha-demo .nota {
  display:block; margin-top:1rem; font-family:'Punho', cursive; font-weight:600;
  font-size:1.3rem; color:var(--ouro); transform:rotate(-1.4deg);
}
.ficha-demo .epigrafe {
  font-family:'Cormorant', serif; font-style:italic;
  font-size:clamp(1.05rem, 2.4vw, 1.25rem); line-height:1.45; color:var(--corpo);
  margin-top:1.4rem; border-left:1px solid var(--ouro); padding-left:1rem;
}
.blocos-demo {
  margin-top:clamp(1.8rem, 4vw, 2.6rem); display:grid;
  grid-template-columns:repeat(3, 1fr); gap:1.6rem 2rem;
}
.blocos-demo .cabeca { display:flex; align-items:center; gap:.55rem; margin-bottom:.5rem }
.blocos-demo .cabeca svg { width:.95rem; height:.95rem; flex:0 0 auto }
.blocos-demo h4 { font-size:.95rem; font-weight:600; color:var(--tinta) }
.blocos-demo p { font-size:.85rem; line-height:1.65; color:var(--corpo) }
.blocos-demo .destaque h4 { color:var(--ouro-forte) }

.corte {
  position:relative; margin-top:2.5rem; padding-top:2.5rem;
  border-top:1px dashed var(--linha-forte); text-align:center;
}
.corte p { color:var(--fraco); font-size:.86rem }

/* ---------------------------------------------------------------- mosaico */

.mosaico-grade {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(3.4rem, 1fr));
  gap:.45rem;
}
.mosaico-grade img {
  width:100%; height:auto; background:#efeadd; padding:2px;
  box-shadow:0 0 0 1px var(--linha);
  transition:transform .25s ease, box-shadow .25s ease;
}
.mosaico-grade img:hover {
  transform:scale(1.35) rotate(-2deg); z-index:3; position:relative;
  box-shadow:var(--sombra-alta);
}

/* ----------------------------------------------------------------- naipes */

.naipe {
  display:flex; flex-direction:column; gap:1.1rem;
  border:1px solid var(--linha); padding:1.5rem; background:var(--superficie);
}
.naipe .recorte { --borda:9px; width:70%; margin-inline:auto; transform:rotate(-2deg) }
.naipe h3 {
  font-family:'Cartaz', sans-serif; font-weight:400; text-transform:lowercase;
  font-size:1.5rem; letter-spacing:-.02em; color:var(--tinta); line-height:1.12;
}
.naipe .elemento {
  font-size:.62rem; font-weight:600; letter-spacing:.28em; text-indent:.28em;
  text-transform:uppercase; color:var(--ouro);
}
.naipe p { font-size:.86rem; color:var(--corpo); line-height:1.65 }

/* --------------------------------------------------------------- problema */

.problema-item { display:flex; gap:1.1rem; align-items:flex-start }
.problema-item .marca-x {
  flex:0 0 auto; width:1.7rem; height:1.7rem; display:grid; place-items:center;
  border:1px solid var(--vermelho-texto); color:var(--vermelho-texto);
  font-size:.85rem; font-weight:700;
}
.problema-item b { display:block; color:var(--tinta); font-weight:600; margin-bottom:.3rem }
.problema-item p { color:var(--corpo); font-size:.92rem }

.solucao {
  margin-top:clamp(2.5rem, 5vw, 3.5rem); border:1px solid var(--ouro);
  padding:clamp(1.8rem, 4vw, 2.8rem); display:flex; gap:1.6rem; align-items:flex-start;
}
.solucao svg { width:2rem; height:2rem; color:var(--ouro); flex:0 0 auto }
.solucao h3 { font-size:1.1rem; font-weight:600; margin-bottom:.6rem; color:var(--ouro-forte) }
.solucao p { color:var(--corpo) }

/* -------------------------------------------------------------- para quem */

.dupla-listas { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem, 4vw, 3rem) }
.dupla-listas ul { list-style:none; display:grid; gap:1rem }
.dupla-listas li { display:flex; gap:.85rem; align-items:flex-start; font-size:.94rem; color:var(--corpo) }
.dupla-listas svg { width:1.05rem; height:1.05rem; flex:0 0 auto; margin-top:.35rem }
.dupla-listas .sim svg { color:var(--ouro) }
.dupla-listas .nao svg { color:var(--vermelho-texto) }
.dupla-listas h3 {
  font-size:.72rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:1.4rem; padding-bottom:.9rem; border-bottom:1px solid var(--linha);
}
.dupla-listas .sim h3 { color:var(--ouro-forte) }
.dupla-listas .nao h3 { color:var(--vermelho-texto) }

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

.depoimento {
  border:1px solid var(--linha); padding:1.8rem; background:var(--superficie);
  display:flex; flex-direction:column; gap:1rem;
}
.depoimento p { font-family:'Cormorant', serif; font-size:1.15rem; line-height:1.55; color:var(--tinta) }
.depoimento .quem { font-size:.78rem; color:var(--fraco); letter-spacing:.06em; margin-top:auto }
.depoimento .estrelas { color:var(--ouro); letter-spacing:.2em; font-size:.85rem }

/* ------------------------------------------------------------------ preço */

.planos { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem, 3.5vw, 2.5rem); align-items:start }
.plano {
  border:1px solid var(--linha); padding:clamp(1.8rem, 4vw, 2.6rem);
  background:var(--superficie); display:flex; flex-direction:column; gap:1.5rem;
  position:relative;
}
.plano--destaque {
  border-color:var(--ouro); background:var(--superficie-alta);
  box-shadow:var(--sombra-alta);
}
.plano .fita-canto {
  position:absolute; top:-.8rem; left:50%; transform:translateX(-50%) rotate(-1.5deg);
  background:var(--vermelho); color:var(--botao-tinta); padding:.35rem 1.1rem;
  font-size:.64rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  white-space:nowrap;
}
.plano h3 {
  font-family:'Cartaz', sans-serif; font-weight:400; text-transform:lowercase;
  font-size:clamp(1.7rem, 3.6vw, 2.3rem); letter-spacing:-.02em; color:var(--tinta);
  line-height:1.12;
}
.plano .oque { font-size:.82rem; color:var(--fraco); letter-spacing:.06em; margin-top:.3rem }
.preco-linha { display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap }
.preco-linha .de { color:var(--fraco); text-decoration:line-through; font-size:1rem }
.preco-linha .por {
  font-family:'Cartaz', sans-serif; font-weight:400; color:var(--vermelho);
  font-size:clamp(2.6rem, 7vw, 3.8rem); line-height:.9; letter-spacing:-.02em;
}
.preco-linha .por small { font-size:.4em; letter-spacing:0 }
.plano .parcela { font-size:.85rem; color:var(--corpo) }
.plano ul { list-style:none; display:grid; gap:.75rem; margin-top:.2rem }
.plano li { display:flex; gap:.7rem; align-items:flex-start; font-size:.9rem; color:var(--corpo) }
.plano li svg { width:.95rem; height:.95rem; color:var(--ouro); flex:0 0 auto; margin-top:.35rem }
.plano .botao { margin-top:auto }

/* --------------------------------------------------------------- garantia */

.garantia-caixa {
  display:grid; grid-template-columns:auto 1fr; gap:clamp(1.5rem, 4vw, 2.8rem);
  align-items:center; border:1px solid var(--ouro); padding:clamp(1.8rem, 4vw, 2.8rem);
}
.garantia-caixa .selo-garantia { width:clamp(6rem, 14vw, 8.5rem); aspect-ratio:1; transform:rotate(-6deg) }
.garantia-caixa h3 {
  font-family:'Cartaz', sans-serif; font-weight:400; text-transform:lowercase;
  font-size:clamp(1.7rem, 4vw, 2.4rem); letter-spacing:-.02em; margin-bottom:.7rem;
  line-height:1.12;
}
.garantia-caixa p { color:var(--corpo) }

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

.faq-lista { border-top:1px solid var(--linha) }
.faq-item { border-bottom:1px solid var(--linha) }
.faq-item button {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.5rem 0; text-align:left; font-size:1rem; font-weight:500; color:var(--tinta);
}
.faq-item button:hover { color:var(--ouro-forte) }
.faq-item .mais {
  flex:0 0 auto; width:1.5rem; height:1.5rem; display:grid; place-items:center;
  border:1px solid var(--ouro); color:var(--ouro); font-size:1rem; line-height:1;
  transition:transform .3s ease;
}
.faq-item[open] .mais, .faq-item.aberto .mais { transform:rotate(45deg) }
.faq-resposta {
  display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s ease;
}
.faq-item.aberto .faq-resposta { grid-template-rows:1fr }
.faq-resposta > div { overflow:hidden }
.faq-resposta p { padding-bottom:1.6rem; color:var(--corpo); max-width:70ch; font-size:.95rem }

/* ------------------------------------------------------------- fechamento */

.fechamento { text-align:center; position:relative; overflow:hidden }
.fechamento .leque {
  display:flex; justify-content:center; margin-bottom:2.5rem; pointer-events:none;
}
.fechamento .leque .recorte { --borda:5px; width:clamp(4.5rem, 9vw, 6.5rem); margin-inline:-1.2rem }
.fechamento .leque .recorte:nth-child(1) { transform:rotate(-12deg) translateY(1rem) }
.fechamento .leque .recorte:nth-child(2) { transform:rotate(-6deg) translateY(.3rem) }
.fechamento .leque .recorte:nth-child(3) { transform:rotate(0deg); z-index:2 }
.fechamento .leque .recorte:nth-child(4) { transform:rotate(6deg) translateY(.3rem) }
.fechamento .leque .recorte:nth-child(5) { transform:rotate(12deg) translateY(1rem) }
.fechamento h2 {
  font-family:'Cartaz', sans-serif; font-weight:400; text-transform:lowercase;
  font-size:clamp(2.4rem, 8vw, 5rem); line-height:1.12; letter-spacing:-.03em;
  color:var(--tinta);
}
.fechamento h2 em { font-style:normal; color:var(--vermelho) }
.fechamento .punho { display:block; margin:1.8rem auto 2.4rem; font-size:1.7rem; max-width:26ch }

/* ------------------------------------------------------------------ rodapé */

footer {
  border-top:1px solid var(--linha); padding:clamp(2.5rem, 5vw, 4rem) 0 3rem;
  font-size:.82rem; color:var(--fraco);
}
footer .envolve { display:grid; gap:1.6rem }
footer .linha-top { display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; align-items:center }
footer nav { display:flex; gap:1.4rem; flex-wrap:wrap }
footer nav a:hover { color:var(--ouro) }
footer .miudo { max-width:75ch; line-height:1.6; font-size:.76rem }

/* ------------------------------------------------- vitrine da editora (raiz) */

/* A home é um stub: reaproveita todo o sistema acima e só acrescenta o que a
   página do tarot não tem. Cada produto novo entra como um .vitrine-item. */

.editora-capa { padding-top:clamp(3.5rem, 8vw, 6rem); padding-bottom:clamp(2rem, 4vw, 3rem) }
.editora-capa h1 {
  font-size:clamp(2.8rem, 9vw, 5.5rem); line-height:1; color:var(--vermelho);
  margin:.9rem 0 0; text-shadow:var(--contorno-display);
}
.editora-sub {
  margin-top:1.6rem; max-width:52ch; color:var(--corpo);
  font-size:clamp(1rem, .95rem + .25vw, 1.12rem);
}

.editora-vitrine { padding-top:clamp(2rem, 4vw, 3rem) }
.editora-vitrine .rotulo { margin-bottom:1.6rem }
.vitrine { display:grid; gap:clamp(1.2rem, 3vw, 2rem); grid-template-columns:repeat(2, 1fr) }

.vitrine-item {
  border:1px solid var(--linha); background:var(--superficie);
  padding:clamp(1.6rem, 3.5vw, 2.4rem);
  display:flex; flex-direction:column; gap:1.6rem;
}
.vitrine-item--vazio { border-style:dashed; justify-content:center; opacity:.62 }

.vitrine-arte { display:flex; justify-content:center; align-items:flex-end }
.vitrine-arte .recorte {
  width:clamp(4.5rem, 11vw, 7rem); margin-inline:-.9rem;
  transition:transform .3s ease;
}
.vitrine-arte .recorte:nth-child(1) { transform:rotate(-8deg) translateY(.5rem) }
.vitrine-arte .recorte:nth-child(2) { transform:rotate(0deg); z-index:2 }
.vitrine-arte .recorte:nth-child(3) { transform:rotate(8deg) translateY(.5rem) }
.vitrine-item:hover .vitrine-arte .recorte:nth-child(1) { transform:rotate(-13deg) translateY(0) }
.vitrine-item:hover .vitrine-arte .recorte:nth-child(3) { transform:rotate(13deg) translateY(0) }

.vitrine-texto { display:flex; flex-direction:column; gap:1rem; align-items:flex-start }
.vitrine-texto h2 {
  font-size:clamp(1.6rem, 4vw, 2.3rem); line-height:1.12; color:var(--tinta);
}
.vitrine-texto p { color:var(--corpo); font-size:.95rem }
.vitrine-texto .botao { margin-top:.4rem }

@media (max-width: 760px) {
  .vitrine { grid-template-columns:1fr }
}

/* ------------------------------------------------------------------ reveal */

/* Só esconde se houver JavaScript para revelar de volta — ver a nota no <head>
   do index.html. Sem .com-js, .surge não faz nada. */
.com-js .surge { opacity:0; transform:translateY(1.5rem); transition:opacity .7s ease, transform .7s ease }
.com-js .surge.visivel { opacity:1; transform:none }

/* ---------------------------------------------------------------- telas < */

@media (max-width: 960px) {
  .topo nav { display:none }
  .entrega, .anatomia-grade, .dupla-listas, .planos { grid-template-columns:1fr }
  .previas { grid-template-columns:repeat(2, 1fr) }
  .colunas--3, .colunas--4 { grid-template-columns:repeat(2, 1fr) }
  .blocos-demo { grid-template-columns:repeat(2, 1fr) }
  .ficha-demo { grid-template-columns:1fr }
  .ficha-demo .retrato { width:min(13rem, 60%) }
}

@media (max-width: 620px) {
  .numeros ul { grid-template-columns:repeat(2, 1fr) }
  .numeros li:nth-child(3) { border-left:0 }
  .numeros li:nth-child(-n+2) { border-bottom:1px solid var(--linha) }
  .colunas--2, .colunas--3, .colunas--4, .blocos-demo, .previas { grid-template-columns:1fr }
  .capa .acoes .botao { width:100% }
  /* Em tela estreita o selo encostava no "guia moderno do" e comia a última
     letra: o clamp da largura chega no piso (6,5rem) antes de a coluna de texto
     estreitar o bastante. Encolhe o selo e abre topo pro texto começar abaixo
     dele — em vez de deixar os dois disputarem o mesmo canto. */
  .capa .selo { width:5.5rem; top:1rem; right:1rem }
  .capa .miolo { padding-top:7.5rem }
  .garantia-caixa { grid-template-columns:1fr; justify-items:center; text-align:center }
  .solucao { flex-direction:column }
  .mosaico-grade { grid-template-columns:repeat(auto-fill, minmax(2.6rem, 1fr)) }
  .topo .botao span.longo { display:none }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto }
  *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important }
  .surge { opacity:1; transform:none }
}