/* ── main.css — reset, tokens, layout raiz ─────────────────────────────── */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --color-primary:  #1A3C2E;
  --color-accent:   #C5A028;
  --color-accent-dk:#a0811e;
  --color-bg:       #FAF8F3;
  --color-surface:  #FFFFFF;
  --color-text:     #2C2C2C;
  --color-muted:    #888888;
  --color-border:   #E2DDD5;
  --color-mark:     #fde047;
  --color-mark-bg:  #fefce8;
  --hero-grad-mid:  #F0EDE4;
  --hero-grad-end:  #E8E4DB;
  --header-bg:      rgba(255,255,255,0.97);

  --font-serif: 'EB Garamond', Georgia, serif;
  --font-sans:  'Inter', system-ui, sans-serif;

  --space-xs:  0.25rem;   /*  4px */
  --space-sm:  0.5rem;    /*  8px */
  --space-md:  0.75rem;   /* 12px */
  --space-lg:  1rem;      /* 16px */
  --space-xl:  1.5rem;    /* 24px */
  --space-2xl: 2rem;      /* 32px */
  --space-3xl: 2.5rem;    /* 40px */

  --radius:  8px;
  --radius-lg: 16px;
  --shadow:  0 2px 16px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.12);

  --max-width-app: 1200px;

  --transition: 0.25s ease;
}


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

html { height: 100%; }

/* ── Transição de entrada/saída entre catecismos ─────────────────────────── */
@keyframes _page-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}
#app { animation: _page-in 0.35s ease; }

body.page-saindo #app {
  animation: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ── Acessibilidade ──────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── App shell ───────────────────────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Modo busca: trava altura em 100vh para scroll independente dos painéis */
#app.estado-busca {
  height: 100dvh;
  overflow: hidden;
}

/* ── Estado inicial — busca centralizada (Spotlight) ────────────────────── */
#app.estado-inicial #hero         { display: flex; }
#app.estado-busca   #hero         { display: none; }
#app.estado-leitura #hero         { display: none; }
#app.estado-inicial #painel-busca { display: none; }
#app.estado-leitura #painel-busca { display: none; }

/* ── Estado de leitura ───────────────────────────────────────────────────── */
#app.estado-leitura {
  height: 100dvh;
  overflow: hidden;
}
#app.estado-leitura #busca-topo      { display: none; }
#app:not(.estado-leitura) #leitor-container { display: none; }

#hero {
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  padding: var(--space-2xl) var(--space-lg) 3rem;
  text-align: center;
  position: relative;
  background: linear-gradient(
    160deg,
    var(--color-bg) 0%,
    var(--hero-grad-mid) 55%,
    var(--hero-grad-end) 100%
  );
}

#hero .logo {
  width: 108px;
  height: auto;
  border-radius: 18px;
  transition: transform 0.3s ease;
}

#hero .logo:hover {
  transform: translateY(-3px);
}

#hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 500;
  color: var(--color-primary);
  line-height: 1.2;
  max-width: 520px;
  margin-top: var(--space-xs);
  letter-spacing: -0.01em;
}

#hero .tagline {
  font-size: 0.95rem;
  color: var(--color-muted);
  max-width: 400px;
  margin-top: calc(-1 * var(--space-sm));
  line-height: 1.55;
}

/* ── Link discreto entre catecismos ─────────────────────────────────────── */
.btn-outro-catecismo {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--color-muted);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.15s;
  margin-top: calc(-1 * var(--space-md));
}
.btn-outro-catecismo:hover { color: var(--color-primary); }

/* ── Estado de busca ativa ───────────────────────────────────────────────── */
#app.estado-busca #busca-topo {
  display: flex;
}
#app.estado-inicial #busca-topo {
  display: none;
}

/* Header externo: full-width, sticky */
#busca-topo {
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 12px rgba(0,0,0,0.07);
  flex-shrink: 0;
}

/* Inner wrapper: max-width centrado */
.busca-topo-inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-xl);
  max-width: var(--max-width-app);
  margin: 0 auto;
  width: 100%;
}

.btn-home {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  color: var(--color-muted);
  transition: color var(--transition), background var(--transition);
}

.btn-home:hover {
  color: var(--color-primary);
  background: var(--color-bg);
}

/* ── Tema de sugestões rápidas (estado inicial) ──────────────────────────── */
#temas-rapidos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  max-width: 540px;
  margin-top: var(--space-sm);
}

#temas-rapidos button {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-primary);
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--color-border);
  border-radius: 100px;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform 0.15s ease, box-shadow 0.15s ease;
}

#temas-rapidos button:hover {
  background: #FFFFFF;
  border-color: var(--color-accent);
  color: var(--color-accent-dk);
  box-shadow: 0 2px 8px rgba(197,160,40,0.15);
  transform: translateY(-1px);
}

#temas-rapidos button:active {
  transform: scale(0.97);
}

/* ── mark global ─────────────────────────────────────────────────────────── */
mark {
  background: var(--color-mark);
  color: inherit;
  border-radius: 2px;
  padding: 0 2px;
}

/* ── Animações ───────────────────────────────────────────────────────────── */

/* Hero aparece com fade-in */
#hero {
  animation: fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Cards de resultado deslizam ao aparecer */
.grupo-parte {
  animation: fadeIn 0.2s ease both;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Transição suave do estado inicial → busca ativa */
#busca-topo {
  transition: box-shadow 0.2s ease;
}

/* ── Prefer reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Sugestão de variante ────────────────────────────────────────────────── */
.sugestao-variante {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.45rem var(--space-lg);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.sugestao-variante.oculto { display: none; }

.sugestao-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: 100px;
  background: var(--color-surface);
  color: var(--color-primary);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.15rem 0.6rem;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.sugestao-btn:hover {
  border-color: var(--color-accent);
  background: var(--color-bg);
}

.sugestao-count {
  font-size: 0.68rem;
  color: var(--color-muted);
}

/* ── Utilitários ─────────────────────────────────────────────────────────── */
.oculto { display: none !important; }

/* ── Frame "app" — borda dourada em telas com espaço ────────────────────── */
@media (min-width: 860px) {
  html {
    /* Fundo sólido fora do #app */
    background: #C5A028;
    min-height: 100%;
  }

  body {
    padding: 1.25rem;
    background: transparent;
  }

  #app {
    border-radius: 20px;
    background: var(--color-bg);
    /* overflow: hidden para respeitar o border-radius nas bordas */
    overflow: hidden;
    /* Anel dourado + sombra profunda */
    box-shadow:
      0 0 0 2px rgba(197, 160, 40, 0.75),   /* borda dourada */
      0 0 0 4px rgba(197, 160, 40, 0.12),    /* halo suave    */
      0 24px 60px rgba(0, 0, 0, 0.18),       /* sombra grande */
      0 6px 18px rgba(0, 0, 0, 0.12);        /* sombra próxima*/
    min-height: calc(100dvh - 2.5rem);
  }

  /* Em modo busca e leitura a altura fica travada — desconta o padding */
  #app.estado-busca,
  #app.estado-leitura {
    height: calc(100dvh - 2.5rem);
    min-height: 0;
  }
}

/* ── Badge beta ──────────────────────────────────────────────────────────── */
.badge-beta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-dk);
  background: rgba(197,160,40,0.12);
  border: 1px solid rgba(197,160,40,0.35);
  border-radius: 100px;
  padding: 0.15rem 0.5rem;
  vertical-align: middle;
  margin-left: 0.4rem;
  position: relative;
  top: -0.15em;
}

/* ── Botão contribuir hero ───────────────────────────────────────────────── */
@keyframes apoiar-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(176, 48, 32, 0.28); }
  60%       { box-shadow: 0 0 0 7px rgba(176, 48, 32, 0); }
}

@keyframes heart-beat {
  0%, 100% { transform: scale(1); }
  30%       { transform: scale(1.25); }
  50%       { transform: scale(1.1); }
}

#btn-contribuir-hero {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: #9a2020;
  background: rgba(176, 48, 32, 0.08);
  border: 1.5px solid rgba(176, 48, 32, 0.28);
  border-radius: 100px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
  animation: apoiar-pulse 2.8s ease-in-out 1.5s infinite;
  transition: color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
}

#btn-contribuir-hero svg {
  animation: heart-beat 2.8s ease-in-out 1.5s infinite;
  color: #c0392b;
}

#btn-contribuir-hero:hover {
  color: #7a1a1a;
  background: rgba(176, 48, 32, 0.14);
  border-color: rgba(176, 48, 32, 0.5);
  animation: none;
  box-shadow: none;
}

#btn-contribuir-hero:hover svg {
  animation: none;
  transform: scale(1.15);
}

/* No header (estado busca) — ícone animado, sem texto */
#btn-contribuir-header svg {
  color: #c0392b;
  animation: heart-beat 2.8s ease-in-out 1.5s infinite;
}

#btn-contribuir-header:hover svg {
  animation: none;
  transform: scale(1.15);
}

/* ── Modal contribuição ──────────────────────────────────────────────────── */
#modal-contribuicao-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

#modal-contribuicao {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  max-width: 380px;
  width: 100%;
  position: relative;
  box-shadow: var(--shadow-md);
  text-align: center;
}

#modal-contribuicao-fechar {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 28px;
  height: 28px;
  border: none;
  background: var(--color-bg);
  border-radius: 50%;
  color: var(--color-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
}

#modal-contribuicao-fechar:hover {
  background: var(--color-border);
  color: var(--color-text);
}

.modal-icone {
  margin-bottom: var(--space-sm);
}

#modal-contribuicao h2 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.modal-descricao {
  font-size: 0.88rem;
  color: var(--color-muted);
  line-height: 1.55;
  margin-bottom: var(--space-lg);
}

/* ── Seletor de valor ──────────────────────────────────────────────────────── */
.pix-valores {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: var(--space-lg);
}

.pix-valor-btn {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 0;
  border-radius: var(--radius);
  border: 1.5px solid var(--color-border);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}

.pix-valor-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-dk);
}

.pix-valor-btn.ativo {
  border-color: var(--color-accent);
  background: rgba(197,160,40,0.1);
  color: var(--color-accent-dk);
}

/* ── QR Code ───────────────────────────────────────────────────────────────── */
#pix-qr-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--space-lg);
}

#pix-qr-img {
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  display: block;
}

.pix-qr-hint {
  font-size: 0.72rem;
  color: var(--color-muted);
  margin-top: 0.5rem;
}

/* ── Chave PIX ─────────────────────────────────────────────────────────────── */
.pix-container {
  margin-bottom: var(--space-md);
  text-align: center;
}

#btn-copiar-pix {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-accent-dk);
  background: rgba(197,160,40,0.12);
  border: 1px solid rgba(197,160,40,0.3);
  border-radius: var(--radius);
  padding: 0.45rem 1.1rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition);
}

#btn-copiar-pix:hover {
  background: rgba(197,160,40,0.22);
}

/* ── Toggle QR (só mobile) ─────────────────────────────────────────────────── */
#btn-toggle-qr {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-muted);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.4rem 0;
  cursor: pointer;
  margin-bottom: var(--space-md);
  transition: color var(--transition), border-color var(--transition);
}

#btn-toggle-qr:hover {
  color: var(--color-text);
  border-color: var(--color-muted);
}

/* Mobile: header compacto sem botão de leitura */
@media (max-width: 767px) {
  .busca-topo-inner {
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
  }
}

/* Mobile: inverte defaults */
@media (max-width: 600px) {
  #pix-qr-area { display: none; }
  #btn-toggle-qr { display: flex; }

  #btn-contribuir-hero {
    top: var(--space-md);
    right: var(--space-md);
    font-size: 0.72rem;
    padding: 0.35rem 0.75rem;
  }
}

/* Modo QR ativo (mobile toggle) */
#modal-contribuicao.qr-ativo #pix-qr-area  { display: flex; }
#modal-contribuicao.qr-ativo #btn-toggle-qr {
  color: var(--color-accent-dk);
  border-color: var(--color-accent);
}

/* ── Meta mensal ───────────────────────────────────────────────────────────── */
.meta-container {
  text-align: left;
  margin-top: var(--space-lg);
}

.meta-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-bottom: var(--space-xs);
}

.meta-valor strong {
  color: var(--color-primary);
}

.meta-barra {
  height: 6px;
  background: var(--color-border);
  border-radius: 100px;
  overflow: hidden;
}

.meta-progresso {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dk));
  border-radius: 100px;
  min-width: 0;
  transition: width 0.5s ease;
}

/* ── Badge de versão ──────────────────────────────────────────────────────── */
#app-version:empty { display: none; }