/* =========================================================================
   Estrela-Guia — folha de estilo única
   Implementa DESIGN.md (Dark Esoteric Editorial · Interaction Tier L2)
   Regra de ouro: nenhuma cor hardcoded fora de :root.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  --bg: #0B0716;
  --bg-deep: #06040E;
  --surface: #150E28;
  --surface-alt: #1C1335;

  --border: rgba(214, 183, 110, .16);
  --border-strong: rgba(214, 183, 110, .34);
  --border-hover: rgba(214, 183, 110, .55);
  --border-muted: rgba(244, 239, 230, .08);

  --text: #F4EFE6;
  --text-secondary: #BCB0C9;
  --text-tertiary: #857A9B;

  --accent: #D6B76E;
  --accent-hover: #E8CE8C;
  --accent-soft: #F0DCA8;
  --accent-deep: #9C7F3E;

  --rose: #C77D8E;
  --violet: #7B62C9;

  /* A aurora é O gradiente da marca — um só, no fundo da página, nunca
     repetido em botão ou cartão. Índigo de um lado, vinho do outro. */
  --indigo: #3B2E8C;
  --vinho: #5E1F3D;
  --indigo-rgb: 59, 46, 140;
  --vinho-rgb: 94, 31, 61;

  /* Vidro fosco: borda de fio + fundo semitransparente. O desfoque fica no
     limite de 14px que o painel aguenta sem engasgar ao rolar. */
  --vidro: rgba(var(--surface-rgb), .58);
  --vidro-borda: rgba(var(--text-rgb), .10);
  --vidro-desfoque: blur(14px) saturate(130%);

  --bg-rgb: 11, 7, 22;
  --surface-rgb: 21, 14, 40;
  --accent-rgb: 214, 183, 110;
  --rose-rgb: 199, 125, 142;
  --violet-rgb: 123, 98, 201;
  --text-rgb: 244, 239, 230;

  --success: #7FB79A;
  --error: #D9736F;
  --warning: #D9A75F;

  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-ritual: 'Cinzel', 'Cormorant Garamond', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --sp-1: .5rem; --sp-2: .75rem; --sp-3: 1rem; --sp-4: 1.5rem;
  --sp-5: 2rem;  --sp-6: 3rem;   --sp-7: 4.5rem;

  --ease: cubic-bezier(.22, 1, .36, 1);

  --shadow-sm: 0 2px 10px -4px rgba(0, 0, 0, .55);
  --shadow-md: 0 10px 28px -12px rgba(0, 0, 0, .7);
  --shadow-lg: 0 20px 52px -18px rgba(0, 0, 0, .8);
  --shadow-gold: 0 0 0 1px var(--accent), 0 18px 44px -16px rgba(var(--accent-rgb), .55);

  --container: 1080px;
  --container-estreito: 700px;

  /* leque: a carta tem o dobro da largura do passo, então cada uma cobre metade da seguinte */
  /* As cartas dos dois baralhos têm formatos diferentes: a do tarô é estreita
     e alta (600/1030), a cigana é larga e baixa (880/1168). Com a MESMA
     largura, a cigana fica 23% mais baixa e parece bem menor na tela. O fator
     corrige isso: cada baralho recebe o seu, e as duas terminam com a mesma
     ALTURA. Quem define o valor é o próprio baralho, em baralho*.js. */
  --carta-fator: 1;
  --carta-l: calc(88px * var(--carta-fator));
  --carta-passo: calc(44px * var(--carta-fator));

  /* A proporção da carta muda com o baralho — o tarô é estreito e alto,
     o cigano é quase 3:4. O JavaScript reescreve este token ao trocar de
     baralho; o valor aqui é o do tarô, que é o padrão. */
  --carta-proporcao: 600 / 1030;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* O atributo hidden vale menos que qualquer display declarado numa classe.
   Sem esta regra, um .btn[hidden] continua aparecendo. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); color: var(--text); margin: 0; font-weight: 600; }
p { margin: 0 0 1rem; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; }
code { font-size: .9em; color: var(--accent); }
::selection { background: rgba(var(--accent-rgb), .3); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; border-radius: 2px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.container--estreito { max-width: var(--container-estreito); }

.eyebrow {
  font-family: var(--font-ritual); font-size: .7rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 var(--sp-3);
}

/* ---------- 3. Fundo ---------- */
.ceu { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ceu__camada {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 22px 34px, rgba(var(--text-rgb), .55), transparent),
    radial-gradient(1.2px 1.2px at 140px 88px, rgba(var(--text-rgb), .35), transparent),
    radial-gradient(1.6px 1.6px at 268px 42px, rgba(var(--accent-rgb), .42), transparent),
    radial-gradient(1.1px 1.1px at 330px 190px, rgba(var(--text-rgb), .28), transparent);
  background-size: 420px 260px;
  opacity: .8;
}
/* A aurora: duas manchas grandes que derivam devagar, em sentidos opostos.
   É o único gradiente decorativo do site — tudo o mais é cor chapada. */
.ceu__aurora {
  position: absolute; inset: -20%;
  background:
    radial-gradient(52% 46% at 18% 14%, rgba(var(--indigo-rgb), .82), transparent 70%),
    radial-gradient(50% 44% at 82% 66%, rgba(var(--vinho-rgb), .78), transparent 72%),
    radial-gradient(40% 38% at 58% 96%, rgba(var(--indigo-rgb), .42), transparent 70%),
    radial-gradient(34% 30% at 68% 8%, rgba(var(--accent-rgb), .10), transparent 66%);
  animation: derivar 38s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes derivar {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.08); }
}

.ceu__aura {
  position: absolute; inset: 0;
  background:
    radial-gradient(760px circle at var(--mx, 50%) var(--my, 12%), rgba(var(--violet-rgb), .16), transparent 62%),
    radial-gradient(1100px circle at 82% -8%, rgba(var(--accent-rgb), .08), transparent 60%),
    linear-gradient(180deg, rgba(var(--violet-rgb), .10), transparent 42%);
}
main, .nav, .rodape, .alerta-servidor { position: relative; z-index: 1; }

/* ---------- 4. Aviso de servidor desligado ---------- */
.alerta-servidor {
  background: rgba(var(--accent-rgb), .12);
  border-bottom: 1px solid var(--border-strong);
  padding: var(--sp-3) 0;
  font-size: .9375rem; color: var(--text);
  animation: surgir .5s var(--ease) both;
}
.alerta-servidor strong { color: var(--accent); display: block; margin-bottom: .1rem; }
.alerta-servidor[hidden] { display: none; }

/* ---------- 5. Navegação ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  padding: 1rem 0; border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, padding .35s ease, backdrop-filter .35s ease;
}
.nav.is-scrolled {
  padding: .6rem 0;
  /* quase opaco: a 88% um botão dourado passando por baixo continua legível
     e o cabeçalho parece quebrado. O blur é bônus onde houver suporte. */
  background: rgba(var(--bg-rgb), .97);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border-muted);
}
.nav__interno { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.nav__marca {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-size: 1.28rem; font-weight: 600;
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.nav__marca-fino { color: var(--accent); }
.nav__estrela { width: 17px; height: 17px; fill: var(--accent); }
.nav__marca:hover .nav__estrela { animation: pulsar 1.2s var(--ease); }

/* ---------- 6. Botões e links ---------- */
.btn {
  font-family: var(--font-ritual); font-size: .8rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1.8rem;
  border-radius: 2px; border: 1px solid var(--border-strong);
  background: transparent; color: var(--text);
  text-decoration: none; cursor: pointer;
  position: relative; isolation: isolate; overflow: hidden;
  transition: color .3s var(--ease), border-color .3s var(--ease),
              transform .3s var(--ease), box-shadow .3s var(--ease), opacity .3s ease;
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .4s var(--ease);
}
.btn:hover { color: var(--bg); border-color: var(--accent); transform: translateY(-2px); }
.btn:hover::before { transform: scaleY(1); }
.btn:active { transform: translateY(0) scale(.985); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .35; cursor: not-allowed; transform: none;
  border-color: var(--border-muted); color: var(--text-tertiary);
}
.btn:disabled::before, .btn[aria-disabled="true"]::before { transform: scaleY(0); }

.btn--primary {
  background: linear-gradient(180deg, var(--accent-hover), var(--accent-deep));
  color: var(--bg); border-color: transparent;
}
.btn--primary:hover { box-shadow: 0 10px 34px -12px rgba(var(--accent-rgb), .6); }
.btn--primary:disabled { background: none; }
.btn--ghost { border-color: var(--border-muted); color: var(--text-secondary); }
.btn--ghost:hover { color: var(--bg); }
.btn--pequeno { min-height: 44px; padding: 0 1.2rem; font-size: .7rem; white-space: nowrap; }

.link {
  color: var(--accent); text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .35s var(--ease), color .25s ease;
}
.link:hover { background-size: 100% 1px; color: var(--accent-hover); }

.link-botao {
  background: none; border: 0; padding: .3rem 0; cursor: pointer;
  color: var(--accent); font-size: .8125rem; font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, color .25s ease;
}
.link-botao:hover { border-bottom-color: var(--accent); color: var(--accent-hover); }

/* ---------- 7. Hero ---------- */
/* ---------- 7b. Portal: os dois leques ----------
   Primeira tela do site. Dois leques de verdade, um por baralho, em vidro
   fosco sobre a aurora. A escolha é a porta de entrada: enquanto não for
   feita, a consulta nem existe na tela. */
.portal {
  min-height: min(100svh, 900px);
  display: grid; align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2.5rem, 6vw, 4rem);
  isolation: isolate;                 /* empilhamento próprio: nada de z-index global */
}
.portal__interno { text-align: center; }

.portal__titulo {
  font-size: clamp(2.3rem, 6vw, 4.4rem); line-height: 1.04; letter-spacing: -.025em;
  margin: 0 0 var(--sp-3);
}
.portal__titulo .linha { display: block; animation: revelarMask .9s var(--ease) both; }
.portal__titulo .linha--2 { animation-delay: .12s; }

.portal__sub {
  font-size: 1.0625rem; line-height: 1.65; max-width: 44ch;
  margin: 0 auto var(--sp-6); color: var(--text-secondary);
}

.portal__baralhos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  max-width: 900px; margin: 0 auto;
}

/* Cada opção é um painel de vidro com um leque dentro. Elevação por FIO,
   não por sombra pesada: a sombra só entra quando o painel levanta. */
.leque-escolha {
  position: relative; isolation: isolate;
  display: grid; gap: var(--sp-3);
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1rem, 2.5vw, 1.8rem) clamp(1.2rem, 2.5vw, 1.6rem);
  border-radius: 6px; cursor: pointer; text-align: center;
  background: var(--vidro);
  -webkit-backdrop-filter: var(--vidro-desfoque);
  backdrop-filter: var(--vidro-desfoque);
  border: 1px solid var(--vidro-borda);
  transition: border-color 200ms ease-out, transform 200ms ease-out, box-shadow 200ms ease-out;
  animation: surgir .6s var(--ease) both;
}
.leque-escolha:nth-child(2) { animation-delay: .09s; }

.leque-escolha:hover     { border-color: var(--border-strong); transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.leque-escolha:active    { transform: translateY(-1px); transition-duration: 90ms; }
.leque-escolha:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 4px; }
.leque-escolha[aria-checked="true"] { border-color: var(--accent); }

/* O leque: cartas sobrepostas girando a partir da base, como uma mão aberta. */
.leque-escolha__cartas {
  position: relative; display: block;
  height: clamp(150px, 20vw, 210px);
}
.leque-escolha__cartas img {
  position: absolute; bottom: 0; left: 50%;
  height: 100%; width: auto; border-radius: 5px;
  border: 1px solid var(--border-strong);
  transform-origin: 50% 118%;
  transform: translateX(-50%) rotate(var(--giro)) ;
  transition: transform 220ms ease-out;
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .7);
}
.leque-escolha:hover .leque-escolha__cartas img { transform: translateX(-50%) rotate(var(--giro-aberto)); }

.leque-escolha__nome {
  font-family: var(--font-display); font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  color: var(--text); line-height: 1.15;
}
.leque-escolha__qtd {
  font-family: var(--font-ritual); font-size: .6rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
  display: block; margin-top: .3rem;
}
.leque-escolha__res {
  font-size: .9375rem; line-height: 1.55; color: var(--text-secondary);
  margin: 0 auto; max-width: 30ch;
}
.leque-escolha__cta {
  font-family: var(--font-ritual); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  border-bottom: 1px solid transparent; padding-bottom: 2px; justify-self: center;
  transition: border-color 160ms ease-out;
}
.leque-escolha:hover .leque-escolha__cta { border-bottom-color: var(--accent); }

.portal__nota {
  font-size: .875rem; color: var(--text-tertiary);
  max-width: 50ch; margin: var(--sp-6) auto 0;
}

/* lembrete do baralho escolhido, no topo da etapa 1 */
.escolhido {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  font-size: .9rem; color: var(--text-secondary);
  padding: .6rem .9rem; margin: 0 0 var(--sp-5);
  border: 1px solid var(--vidro-borda); border-radius: 4px;
  background: var(--vidro);
  -webkit-backdrop-filter: var(--vidro-desfoque);
  backdrop-filter: var(--vidro-desfoque);
}
.escolhido b { color: var(--text); font-weight: 500; }
.escolhido__capa {
  width: 26px; flex: none; line-height: 0; border-radius: 2px; overflow: hidden;
  border: 1px solid var(--border);
}
.escolhido__capa img { width: 100%; display: block; }

@media (max-width: 720px) {
  .portal { min-height: 0; padding-top: var(--sp-4); }
  .portal__baralhos { grid-template-columns: 1fr; gap: var(--sp-4); }
  .leque-escolha__cartas { height: 168px; }
}

@media (prefers-reduced-motion: reduce) {
  .ceu__aurora { animation: none; }
  .leque-escolha:hover .leque-escolha__cartas img { transform: translateX(-50%) rotate(var(--giro)); }
}

.hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem); }
.hero__interno {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
}
.hero__titulo {
  font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.06; letter-spacing: -.02em;
  margin: 0 0 var(--sp-4);
}
.hero__titulo .linha { display: block; animation: revelarMask .9s var(--ease) both; }
.hero__titulo .linha--2 { animation-delay: .14s; }
.realce {
  font-style: italic;
  background: linear-gradient(100deg, var(--accent-soft), var(--accent), var(--accent-soft));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: fluirOuro 7s linear infinite;
}
.hero__sub { font-size: 1.125rem; line-height: 1.7; max-width: 48ch; margin-bottom: var(--sp-5); }
.hero__acoes { margin-bottom: var(--sp-5); }

.hero__passos {
  list-style: none; margin: 0; padding: var(--sp-4) 0 0;
  border-top: 1px solid var(--border-muted);
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  font-size: .875rem; color: var(--text-tertiary);
}
.hero__passos li { display: flex; align-items: center; gap: .5rem; }
.hero__passos b {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-ritual); font-size: .7rem; font-weight: 600;
  color: var(--accent); border: 1px solid var(--border);
}

.hero__leque { position: relative; height: clamp(260px, 32vw, 380px); }
.hero__carta {
  position: absolute; left: 50%; bottom: 0;
  width: clamp(92px, 11vw, 132px); height: auto;
  border-radius: 6px; border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: var(--pose);
  animation: distribuir .9s var(--ease) both;
}

/* ---------- 8. Seções ---------- */
.secao { padding: clamp(3rem, 7vw, 5rem) 0; }
.secao__titulo { font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.15; margin-bottom: var(--sp-4); }

/* ---------- 9. Consulta: passos ---------- */
.consulta { padding: clamp(2rem, 5vw, 3rem) 0 clamp(3.5rem, 8vw, 5.5rem); scroll-margin-top: 80px; }

.passos {
  list-style: none; display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-3); margin: 0 0 var(--sp-5); padding: 0;
}
.passo { display: flex; align-items: center; gap: .55rem; }
.passo + .passo::before {
  content: ''; width: clamp(14px, 4vw, 40px); height: 1px;
  background: var(--border-muted); margin-right: .15rem;
}
.passo__bolha {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-ritual); font-size: .78rem;
  border: 1px solid var(--border-muted); color: var(--text-tertiary);
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.passo__rotulo { font-size: .82rem; color: var(--text-tertiary); transition: color .3s ease; }
.passo.is-ativo .passo__bolha {
  border-color: var(--accent); background: var(--accent); color: var(--bg);
  box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .14);
}
.passo.is-ativo .passo__rotulo { color: var(--text); }
.passo.is-feito .passo__bolha { border-color: var(--accent); color: var(--accent); }

/* ---------- 10. Etapas ---------- */
.etapa { display: none; animation: surgir .55s var(--ease) both; }
.etapa.is-ativa { display: block; }
.etapa[hidden] { display: none; }
.etapa__titulo { font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.2; margin-bottom: .6rem; }
.etapa__acoes {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-5);
}
.ajuda { font-size: .9375rem; color: var(--text-tertiary); max-width: 62ch; }

.campo {
  width: 100%; min-height: 108px; resize: vertical;
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7;
  color: var(--text); background: var(--surface-alt);
  border: 1px solid var(--border-muted); border-radius: 3px; padding: 1rem 1.2rem;
  margin-top: var(--sp-3);
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.campo::placeholder { color: var(--text-tertiary); }
.campo:hover { border-color: var(--border); }
.campo:focus {
  outline: none; border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .13);
}
.campo[aria-invalid="true"] { border-color: var(--error); }
.campo__rodape {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sp-3); margin-top: .5rem;
}
.contador { font-size: .75rem; color: var(--text-tertiary); letter-spacing: .04em; }
.aviso-inline { font-size: .875rem; color: var(--warning); }
.rotulo-mini {
  display: block; font-size: .75rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-tertiary); margin-bottom: .3rem;
}

.retomar {
  max-width: 30rem; margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px solid var(--border-muted);
}
.retomar__chamada {
  font-size: .875rem; color: var(--text-tertiary); margin-bottom: .6rem;
}

.pergunta-eco {
  font-family: var(--font-display); font-style: italic; font-size: 1.2rem;
  color: var(--text-secondary); border-left: 2px solid var(--accent);
  padding: .3rem 0 .3rem 1rem; margin: var(--sp-4) 0;
}
.pergunta-eco:empty { display: none; }

/* ---------- 10b. Escolha da leitura ---------- */
.etapa__subtitulo {
  font-size: 1.35rem; margin: var(--sp-5) 0 var(--sp-3); color: var(--text);
}

.baralhos { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
/* Sem JavaScript o seletor fica vazio; sem isto, restaria um bloco com borda
   e fundo descrevendo coisa nenhuma, logo abaixo de um título que pergunta. */
.baralhos:empty { display: none; }
.baralhos:empty + .ajuda--nota { display: none; }

.baralho {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: var(--sp-3); width: 100%; text-align: left; cursor: pointer;
  padding: .9rem 1rem; border-radius: 3px;
  background: var(--surface-alt); border: 1px solid var(--border-muted);
  transition: border-color .3s ease, background .3s ease, transform .3s var(--ease);
}
.baralho:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.baralho[aria-checked="true"] { border-color: var(--accent); background: rgba(var(--accent-rgb), .07); }
.baralho:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }

/* A capa é o próprio verso da carta, em miniatura: o consulente reconhece o
   baralho pela imagem antes de ler o nome. */
.baralho__capa {
  width: 46px; flex: none; border-radius: 3px; overflow: hidden;
  border: 1px solid var(--border); line-height: 0;
  opacity: .72; transition: opacity .3s ease, border-color .3s ease;
}
/* A proporção vem do baralho, por style inline: o tarô é estreito e o cigano
   é quase 3:4, e um valor fixo aqui cortaria um dos dois. */
.baralho__capa img { width: 100%; aspect-ratio: 600 / 1030; object-fit: cover; }
.baralho[aria-checked="true"] .baralho__capa { opacity: 1; border-color: var(--accent); }

.baralho__nome { font-family: var(--font-display); font-size: 1.2rem; color: var(--text); line-height: 1.25; }
.baralho__res { font-size: .82rem; color: var(--text-tertiary); margin: .2rem 0 0; line-height: 1.5; }

.ajuda--nota { font-size: .9rem; margin-top: .85rem; color: var(--text-tertiary); }

/* Cartão fixo: o site tem uma leitura só, então isto informa, não escolhe —
   nada de hover, foco ou estado marcado, que prometeriam um clique que não existe. */
.leitura-tipo {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--sp-3); width: 100%;
  padding: 1rem 1.2rem; border-radius: 3px;
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
}

.leitura-tipo__qtd {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: grid; place-items: center; line-height: 1;
  font-family: var(--font-ritual); font-size: 1rem;
  background: var(--accent); color: var(--bg); border: 1px solid var(--accent);
}
.leitura-tipo__qtd small { display: block; font-size: .42rem; letter-spacing: .1em; margin-top: .1rem; }

.leitura-tipo__nome { font-family: var(--font-display); font-size: 1.25rem; color: var(--text); line-height: 1.25; }
.leitura-tipo__res { font-size: .875rem; color: var(--text-tertiary); margin: .15rem 0 0; }

.leitura-tipo__preco {
  font-family: var(--font-display); font-size: 1.5rem; color: var(--accent); white-space: nowrap;
}
.leitura-tipo__preco small { font-size: .7rem; color: var(--text-tertiary); display: block; text-align: right; letter-spacing: .04em; }

/* No celular três colunas espremem a descrição em 140px. O preço desce para
   a sua própria linha e o texto ganha a largura de volta. */
@media (max-width: 620px) {
  .baralhos { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .leitura-tipo { grid-template-columns: auto 1fr; row-gap: .6rem; }
  .leitura-tipo__preco { grid-column: 1 / -1; text-align: left; font-size: 1.35rem; }
  .leitura-tipo__preco small { display: inline; margin-left: .45rem; text-align: left; }
}

/* ---------- 11. Leque das 78 cartas ----------
   Grade com passo igual à metade da carta: cada carta cobre metade da
   seguinte e TODAS as linhas começam alinhadas — sem margem negativa,
   que desalinhava a segunda linha em diante.                          */
.mesa__botoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--sp-3); }

.leque {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--carta-passo));
  justify-content: center;
  row-gap: var(--sp-4);
  padding: var(--sp-4) var(--carta-passo) var(--sp-5);
}

.carta {
  position: relative;
  width: var(--carta-l);
  padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 5px;
  transition: transform .4s var(--ease), filter .3s ease;
}

/* A virada acontece no clique. A perspectiva entra só na carta escolhida —
   aplicar em todas as 78 criaria 78 contextos 3D e pesaria à toa. */
.carta__giro {
  display: block; position: relative;
  transform-style: preserve-3d;
  transition: transform .6s var(--ease);
}
.carta.is-escolhida { perspective: 900px; }
.carta.is-virada .carta__giro { transform: rotateY(180deg); }

.carta__face {
  display: block; width: 100%;
  border-radius: 5px;
  border: 1px solid var(--border-muted);
  box-shadow: var(--shadow-md);
  backface-visibility: hidden;
  transition: box-shadow .35s ease, border-color .35s ease;
  pointer-events: none;
}
.carta__verso { height: auto; aspect-ratio: var(--carta-proporcao); object-fit: cover; }
.carta__frente {
  position: absolute; inset: 0; height: 100%;
  object-fit: cover; object-position: center;
  transform: rotateY(180deg);
  background: var(--surface);
}

/* A carta inteira é DESENHADA, mas só a faixa exposta dela recebe o mouse.

   Por que: no leque cada carta cobre metade da seguinte, e a carta sob o
   ponteiro sobe para z-index 5. Com a área de mouse valendo a carta toda, essa
   subida fazia a carta em foco cobrir também a faixa da vizinha da direita —
   então, indo da esquerda para a direita, o ponteiro saltava direto para a
   carta seguinte à vizinha e o realce piscava. Da direita para a esquerda
   nunca deu problema porque o z-index só invade o lado direito.

   A faixa tem exatamente --carta-passo, que é a parte da carta que está por
   cima de todas as outras. Assim a ordem de hover é a ordem visual, nos dois
   sentidos, e o clique cai sempre na carta que a pessoa está vendo. */
.carta { pointer-events: none; }
.carta::before {
  content: ''; position: absolute; z-index: 3;
  top: 0; bottom: 0; left: 0; width: var(--carta-passo);
  pointer-events: auto;
}
.carta.is-escolhida::before,
.leque.is-fechado .carta::before,
.carta[aria-disabled="true"]::before { pointer-events: none; }

.carta:hover:not(.is-escolhida) { transform: translateY(-14px); z-index: 5; }
.carta:hover .carta__verso { box-shadow: 0 16px 40px -12px rgba(var(--accent-rgb), .5); }
.carta:focus-visible { z-index: 6; }

/* A carta escolhida SOBE e sai de cena: ela reaparece na fileira de cima.
   O lugar dela fica vago — vago e não removido, senão as outras 77 cartas
   mudariam de posição no meio da escolha e a pessoa perderia a referência.
   Antes a carta ficava aqui, levantada e com z-index alto, cobrindo as
   vizinhas: cada carta tirada atrapalhava a escolha da seguinte. */
.carta.is-escolhida {
  animation: subirEsair .5s var(--ease) forwards;
  pointer-events: none; cursor: default; z-index: 1;
}
.carta.is-escolhida .carta__verso {
  border-style: dashed; border-color: var(--border-strong);
  box-shadow: none;
}
@keyframes subirEsair {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  45%  { transform: translateY(-34px) scale(1.05); opacity: 1; }
  100% { transform: translateY(-10px) scale(.96); opacity: .17; }
}
.carta[aria-disabled="true"]:not(.is-escolhida) { opacity: .4; pointer-events: none; }

/* Mesa fechada: o baralho aparece, mas apagado e sem resposta ao toque,
   até o consulente embaralhar. */
.leque.is-fechado { opacity: .45; filter: saturate(.5); pointer-events: none; }
.leque.is-fechado .carta { cursor: default; }
.leque { transition: opacity .5s var(--ease), filter .5s var(--ease); }

.leque.is-baralhando .carta { animation: tremer .7s var(--ease) both; }
.leque.is-baralhando .carta:nth-child(3n) { animation-delay: .05s; }
.leque.is-baralhando .carta:nth-child(3n+1) { animation-delay: .1s; }

/* ---------- 11b. As cartas já tiradas ----------
   Ficam ACIMA do leque: é para onde a carta sobe quando é escolhida, e de lá
   ela não disputa espaço com as que ainda podem ser tiradas. */
.tiradas {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(.6rem, 2vw, 1.1rem);
  min-height: 0; margin: var(--sp-4) 0 var(--sp-2);
}
.tiradas:empty { display: none; }

.tirada {
  display: grid; justify-items: center; gap: .4rem;
  width: calc(clamp(74px, 11vw, 104px) * var(--carta-fator));
}

/* O lugar que ainda espera carta: moldura tracejada com o nome da posição.
   Serve para duas coisas — a pessoa vê desde o início quais cinco perguntas
   as cartas vão responder, e o leque não desce a cada carta tirada. */
.tirada.is-vaga .tirada__giro {
  border: 1px dashed var(--border);
  border-radius: 4px;
  background: rgba(var(--text-rgb), .02);
}
.tirada.is-vaga .tirada__pos { opacity: .55; }

/* A chegada anima o ITEM; a virada anima o .tirada__giro dentro dele. Precisam
   ser elementos diferentes: uma animação com fill-mode `both` fixa o transform
   final no elemento, e se as duas dividissem o mesmo elemento o `transform:
   none` do fim da chegada anularia o rotateY da virada — a carta subia e
   ficava eternamente de costas. */
.tirada.is-cheia { animation: chegarDeBaixo .4s var(--ease) both; }

.tirada__pos {
  font-family: var(--font-ritual); font-size: .54rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-tertiary);
  text-align: center; line-height: 1.35;
}
.tirada__pos b { color: var(--accent); font-weight: 600; }

.tirada__giro {
  position: relative; width: 100%; aspect-ratio: var(--carta-proporcao);
  transform-style: preserve-3d; perspective: 900px;
  transition: transform .6s var(--ease);
}
.tirada.is-cheia .tirada__pos b { color: var(--accent); }
.tirada.is-virada .tirada__giro { transform: rotateY(180deg); }

.tirada__face {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 4px;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-md);
  backface-visibility: hidden;
}
.tirada__frente { transform: rotateY(180deg); background: var(--surface); }
.tirada.is-virada .tirada__face { border-color: var(--accent); box-shadow: var(--shadow-gold); }

.tirada__nome {
  font-family: var(--font-display); font-size: .82rem; color: var(--text);
  text-align: center; line-height: 1.25;
  opacity: 0; transition: opacity .4s var(--ease) .35s;
  /* altura reservada mesmo vazio: sem isto a fileira cresce quando o nome
     aparece e o leque desce alguns pixels no meio da escolha */
  min-height: 2.5em;
}
.tirada.is-virada .tirada__nome { opacity: 1; }

/* A carta chega vindo de baixo — de onde ela estava, no leque. A animação
   termina em `transform: none` para não brigar com a virada, que também usa
   transform no mesmo elemento. */
@keyframes chegarDeBaixo {
  from { opacity: 0; transform: translateY(26px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

/* qual baralho está na mesa, ao lado dos botões de embaralhar */
.mesa__baralho {
  font-size: .8rem; color: var(--text-tertiary); letter-spacing: .03em;
  align-self: center;
}

/* ---------- 12. Cartas reveladas ----------
   A base vale para tiragens pequenas; a leitura de hoje tem cinco cartas e
   entra por .mesa-revelada--cinco, logo abaixo. */
.mesa-revelada {
  display: grid; gap: clamp(1rem, 3vw, 1.75rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto auto;   /* rótulo · carta · nome · tags */
  max-width: 620px; margin: var(--sp-5) 0 var(--sp-6);
}
/* A leitura de cinco cartas pede cinco colunas e cartas um pouco menores */
.mesa-revelada--cinco {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  /* cresce com o fator, mas nunca passa da largura disponível */
  max-width: min(calc(760px * var(--carta-fator)), 100%);
}

/* Vem DEPOIS de --cinco de propósito: as duas têm a mesma especificidade, e na
   etapa 4 a mesa precisa mesmo encolher ao lado do texto da leitura. */
.mesa-revelada--compacta { max-width: 560px; }
.mesa-revelada--cinco .slot__nome { font-size: .9rem; }
.mesa-revelada--cinco .slot__pos { font-size: .56rem; letter-spacing: .1em; }

/* subgrid alinha as quatro faixas (rótulo · carta · nome · etiquetas) de todas as
   cartas da mesa, mesmo quando um rótulo ocupa duas linhas; sem suporte a
   subgrid, o min-height do rótulo segura o essencial. */
.slot {
  display: grid; grid-row: span 4; grid-template-rows: subgrid; gap: 0;
  animation: surgirEscala .6s var(--ease) both;
}
.slot__pos {
  font-family: var(--font-ritual); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 .5rem; min-height: 2.9em;
}
.slot__carta {
  position: relative; border-radius: 5px; overflow: hidden;
  aspect-ratio: var(--carta-proporcao);   /* define a altura da faixa no subgrid */
  height: 100%;               /* e estica para a faixa, matando o arredondamento
                                 de pixel que deixava uma carta 3px mais curta */
  border: 1px solid var(--border); box-shadow: var(--shadow-md); background: var(--surface);
}
.slot__carta img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slot__carta::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 20%, rgba(var(--accent-rgb), .5) 50%, transparent 80%);
  animation: varredura 1.1s var(--ease) .25s both;
}
.mesa-revelada--compacta .slot__carta::after { display: none; }
.slot__nome {
  font-family: var(--font-display); font-size: 1.05rem; color: var(--accent-soft);
  margin: .6rem 0 .3rem; line-height: 1.25;
  text-shadow: 0 0 22px rgba(var(--accent-rgb), .25);
}
/* No subgrid a faixa das tags tem a altura da carta com mais tags. Sem
   align-items, as tags das outras esticam e viram cápsulas enormes. */
.slot__meta {
  display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start;
  gap: .3rem;
  /* sem isto o item de grid assume a largura do conteúdo e as etiquetas de uma
     carta invadem a coluna da carta vizinha */
  min-width: 0; justify-content: center;
}

.tag {
  font-size: .625rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase;
  padding: .22rem .55rem; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--border-muted); color: var(--text-tertiary);
  background: rgba(var(--text-rgb), .03);
  max-width: 100%;
}

/* O tema do baralho cigano é uma frase ("compromisso e contrato"), não um par
   de palavras como o naipe do tarô: precisa quebrar linha dentro da coluna. */
.tag--tema {
  white-space: normal; text-align: center; line-height: 1.4;
  letter-spacing: .05em; hyphens: auto;
}
.tag--maior { color: var(--violet); border-color: rgba(var(--violet-rgb), .35); background: rgba(var(--violet-rgb), .10); }

/* Porta da mesa: com o baralho fechado, o botão de embaralhar mora no centro,
   porque embaralhar é a única coisa que dá para fazer ali. */
.mesa__porta {
  display: grid; justify-items: center; gap: var(--sp-3);
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--sp-4);
  margin: var(--sp-4) 0 var(--sp-3);
  text-align: center;
  animation: surgir .5s var(--ease) both;
}
.mesa__porta-texto {
  margin: 0; color: var(--text-secondary); font-size: 1.0625rem;
}
.mesa__porta .btn { min-height: 54px; padding-inline: clamp(1.8rem, 5vw, 3rem); }

/* O botão de revelar chama atenção quando a última carta cai — uma vez, sem
   ficar pulsando para sempre. */
.btn.is-chamando { animation: chamar 1.1s var(--ease) 2; }
@keyframes chamar {
  0%, 100% { transform: none; }
  50%      { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .btn.is-chamando { animation: none; }
}

/* Enquanto a leitura está sendo escrita, os parágrafos não animam: eles são
   recriados a cada pedaço que chega e a animação reiniciava sem parar. */
.leitura__texto.is-escrevendo p,
.leitura__texto.is-escrevendo h3 { animation: none; }

/* Caixa de socorro: só aparece se a leitura paga falhar. */
.leitura__socorro {
  display: grid; gap: var(--sp-3); justify-items: start;
  margin-top: var(--sp-4); padding: var(--sp-4);
  border: 1px solid var(--border-strong); border-radius: 4px;
  background: var(--surface-alt);
}
.leitura__socorro p { margin: 0; color: var(--text-secondary); }
.leitura__corte {
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--border-muted);
  color: var(--text-tertiary); font-size: .9375rem;
}

/* ---------- 13. Pagamento ---------- */
.pagamento {
  background: linear-gradient(165deg, var(--surface), var(--surface-alt));
  border: 1px solid var(--border); border-radius: 4px;
  padding: clamp(1.4rem, 3.5vw, 2.5rem);
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
  animation: surgirEscala .6s var(--ease) .25s both;
}
.pagamento::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.pagamento.is-pago { border-color: var(--success); }

.pagamento__grade {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
}
.pagamento__titulo { font-size: clamp(1.4rem, 2.8vw, 1.9rem); line-height: 1.2; margin-bottom: var(--sp-3); }
.pagamento__itens { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: .5rem; }
.pagamento__itens li { position: relative; padding-left: 1.5rem; font-size: .9375rem; }
.pagamento__itens li::before {
  content: '✦'; position: absolute; left: 0; top: -.05em; color: var(--accent); font-size: .78rem;
}
.pagamento__preco {
  font-family: var(--font-display); font-size: 3.2rem; line-height: 1;
  color: var(--text); margin: 0; display: flex; align-items: baseline; gap: .25rem; flex-wrap: wrap;
}
.pagamento__preco span { font-size: 1.25rem; color: var(--accent); }
.pagamento__preco small { font-size: 1.5rem; color: var(--text-secondary); }
.pagamento__preco em {
  font-family: var(--font-body); font-style: normal; font-size: .8125rem;
  color: var(--text-tertiary); letter-spacing: .04em; margin-left: .45rem;
}

.pagamento__pix { display: grid; gap: .7rem; }
.qr {
  width: min(220px, 100%); aspect-ratio: 1; margin: 0 auto .4rem;
  background: var(--text); border-radius: 4px; padding: 10px;
  display: grid; place-items: center; box-shadow: var(--shadow-md);
}
.qr svg, .qr img { width: 100%; height: 100%; display: block; }
.qr__carregando { display: grid; place-items: center; }
.qr:empty { display: none; }

.copia { display: flex; gap: .4rem; }
.copia__campo {
  flex: 1; min-width: 0; min-height: 46px;
  font-family: var(--font-body); font-size: .75rem;
  color: var(--text-secondary); background: var(--bg-deep);
  border: 1px solid var(--border-muted); border-radius: 3px; padding: .7rem .8rem;
  text-overflow: ellipsis;
}
.copia__campo:focus { outline: none; border-color: var(--accent); color: var(--text); }
.copia__btn {
  flex: none; min-height: 46px; padding: 0 1rem;
  font-family: var(--font-ritual); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text); background: transparent;
  border: 1px solid var(--border-strong); border-radius: 3px; cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.copia__btn:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.copia__btn.is-ok { background: var(--success); border-color: var(--success); color: var(--bg); }

.pagamento__btn { width: 100%; margin-top: .2rem; }
.pagamento__estado { margin: 0; font-size: .875rem; color: var(--accent); min-height: 1.4em; }
.pagamento__estado.is-erro { color: var(--error); }
.pagamento__estado.is-ok { color: var(--success); }
.pagamento__estado .girando { display: inline-block; vertical-align: -3px; margin-right: .5rem; width: 14px; height: 14px; }
.pagamento__codigo {
  margin: 0; font-size: .8125rem; color: var(--text-secondary);
  border-top: 1px solid var(--border-muted); padding-top: .6rem;
}
.pagamento__codigo code {
  font-size: .8125rem; letter-spacing: .06em; color: var(--accent);
  background: rgba(var(--accent-rgb), .08); padding: .12rem .4rem; border-radius: 3px;
}
.pagamento__codigo small { display: block; margin-top: .3rem; font-size: .75rem; color: var(--text-tertiary); line-height: 1.5; }

.pagamento__modo {
  margin: 0; font-size: .75rem; color: var(--text-tertiary); line-height: 1.5;
  border-top: 1px solid var(--border-muted); padding-top: .55rem;
}
.pagamento__modo.is-demo { color: var(--warning); }

/* ---------- 14. Leitura ---------- */
.leitura {
  display: block;
  background: linear-gradient(165deg, var(--surface), var(--surface-alt));
  border: 1px solid var(--border-muted); border-radius: 4px;
  padding: clamp(1.4rem, 4vw, 2.75rem); box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.leitura::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.leitura__estado { display: flex; align-items: center; gap: .9rem; color: var(--text-tertiary); font-size: .9375rem; }
.leitura__estado p { margin: 0; }
.leitura__estado[hidden] { display: none; }
.girando {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--border-strong); border-top-color: var(--accent);
  animation: girar .9s linear infinite;
}
.leitura__texto { font-family: var(--font-display); font-size: 1.28rem; line-height: 1.72; color: var(--text-secondary); }
.leitura__texto h3 {
  font-family: var(--font-ritual); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin: var(--sp-5) 0 .7rem;
}
.leitura__texto h3:first-child { margin-top: 0; }
.leitura__texto p { margin: 0 0 1.1rem; animation: surgir .5s var(--ease) both; }
.leitura__texto strong { color: var(--text); font-weight: 600; }
.leitura__texto em { color: var(--accent-soft); font-style: italic; }

.copiado { font-size: .8125rem; color: var(--success); }
.permalink { font-size: .8125rem; color: var(--text-tertiary); margin: var(--sp-4) 0 0; }
.permalink a { word-break: break-all; }

/* ---------- 15. FAQ ---------- */
.faq { display: grid; gap: .55rem; }
.faq__item {
  background: var(--surface); border: 1px solid var(--border-muted); border-radius: 3px;
  padding: 1rem 1.2rem; transition: border-color .3s ease, background .3s ease;
}
.faq__item:hover { border-color: var(--border); }
.faq__item[open] { background: var(--surface-alt); border-color: var(--border); }
.faq__item summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 1.22rem; color: var(--text);
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+'; font-family: var(--font-body); font-size: 1.3rem; color: var(--accent);
  transition: transform .3s var(--ease); flex: none;
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { margin: .7rem 0 0; font-size: 1rem; animation: surgir .4s var(--ease) both; }

/* ---------- 16. Rodapé ---------- */
/* Rodapé.

   Antes era um parágrafo só, de 13px em cor apagada, misturando três coisas que
   nada têm a ver entre si: crédito das imagens do tarô, crédito do cigano e o
   aviso legal. Sem hierarquia, ninguém lia nada — inclusive o aviso, que é
   justamente o que precisa ser lido.

   Agora são três faixas separadas por fio: marca e última chamada, duas colunas
   de assunto, e a base. Elevação por FIO, nunca por sombra, como no resto do site. */
.rodape {
  border-top: 1px solid var(--border-muted);
  background: var(--bg-deep);
  padding: var(--sp-6) 0 var(--sp-5);
}

.rodape__topo {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); padding-bottom: var(--sp-5);
}
.rodape__marca {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 600;
  color: var(--text); text-decoration: none;
  transition: color 160ms ease-out;
}
.rodape__marca:hover { color: var(--accent-soft); }
.rodape__marca-fino { color: var(--accent); }
.rodape__estrela { width: 17px; height: 17px; fill: var(--accent); flex: none; }
.rodape__lema { margin: .35rem 0 0; font-size: .9375rem; color: var(--text-tertiary); }

.rodape__colunas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4) clamp(2rem, 6vw, 5rem);
  padding: var(--sp-5) 0;
  border-top: 1px solid var(--border-muted);
  border-bottom: 1px solid var(--border-muted);
}
.rodape__rotulo {
  font-family: var(--font-ritual); font-size: .62rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 var(--sp-3);
}
/* O texto do rodapé sobe para 14px e para a cor secundária: aqui mora o aviso
   de que a leitura não substitui médico nem advogado, e esconder isso em
   cinza de 13px não protege ninguém. */
.rodape__bloco p {
  margin: 0 0 .7rem; font-size: .875rem; line-height: 1.6;
  color: var(--text-secondary); max-width: 46ch;
}
.rodape__bloco p:last-child { margin-bottom: 0; }
.rodape__bloco b { color: var(--text); font-weight: 500; }

.rodape__base {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding-top: var(--sp-4);
  font-size: .8125rem; color: var(--text-tertiary);
}
.rodape__base p { margin: 0; }
.rodape__topo-link {
  color: var(--text-tertiary); text-decoration: none;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
.rodape__topo-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.rodape__topo-link:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; }

@media (max-width: 620px) {
  .rodape__colunas { grid-template-columns: 1fr; gap: var(--sp-5); }
  .rodape__topo { flex-direction: column; align-items: stretch; }
  .rodape__topo .btn { justify-self: start; }
}

/* ---------- 17. Animações ---------- */
@keyframes surgir       { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes surgirEscala { from { opacity: 0; transform: scale(.94) translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes revelarMask  { from { clip-path: inset(0 0 100% 0); opacity: 0; } to { clip-path: inset(0 0 -12% 0); opacity: 1; } }
@keyframes distribuir   { from { opacity: 0; transform: translate(-50%, 120px) rotate(0deg) scale(.72); } to { opacity: 1; transform: var(--pose); } }
@keyframes girar        { to { transform: rotate(360deg); } }
@keyframes pulsar       { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35) rotate(18deg); } }
@keyframes fluirOuro    { to { background-position: 220% 50%; } }
@keyframes varredura    { from { transform: translateX(-120%) skewX(-18deg); opacity: 0; } 40% { opacity: .5; } to { transform: translateX(120%) skewX(-18deg); opacity: 0; } }
@keyframes tremer       { 0% { transform: translateY(-10px) rotate(-3deg); } 100% { transform: none; } }

/* ---------- 18. Responsivo ---------- */
@media (max-width: 900px) {
  .hero__interno { grid-template-columns: 1fr; }
  .hero__leque { height: 260px; order: -1; }
  .pagamento__grade { grid-template-columns: 1fr; }
  .pagamento__pix { border-top: 1px solid var(--border-muted); padding-top: var(--sp-4); }
}

@media (max-width: 620px) {
  /* No celular o passo cresce: cada carta cobria metade da seguinte e sobrava
     uma faixa tocavel de 34px, abaixo do mínimo confortável para o dedo.
     Com 44px a sobreposição é menor, o leque fica mais alto — e acerta. */
  :root { --carta-l: calc(72px * var(--carta-fator)); --carta-passo: calc(44px * var(--carta-fator)); }
  .nav__marca { font-size: 1.05rem; }
  .nav .btn--pequeno { font-size: .62rem; letter-spacing: .1em; padding: 0 .8rem; }
  .leitura__texto { font-size: 1.18rem; }
  .mesa-revelada { gap: .7rem; }
  /* Cinco colunas num celular dão cartas de 58px — ilegíveis, e ainda estouram
     a largura da tela. No telefone a mesa desce para três colunas e duas linhas. */
  .mesa-revelada--cinco { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mesa-revelada--cinco .slot__nome { font-size: .95rem; }
  .slot__nome { font-size: .95rem; }
  .slot__pos { font-size: .56rem; letter-spacing: .1em; }
  .tag { font-size: .55rem; padding: .18rem .45rem; letter-spacing: .03em; }
  .etapa__acoes .btn { flex: 1 1 100%; }
}

@media (max-width: 400px) {
  :root { --carta-l: calc(64px * var(--carta-fator)); --carta-passo: calc(40px * var(--carta-fator)); }
  .passo__rotulo { display: none; }
}

/* ---------- 19. Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .slot__carta::after { display: none; }
}

/* ---------- 20. Impressão ---------- */
@media print {
  .nav, .ceu, .hero, .secao, .passos, .etapa__acoes, .pagamento, .alerta-servidor { display: none !important; }
  body { background: none; color: var(--bg); }
  .leitura { box-shadow: none; border-color: var(--bg); }
}