/* =====================================================================
   Site público · padrão visual único (mesma base do painel), mais clean:
   branco e cinzas neutros; o azul só onde é ação (botão principal, links, item ativo do menu).
   Esquemas iguais em todas as páginas: topo de página (título + frase de apoio), seções, cartões, ícones neutros.
   ===================================================================== */
:root {
  --accent-soft: #f1f3f6;      /* fundos de ícone, etiquetas, botão suave: neutros (antes azul-claro) */
  --ink-2: #3f4651;
  --surface: #f6f7f9;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-hover: 0 8px 24px -10px rgba(16, 24, 40, .18);
}

/* topo das páginas: sempre título + frase de apoio, mesmo espaçamento */
.pagehead { padding: 48px 0 24px; }
.pagehead h1 { margin-bottom: .25em; }
.pagehead__lead { font-size: 1.08rem; color: var(--muted); max-width: 62ch; }
@media (max-width: 700px) { .pagehead { padding: 32px 0 16px; } }

/* seções: título simples, mesma distância */
.sec-head h2 { letter-spacing: -.015em; }

/* cartões: branco, borda fina, cantos 16, sombra leve; ao passar o mouse, só a sombra cresce (sem borda azul) */
.card, .card-link, .action, .way, .ccard, .cbox, .church, .testemunho-cta, .cmini a, .ceia__list a, .bank, .vcard, .nextbar__btn {
  border-color: var(--line); box-shadow: var(--shadow); }
.card-link:hover, button.action:hover, .way:hover, .testemunho-cta:hover, .cmini a:hover, .ceia__list a:hover, .ccard:hover {
  border-color: var(--line-2); background: #fff; box-shadow: var(--shadow-hover); }
.church:target { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(22, 25, 31, .12); }

/* ícones: círculo cinza-claro, traço escuro (iguais em todo o site) */
.action__ic, .nextbar__ic, .card-link__ic, .way__ic { background: var(--accent-soft); color: var(--ink-2); }
.cmini a > .i:first-child { background: var(--accent-soft); color: var(--ink-2); }
.cmini a > .i:last-child, .ccard__next .i, .cpage__next .i, .cbox__h .i, .doc-ask .i { color: var(--muted); }
.nextbar__btn b { color: var(--ink); }
.nextbar__btn:hover .nextbar__chev { color: var(--ink); }

/* botões: principal azul; secundário branco com borda; suave cinza */
.btn--soft { background: var(--accent-soft); color: var(--ink); }
.btn--soft:hover { background: #e7eaee; }
.btn--ghost { color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }

/* abas e seletores: o escolhido em escuro, não em azul */
.tabs [role="tab"][aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.tabs [role="tab"][aria-selected="true"]:hover { background: #000; }

/* etiquetas e selos: neutros */
.tag { background: var(--accent-soft); color: var(--ink-2); }
.ccard__ceia, .cpage__ceia { background: var(--ink); color: #fff; }
.ceia__list .is-next a { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ceia__list .is-next .ceia__date { background: var(--ink); color: #fff; }
.ceia__list .is-next .ceia__txt > small { color: var(--ink); }

/* textos longos (Pontos doutrinários, História): citação em cinza, títulos em preto */
.doc-h3 { color: var(--ink); }
.doc-hl { color: inherit; font-weight: 600; }
.doc-quote { background: var(--surface); border-left-color: var(--line-2); }
.doc-quote cite { color: var(--muted); }
.doc-toc a:hover, .doc-toc a.is-on { color: var(--ink); border-left-color: var(--ink); }

/* campos: foco azul (ação); sugestões em cinza */
.suggest li[aria-selected="true"], .suggest li:hover { background: var(--accent-soft); }

/* navegação: topo branco com linha fina; item ativo em azul (único destaque do menu) */
.topbar { box-shadow: none; border-bottom: 1px solid var(--line); }
.footer { background: var(--surface); }

/* abas (muitas opções): texto com linha embaixo, igual ao painel */
.tabs, .tabs--scroll { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tabs [role="tab"] { flex: none; min-height: 44px; padding: 0 14px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--muted); font-weight: 600; font-size: .95rem; }
.tabs [role="tab"]:hover { background: none; color: var(--ink); }
.tabs [role="tab"][aria-selected="true"], .tabs [role="tab"][aria-selected="true"]:hover { background: none; color: var(--accent); border-bottom-color: var(--accent); }
/* escolha entre 2 opções (formulários): grupo contornado, a escolhida em cinza */
.seg { border: 1px solid var(--line-2); background: #fff; border-radius: 12px; }
.seg__b { border-radius: 9px; min-height: 44px; }
.seg__b[aria-pressed="true"] { background: var(--accent-soft); box-shadow: none; }

/* rodapé: as duas informações na mesma linha e na mesma altura */
.footer__in { align-items: center; justify-content: space-between; }
.footer__in > * { font-size: .9rem; line-height: 1.4; padding: 8px 0; }
.footer__in span:first-child { color: var(--muted); font-weight: 500; }
@media (max-width: 520px) { .footer__in { justify-content: center; } }

/* Igrejas: grade igual para todas, separada por estado */
.igr { padding-bottom: 56px; }
.igr__uf { margin: 32px 0 14px; font-size: 1.15rem; }
.igr__uf:first-child { margin-top: 8px; }
.igr__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.igr__card { position: relative; display: flex; flex-direction: column; height: 100%; border: 1px solid var(--line); border-radius: var(--r); background: #fff; box-shadow: var(--shadow); overflow: hidden; color: var(--ink); text-decoration: none; transition: box-shadow .2s ease, border-color .2s ease; }
.igr__card:hover { border-color: var(--line-2); box-shadow: var(--shadow-hover); }
.igr__img { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--surface); }
.igr__img img:not(.igr__aguia) { width: 100%; height: 100%; object-fit: cover; }
.igr__aguia { display: none; }
.igr__img--vazia { display: grid; place-items: center; }
.igr__img--vazia .igr__aguia { display: block; width: 72px; opacity: .35; filter: grayscale(1); }
.igr__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 44px 18px 18px; }
.igr__city { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; }
.igr__city small { font-size: .8rem; font-weight: 600; color: var(--muted); }
.igr__line { display: flex; align-items: center; gap: 8px; font-size: .92rem; color: var(--muted); }
.igr__line .i { flex: none; width: 16px; height: 16px; }
.igr__tag { align-self: flex-start; margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--ink-2); font-size: .8rem; font-weight: 600; }
.igr__go { position: absolute; right: 16px; bottom: 20px; color: var(--muted); }
.igr__go .i { width: 18px; height: 18px; }
.igr__card:hover .igr__go { color: var(--ink); }
@media (max-width: 960px) { .igr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .igr__grid { grid-template-columns: 1fr; gap: 12px; } }

/* Página não encontrada: no padrão das outras, com caminhos úteis */
.nf__in { max-width: 720px; text-align: center; }
.nf { padding: 72px 0 80px; }
.nf__aguia { width: 84px; margin: 0 auto 16px; opacity: .9; }
.nf__code { margin: 0 0 6px; font-size: .85rem; font-weight: 600; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.nf .pagehead__lead { margin: 0 auto 28px; }
.nf__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: left; }
.nf__link { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.nf__link:hover { border-color: var(--line-2); box-shadow: var(--shadow-hover); }
.nf__link > .i { flex: none; width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--accent-soft); color: var(--ink-2); }
.nf__link span { display: flex; flex-direction: column; line-height: 1.3; }
.nf__link small { color: var(--muted); font-size: .85rem; }
@media (max-width: 700px) { .nf { padding: 40px 0 56px; } .nf__links { grid-template-columns: 1fr; } }

/* trilha de navegação (páginas de detalhe): "Igrejas / Limeira", como no painel */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; font-size: .9rem; color: var(--muted); }
.crumbs a { color: var(--accent); font-weight: 500; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span[aria-hidden] { color: #a5abb4; }

/* página de uma igreja: mesmo topo das outras (título + informações), a foto embaixo */
.cpage { padding-top: 40px; }
.cpage__head h1 { margin: 0 0 8px; font-size: clamp(2rem, 4vw, 2.6rem); }
.cpage__head h1 small { font-size: .45em; font-weight: 600; color: var(--muted); }
.cpage__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 0 0 20px; color: var(--muted); font-size: 1rem; }
.cpage__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.cpage__meta .i { width: 18px; height: 18px; flex: none; }
.cpage__meta .igr__tag { margin: 0; gap: 6px; }
.cpage__meta .igr__tag .i { width: 14px; height: 14px; }
.cpage__photo { position: relative; margin: 0; aspect-ratio: 21 / 9; border-radius: var(--r); overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.cpage__photo img:not(.igr__aguia) { width: 100%; height: 100%; object-fit: cover; }
.cpage__photo.igr__img--vazia { display: grid; place-items: center; aspect-ratio: 21 / 6; }
.cpage__photo figcaption { position: absolute; right: 10px; bottom: 10px; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: .72rem; }
.cpage__back--end { display: inline-block; margin-top: 32px; }
@media (max-width: 700px) { .cpage { padding-top: 24px; } .cpage__photo { aspect-ratio: 16 / 10; } }

/* botões: cantos arredondados como no painel (não pílula) */
.btn { border-radius: 12px; }
.btn--sm { border-radius: 10px; }
.ceia__more { border: 1px solid var(--line-2) !important; color: var(--ink) !important; background: #fff !important; border-radius: 12px !important; }
.ceia__more:hover { border-color: var(--ink) !important; }
@media (max-width: 860px) { .card-link--full { flex-direction: column; align-items: flex-start; gap: 12px; } .card-link--full .card-link__go { margin-top: 4px; } }

/* WhatsApp: continua verde (inclusive ao passar o mouse) */
.way--whats { border-color: #137a40; }
.way.way--whats:hover { background: #0f6834; border-color: #0f6834; }

/* textos longos (História e Pontos doutrinários): o mesmo esquema de leitura */
.story, .doc-body { font-size: 1.08rem; line-height: 1.75; color: var(--ink); }
.story p, .doc-body > p { margin-bottom: 1.1em; }
.story__h, .doc-h2 { font-size: 1.4rem; font-weight: 700; letter-spacing: -.015em; }
.story__h { margin: 2em 0 .6em; padding-top: 24px; border-top: 1px solid var(--line); }
.doc-h3 { font-size: 1.12rem; font-weight: 600; }
.story__fig img, .doc-img img, img.doc-img { border-radius: var(--r); border: 1px solid var(--line); }
.story__fig figcaption, .doc-img figcaption { font-size: .9rem; color: var(--muted); }
/* índice da página: rótulo em frase normal (sem maiúsculas), igual aos títulos de seção */
.doc-toc__t { font-size: .95rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink); }
@media (max-width: 860px) { .doc-toc { border: 1px solid var(--line); background: #fff; border-radius: var(--r); padding: 16px 18px; } }
.ceia__head h2 { margin: 0 0 2px; }
.ceia__head small { font-size: .9rem; }

/* Conheça e acompanhe: Endereços e Horários em destaque, o resto em linha compacta */
.cards { grid-template-columns: repeat(6, 1fr); }
.card-link--destaque { grid-column: span 3; min-height: 0; }
.card-link--mini { grid-column: span 2; min-height: 0; flex-direction: row; align-items: center; gap: 14px; padding: 18px 20px; }
.card-link--mini .card-link__ic { margin: 0; flex: none; width: 44px; height: 44px; border-radius: 12px; }
.card-link--mini .card-link__ic .i { width: 24px; height: 24px; }
.card-link--mini h3 { font-size: 1.08rem; margin: 0 0 2px; }
.card-link--mini p { font-size: .92rem; line-height: 1.45; margin: 0; }
.card-link--full { grid-column: 1 / -1; }
.card-link__ic--big { width: 64px; height: 64px; border-radius: 18px; }
.card-link__ic--big .i { width: 38px; height: 38px; }
.card-link__ic { color: var(--accent); }
.card-link--full .card-link__ic { border-radius: 18px; }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } .card-link--destaque, .card-link--mini { grid-column: auto; } .card-link__ic--big { width: 56px; height: 56px; margin-bottom: 14px; } }

/* títulos sem palavra sozinha na última linha */
h1, h2, h3 { text-wrap: balance; }

/* reduzir movimento: janelas e esqueletos de carregamento sem animação */
@media (prefers-reduced-motion: reduce) { .modal, .vcard--skel .vcard__thumb { animation: none; } }


/* menu do celular: ícones alinhados mesmo quando o nome ocupa duas linhas (Dízimos e Ofertas) */
.tabbar { align-items: start; }
.tabbar span { text-align: center; }

/* topo no computador: página atual marcada, Dízimos contornado e Contato em destaque, com os mesmos ícones do menu do celular */
.nav a { color: var(--ink-2); }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
.topbar__btn { border-radius: 999px; padding: 8px 18px 8px 14px; }
.topbar__btn .i { width: 20px; height: 20px; }
.topbar .btn--ghost { color: var(--ink); border-color: var(--line-2); }
.topbar .btn--ghost:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* Rodapé sempre no pé: em página curta (404, privacidade) o conteúdo estica e o rodapé não fica suspenso */
body:has(> #conteudo) { display: flex; flex-direction: column; box-sizing: border-box; min-height: 100vh; min-height: 100dvh; } /* border-box: a folga da barra de atalhos do celular entra na altura */
#conteudo { flex: 1 0 auto; }