/* ==========================================================================
   PÁGINA DE CARTA (arcano) — Tarô do Yoga
   Escrita MOBILE FIRST: a base é o telefone, o computador entra em 900px.
   Usa as cores e fontes que já existem no style.css do site.
   ========================================================================== */

.arcano-corpo {
  min-height: 100vh;
  padding: 10px 10px 40px;
}

/* O painel central de vidro escuro */
.arcano-painel {
  max-width: 1040px;
  margin: 0 auto;
  background: var(--bg-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border-glass);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  padding: 14px 12px 18px;
}

/* ---------- bloco principal: carta + texto ---------- */
.arcano-principal {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.arcano-coluna-carta {
  width: 100%;
  max-width: 148px;
  flex-shrink: 0;
}

/* ---------- a carta ---------- */
.arcano-carta {
  background: rgba(10, 6, 24, 0.55);
  border: 1px solid rgba(var(--accent-gold-rgb), 0.45);
  border-radius: 14px;
  padding: 9px 9px 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}

.arcano-carta-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.arcano-numero {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--accent-gold);
  min-width: 30px;
}

.arcano-nome-topo {
  flex: 1;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
  padding-right: 30px; /* compensa o número, para o nome ficar centrado de verdade */
}

.arcano-carta-arte {
  aspect-ratio: 2 / 3.5;
  /* a arte tem fundo transparente e canto arredondado: moldura reta aqui
     desenharia um retângulo em volta dela. Por isso, sem borda. */
}

.arcano-arte {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));
}

/* quando ainda não existe arte para o arcano */
.arcano-arte-vazia {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: 1px solid rgba(var(--accent-gold-rgb), 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(170deg, rgba(129, 79, 231, 0.18), rgba(10, 6, 24, 0.6));
  color: var(--accent-gold);
}

.arcano-arte-vazia i {
  font-size: 2.3rem;
}

.arcano-arte-vazia small {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* o termo embaixo, entre dois fios finos */
.arcano-carta-termo {
  margin-top: 10px;
  padding: 6px 3px;
  border-top: 1px solid rgba(var(--accent-gold-rgb), 0.35);
  border-bottom: 1px solid rgba(var(--accent-gold-rgb), 0.35);
  text-align: center;
  font-family: var(--font-serif);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-gold);
}

/* ---------- coluna do texto ---------- */
.arcano-coluna-texto {
  width: 100%;
}

.arcano-titulo {
  font-family: var(--font-serif);
  font-variant: small-caps;
  font-size: 1.02rem;
  line-height: 1.2;
  color: var(--accent-gold);
  margin-bottom: 8px;
}

.arcano-titulo-sub {
  display: block;
  font-size: 0.82rem;
  font-weight: 400;
  /* cor propria, nao o dourado do termo: tres linhas, tres cores, igual ao
     resultado da pagina inicial */
  color: var(--text-primary);
  opacity: 0.88;
  margin-top: 4px;
}

.arcano-arcano-maior {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.arcano-citacao {
  border-left: 3px solid var(--accent-cyan);
  padding: 2px 0 2px 13px;
  margin-bottom: 14px;
  font-style: italic;
  font-size: 0.84rem;
  color: var(--accent-cyan);
  line-height: 1.45;
}

.arcano-descricao {
  color: var(--text-secondary);
  line-height: 1.55;
  font-size: 0.85rem;
}

.arcano-descricao strong {
  color: var(--accent-gold);
  font-weight: 600;
}

/* ---------- caixa: encontrar professor ---------- */
.arcano-convite {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 12px;
  border: 1px solid var(--border-glass);
  border-radius: 16px;
  background: rgba(0, 240, 255, 0.05);
}

.arcano-convite-icone {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 240, 255, 0.1);
  color: var(--accent-cyan);
  font-size: 0.95rem;
}

.arcano-convite h2,
.arcano-professor h2 {
  font-family: var(--font-serif);
  font-size: 0.94rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.arcano-convite p,
.arcano-professor p {
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 10px;
  font-size: 0.83rem;
}

.arcano-botao-ouro,
.arcano-botao-claro {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: var(--transition-smooth);
}

.arcano-botao-ouro {
  background: linear-gradient(135deg, var(--accent-gold), #f3d98b);
  color: var(--text-dark);
  box-shadow: var(--shadow-glow-gold);
}

.arcano-botao-ouro:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.arcano-link-artigos {
  display: block;
  margin-top: 12px;
  color: var(--accent-cyan);
  font-size: 0.86rem;
  text-decoration: underline;
}

.arcano-link-artigos:hover {
  color: var(--text-primary);
}

/* ---------- caixa: professor ---------- */
.arcano-professor {
  display: flex;
  gap: 10px;
  margin-top: 11px;
  padding: 12px;
  border: 1px solid rgba(var(--accent-gold-rgb), 0.45);
  border-radius: 16px;
  background: rgba(var(--accent-gold-rgb), 0.05);
}

.arcano-professor-icone {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(var(--accent-gold-rgb), 0.12);
  color: var(--accent-gold);
  font-size: 0.95rem;
}

.arcano-botao-claro {
  background: var(--text-primary);
  color: var(--text-dark);
}

.arcano-botao-claro:hover {
  background: var(--accent-gold);
  transform: translateY(-2px);
}

/* ---------- rodapé da carta do dia e navegação ---------- */
.arcano-aviso-dia {
  max-width: 1040px;
  margin: 0 auto 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.arcano-voltar {
  max-width: 1040px;
  margin: 22px auto 0;
  text-align: center;
}

.arcano-voltar a {
  color: var(--accent-gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--accent-gold-rgb), 0.4);
  font-size: 0.95rem;
}

/* ---------- foco visível no teclado ---------- */
.arcano-painel a:focus-visible,
.arcano-voltar a:focus-visible {
  outline: 3px solid var(--accent-cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ==========================================================================
   COMPUTADOR
   ========================================================================== */
@media (min-width: 900px) {
  .arcano-corpo {
    padding: 36px 24px 80px;
  }

  .arcano-painel {
    padding: 40px 44px 46px;
  }

  .arcano-principal {
    flex-direction: row;
    align-items: flex-start;
    gap: 44px;
  }

  .arcano-coluna-carta {
    width: 300px;
    max-width: 300px;
  }

  /* o telefone encolheu tudo; aqui o computador volta ao tamanho cheio */
  .arcano-carta { padding: 12px 12px 14px; border-radius: 18px; }
  .arcano-numero { font-size: 0.95rem; min-width: 42px; }
  .arcano-nome-topo { font-size: 0.72rem; letter-spacing: 0.18em; padding-right: 42px; }
  .arcano-carta-termo { font-size: 0.95rem; letter-spacing: 0.22em; padding: 9px 4px; margin-top: 14px; }
  .arcano-arcano-maior { font-size: 1rem; margin-bottom: 18px; }
  .arcano-citacao { font-size: 1.05rem; line-height: 1.55; margin-bottom: 18px; padding: 4px 0 4px 16px; }
  .arcano-descricao { font-size: 1.02rem; line-height: 1.75; }
  .arcano-convite h2, .arcano-professor h2 { font-size: 1.15rem; }
  .arcano-convite p, .arcano-professor p { font-size: 0.95rem; margin-bottom: 16px; }
  .arcano-botao-ouro, .arcano-botao-claro { font-size: 1rem; padding: 13px 24px; }
  .arcano-convite-icone, .arcano-professor-icone { width: 44px; height: 44px; font-size: 1.15rem; }

  .arcano-titulo {
    font-size: 2.3rem;
  }

  .arcano-titulo-sub {
    display: block;
    font-size: 1.4rem;
    margin-top: 6px;
  }

  .arcano-convite,
  .arcano-professor {
    padding: 26px 28px;
  }
}

/* ==========================================================================
   PÁGINA DE TRABALHO: O POST DE HOJE (08/10/2026)
   Não é página de visitante — é onde o Arnoldo pega a arte e a legenda do dia.
   ========================================================================== */
.post-grade {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 18px 0 8px;
}

.post-peca {
  flex: 1 1 240px;
  text-align: center;
}

.post-peca img {
  width: 100%;
  max-width: 300px;
  border-radius: 12px;
  border: 1px solid rgba(var(--accent-gold-rgb), 0.3);
  display: block;
  margin: 0 auto 8px;
}

.post-peca figcaption {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.post-subtitulo {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--accent-gold);
  margin: 24px 0 10px;
}

.post-legenda {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border-glass);
  background: rgba(10, 6, 24, 0.55);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.86rem;
  line-height: 1.5;
  resize: vertical;
}

.post-acoes {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

@media (min-width: 900px) {
  .post-acoes { flex-direction: row; justify-content: flex-start; gap: 22px; }
  .post-legenda { font-size: 0.95rem; }
}

/* ==========================================================================
   CAIXA DO BARALHO PARA IMPRIMIR (produto pago) — 08/10/2026
   Vem por ÚLTIMO, depois dos dois convites do MaisYoga. É de propósito:
   mandar gente para o diretório vale mais que vender o PDF.
   Visual mais sóbrio que as outras caixas, para não competir com elas.
   ========================================================================== */
.arcano-baralho {
  display: flex;
  gap: 10px;
  margin-top: 11px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.arcano-baralho-icone {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  font-size: 0.95rem;
}

.arcano-baralho h2 {
  font-family: var(--font-serif);
  font-size: 0.94rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.arcano-baralho p {
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 10px;
  font-size: 0.83rem;
}

.arcano-botao-escuro {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 0.86rem;
  text-decoration: none;
  text-align: center;
  border: 1px solid rgba(var(--accent-gold-rgb), 0.55);
  color: var(--accent-gold);
  background: transparent;
  transition: var(--transition-smooth);
}

.arcano-botao-escuro:hover {
  background: rgba(var(--accent-gold-rgb), 0.12);
  transform: translateY(-2px);
}

@media (min-width: 900px) {
  .arcano-baralho { padding: 26px 28px; gap: 14px; margin-top: 18px; }
  .arcano-baralho-icone { width: 44px; height: 44px; font-size: 1.15rem; }
  .arcano-baralho h2 { font-size: 1.15rem; }
  .arcano-baralho p { font-size: 0.95rem; margin-bottom: 16px; }
  .arcano-botao-escuro { font-size: 1rem; padding: 13px 24px; }
}

/* O visual do COMPARTILHAR mudou-se para o style.css em 08/10/2026.
   Motivo: a página inicial também tem os botões, e ela NÃO carrega este
   arquivo — só as páginas de carta carregam. Com a regra aqui, os botões
   apareciam crus na página inicial. Regra usada nos dois lugares mora no
   style.css, que todo mundo carrega. */

/* ==========================================================================
   O TEXTO LONGO DA CARTA — 09/10/2026
   Cinco seções com título próprio. Antes cada página tinha 26 palavras em
   média, o que o Google trata como conteúdo raso. Agora passa de 350.
   Os títulos são h2 de verdade: é por eles que o buscador entende do que a
   página trata, e é por eles que quem usa leitor de tela navega.
   ========================================================================== */
.arcano-texto {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(var(--accent-gold-rgb), 0.18);
}

.arcano-texto h2 {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  color: var(--accent-gold);
  margin: 20px 0 8px;
}

.arcano-texto h2:first-child {
  margin-top: 0;
}

.arcano-texto p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.65;
  margin-bottom: 10px;
}

.arcano-texto p:last-child {
  margin-bottom: 0;
}

.arcano-texto strong {
  color: var(--accent-gold);
  font-weight: 600;
}

.arcano-texto em {
  color: var(--text-primary);
  font-style: italic;
}

@media (min-width: 900px) {
  .arcano-texto {
    margin-top: 34px;
    padding-top: 28px;
  }
  .arcano-texto h2 { font-size: 1.3rem; margin: 28px 0 10px; }
  .arcano-texto p { font-size: 1.02rem; line-height: 1.75; margin-bottom: 14px; }
}

/* ==========================================================================
   AS DUAS CAIXAS SECUNDÁRIAS LADO A LADO NO COMPUTADOR — 09/10/2026
   "Você dá aula de Yoga?" e "Quer o baralho na mão?" dividem a linha em tela
   grande. No celular continuam empilhadas: em 390px, duas colunas deixariam
   cada botão com menos de 170px, e botão apertado não é clicado.
   A caixa de cima (procurar professor) segue sozinha e inteira — é a
   principal e não divide espaço.
   ========================================================================== */
.arcano-duplo {
  display: flex;
  flex-direction: column;
}

@media (min-width: 900px) {
  .arcano-duplo {
    flex-direction: row;
    align-items: stretch;
    gap: 18px;
  }

  .arcano-duplo > section {
    flex: 1 1 0;
    margin-top: 18px;
    display: flex;
  }

  /* o corpo cresce para o botão encostar na base: sem isto, caixas de textos
     de tamanhos diferentes deixam os dois botões desalinhados */
  .arcano-duplo .arcano-professor-corpo,
  .arcano-duplo .arcano-baralho-corpo {
    display: flex;
    flex-direction: column;
  }

  .arcano-duplo .arcano-professor-corpo p,
  .arcano-duplo .arcano-baralho-corpo p {
    flex: 1 0 auto;
  }

  .arcano-duplo .arcano-botao-claro,
  .arcano-duplo .arcano-botao-escuro {
    align-self: flex-start;
  }
}

/* ==========================================================================
   PÁGINA INICIAL EM INGLÊS — 09/10/2026
   Mais simples que a portuguesa de propósito: aqui não há baralho animado.
   Ver o comentário no sorteio.js.
   ========================================================================== */
.en-abertura {
  max-width: 760px;
  margin: 0 auto 10px;
  padding: 20px 16px 6px;
  text-align: center;
}

.en-abertura h1 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--accent-gold);
  margin-bottom: 14px;
}

.en-abertura p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 16px;
}

.en-abertura strong {
  color: var(--text-primary);
}

.en-acao button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  font-size: 1rem;
}

.en-hoje a {
  color: var(--accent-cyan);
  font-size: 0.88rem;
}

#sorteio {
  margin-bottom: 10px;
}

/* o botão de trocar de idioma, no menu do topo */
.nav-idioma {
  color: var(--accent-cyan);
  border: 1px solid rgba(0, 240, 255, 0.35);
}

.nav-idioma:hover {
  background: rgba(0, 240, 255, 0.1);
}

@media (min-width: 900px) {
  .en-abertura {
    padding: 40px 24px 10px;
  }
  .en-abertura h1 { font-size: 2.4rem; margin-bottom: 18px; }
  .en-abertura p { font-size: 1.1rem; }
}