/*
 * O site da igreja em subdomínio (FEATURE-033).
 *
 * Visual da fase 6 (26/09/2026), no estilo que o dono escolheu — a PIB Curitiba:
 * topo branco, banner com foto, pílulas, grade de atalhos com ícone, ondas,
 * faixas em dois tons, faixa curva e rodapé escuro. Montserrat nos títulos,
 * Roboto no texto, Alegreya itálico nos destaques.
 *
 * Arquivo estático, e não Vite nem `<style>` na página: o CSP do site
 * (`CabecalhosDoSitePublico`) só aceita estilo do próprio endereço, e barra o
 * inline. **As cores e a capa chegam como variáveis por `/tema.css`**, com os
 * valores de `tsistemas` e o caminho da capa validados no servidor, e os tons
 * derivados (escura, clara) já calculados lá, com o texto escolhido pelo
 * contraste.
 *
 * ⚠️ Cada site é conteúdo escrito por uma igreja: título comprido, endereço
 * longo, nome de culto enorme. Todo texto aqui quebra linha em vez de empurrar
 * a página para o lado (`overflow-wrap: anywhere`), e o que rola de lado (as
 * pílulas) rola **dentro de si**.
 */

:root {
    /* Os padrões, para a página nunca sair sem cor se o `/tema.css` falhar. */
    --site-primaria: #4154f1;
    --site-texto-primaria: #ffffff;
    --site-escura: #2a3699;
    --site-texto-escura: #ffffff;
    --site-clara: #eceefe;
    --site-texto-clara: #1f2937;
    --site-capa: none;
    --site-barra: #ffffff;
    --site-texto-barra: #1f2937;
    --site-destaque: #4154f1;
    --site-destaque-no-escuro: #8f9bf7;
    --site-clara-no-escuro: #1d2552;
    --site-texto-clara-no-escuro: #ffffff;
    --site-degrade: linear-gradient(135deg, #4154f1, #2a3699);
    --site-texto-degrade: #ffffff;
    --site-degrade-no-escuro: linear-gradient(135deg, #1d2552, #111827);
    --site-texto-degrade-no-escuro: #ffffff;

    --site-fundo: #ffffff;
    --site-superficie: #ffffff;
    --site-fundo-suave: #f4f5f8;
    --site-texto: #1f2937;
    --site-texto-suave: #5b6474;
    --site-borda: #e3e7ef;
    --site-borda-forte: #cfd4de;
    --site-rodape: #0f1b2d;
    --site-raio: 16px;
    --site-sombra: 0 10px 30px rgba(15, 27, 45, 0.08);

    color-scheme: light;

    --site-fonte-titulo: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
    --site-fonte-texto: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
    --site-fonte-destaque: "Alegreya", Georgia, "Times New Roman", serif;
}

/* ---------------------------------------------------------------- modo escuro */

/* O modo escuro troca só os **fundos e textos neutros**: as cores da igreja
   continuam no topo, nos botões e nos selos. A cor de destaque e o tom claro da
   igreja têm versão própria para o escuro, calculada no servidor
   (`App\Support\TemaDoSite`) — uma cor principal quase preta sumiria como texto
   sobre fundo escuro.

   Duas portas para o mesmo conjunto: o **aparelho** do visitante
   (`prefers-color-scheme`), que vale de início, e o **botão da lua**
   (`data-tema`, gravado pelo `site-tema.js`), que ganha dele. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) {
        --site-fundo: #111827;
        --site-superficie: #1a2332;
        --site-fundo-suave: #151d2a;
        --site-texto: #e5e7eb;
        --site-texto-suave: #a3acba;
        --site-borda: #2a3445;
        --site-borda-forte: #3a4658;
        --site-rodape: #0a0f17;
        --site-sombra: 0 10px 30px rgba(0, 0, 0, 0.35);
        --site-destaque: var(--site-destaque-no-escuro);
        --site-clara: var(--site-clara-no-escuro);
        --site-texto-clara: var(--site-texto-clara-no-escuro);
        color-scheme: dark;
    }
}

:root[data-tema="escuro"] {
    --site-fundo: #111827;
    --site-superficie: #1a2332;
    --site-fundo-suave: #151d2a;
    --site-texto: #e5e7eb;
    --site-texto-suave: #a3acba;
    --site-borda: #2a3445;
    --site-borda-forte: #3a4658;
    --site-rodape: #0a0f17;
    --site-sombra: 0 10px 30px rgba(0, 0, 0, 0.35);
    --site-destaque: var(--site-destaque-no-escuro);
    --site-clara: var(--site-clara-no-escuro);
    --site-texto-clara: var(--site-texto-clara-no-escuro);
    color-scheme: dark;
}

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

html {
    scroll-behavior: smooth;
    /* O topo é fixo: a âncora não pode parar embaixo dele. */
    scroll-padding-top: 80px;
}

body {
    margin: 0;
    font-family: var(--site-fonte-texto);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.65;
    color: var(--site-texto);
    background: var(--site-fundo);
    overflow-wrap: anywhere;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--site-destaque);
}

h1,
h2,
h3 {
    font-family: var(--site-fonte-titulo);
    line-height: 1.2;
}

svg {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
}

.site-conteudo {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

.site-conteudo-estreito {
    max-width: 780px;
}

/* A seção de ofertas com QR: duas colunas pedem mais que o estreito (FEATURE-024). */
.site-conteudo-pix {
    max-width: 960px;
}

.site-texto-centro {
    text-align: center;
}

.site-texto-suave {
    color: var(--site-texto-suave);
}

/* ---------------------------------------------------------------- topo */

.site-topo {
    position: sticky;
    top: 0;
    z-index: 20;
    /* A barra do sistema: a cor principal e o texto que a igreja escolheu para
       ela (Administração › Sistemas), iguais nos dois modos. */
    background: var(--site-barra);
    color: var(--site-texto-barra);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* O topo pode ser mais largo que o conteúdo (1320 contra 1140): com todas as
   seções ligadas, marca + menu + lua pedem uns 1.110px, e nos 1.100 úteis do
   conteúdo o menu virava botão até numa tela de 1600px (medido em 26/09/2026). */
.site-topo-linha.site-conteudo {
    max-width: 1320px;
}

.site-topo-linha {
    display: flex;
    align-items: center;
    /* A marca empurra o resto para a direita (`margin-right: auto`): o menu, a
       lua e o botão do celular ficam juntos, e não espalhados pela barra. */
    justify-content: flex-start;
    gap: 16px;
    min-height: 72px;
}

.site-marca {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    font-family: var(--site-fonte-titulo);
    font-weight: 800;
    font-size: 18px;
    color: var(--site-texto-barra);
    text-decoration: none;
    margin-right: auto;
}

.site-marca-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

/* P231: o nome da igreja quebra **entre palavras**. O `overflow-wrap: anywhere` do
   corpo deixava o topo espremer a marca até partir "Comunidad / e Stauros" em 390px.
   `break-word` só parte a palavra que sozinha não cabe na linha — a rede contra a
   rolagem lateral —, e no celular estreito fonte e logo diminuem para a palavra caber. */
.site-marca {
    overflow-wrap: break-word;
}

@media (max-width: 400px) {
    .site-marca {
        gap: 8px;
        font-size: 16px;
        line-height: 1.25;
    }

    .site-marca-logo {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 340px) {
    .site-marca {
        font-size: 15px;
    }
}

/* ⚠️ Quantos itens o menu tem depende do que cada igreja liga, e nenhum ponto
   de corte fixo serve a todas. Em 26/09/2026 o menu ganhou "Oração" e
   "Estudos", deixou de caber, e o `overflow-wrap: anywhere` do site deixou o
   navegador **espremer cada item até quebrar a palavra** ("Sobr/e"). Por isso:

   - item do menu **nunca quebra** (`nowrap`);
   - sem espaço, o menu desce inteiro para outra linha (`flex-wrap`) — é só a
     rede de quem está sem JavaScript;
   - com JavaScript, o `site-igreja.js` mede: se o menu não coube numa linha, o
     topo ganha `.site-topo-compacto` e passa ao botão "Menu", o mesmo do
     celular. */
.site-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    /* 10px entre os itens, e não 18 (11/10/2026): com a "Área do membro" (FEATURE-044,
       §20) o menu do tenant 38 chegou a 12 itens e passou do topo por 23px — o site
       ficava no botão "Menu" até em tela de 1920px. */
    gap: 6px 10px;
}

.site-nav > * {
    white-space: nowrap;
    overflow-wrap: normal;
}

.site-topo-compacto .site-nav {
    display: none;
}

.site-topo-compacto .site-menu {
    display: block;
}

.site-nav > a:not(.site-botao) {
    font-family: var(--site-fonte-titulo);
    font-weight: 600;
    font-size: 15px;
    color: var(--site-texto-barra);
    text-decoration: none;
}

.site-nav > a:not(.site-botao):hover,
.site-nav > a:not(.site-botao):focus-visible {
    opacity: 0.75;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* O "Cadastre-se" do topo: contorno na cor do texto da barra. */
.site-topo .site-botao-contorno-cor {
    color: var(--site-texto-barra);
    border-color: var(--site-texto-barra);
}

/* O botão da lua (claro/escuro). Mostra a lua no claro e o sol no escuro — o
   que o clique vai ligar. */
.site-tema-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: var(--site-texto-barra);
    cursor: pointer;
    opacity: 0.9;
}

.site-tema-botao[hidden] {
    display: none;
}

.site-tema-botao:hover,
.site-tema-botao:focus-visible {
    opacity: 1;
}

.site-tema-botao svg {
    width: 20px;
    height: 20px;
}

.site-tema-sol {
    display: none;
}

:root[data-tema="escuro"] .site-tema-lua {
    display: none;
}

:root[data-tema="escuro"] .site-tema-sol {
    display: block;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) .site-tema-lua {
        display: none;
    }

    :root:not([data-tema="claro"]) .site-tema-sol {
        display: block;
    }
}

/* O menu do celular, num `<details>` — abre sem JavaScript. */
.site-menu {
    display: none;
    position: relative;
}

.site-menu summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: var(--site-texto-barra);
    font-family: var(--site-fonte-titulo);
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    list-style: none;
    /* O `overflow-wrap: anywhere` do corpo quebrava o botão em "Men / u". */
    white-space: nowrap;
    overflow-wrap: normal;
}

.site-menu summary::-webkit-details-marker {
    display: none;
}

.site-menu-barras,
.site-menu-barras::before,
.site-menu-barras::after {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.site-menu-barras {
    position: relative;
}

.site-menu-barras::before,
.site-menu-barras::after {
    content: "";
    position: absolute;
    left: 0;
}

.site-menu-barras::before {
    top: -6px;
}

.site-menu-barras::after {
    top: 6px;
}

.site-menu nav {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 220px;
    display: flex;
    flex-direction: column;
    padding: 8px;
    background: var(--site-superficie);
    border: 1px solid var(--site-borda);
    border-radius: var(--site-raio);
    box-shadow: var(--site-sombra);
}

.site-menu nav a {
    padding: 12px 14px;
    border-radius: 10px;
    color: var(--site-texto);
    text-decoration: none;
    font-weight: 500;
}

.site-menu nav a:hover,
.site-menu nav a:focus-visible {
    background: var(--site-clara);
}

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

.site-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 26px;
    border-radius: 999px;
    border: 2px solid transparent;
    font-family: var(--site-fonte-titulo);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.2s, transform 0.2s;
}

.site-botao[hidden] {
    display: none;
}

.site-botao:hover,
.site-botao:focus-visible {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.site-botao-pequeno {
    min-height: 40px;
    padding: 6px 18px;
    font-size: 14px;
}

.site-botao-degrade {
    background: linear-gradient(90deg, var(--site-primaria), var(--site-escura));
    color: var(--site-texto-escura);
}

.site-botao-contorno-claro {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.85);
}

.site-botao-contorno-cor {
    background: transparent;
    color: var(--site-destaque);
    border-color: var(--site-destaque);
}

.site-botao-icone {
    width: 20px;
    height: 20px;
}

.site-botao.copiado {
    filter: saturate(0.6);
}

/* ---------------------------------------------------------------- banner */

.site-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 62vh;
    padding: 90px 0;
    /* O fundo do sistema (o degradê da igreja), com o texto escolhido pelo
       contraste no servidor. */
    color: var(--site-texto-degrade);
    background: var(--site-degrade);
    text-align: center;
    overflow: hidden;
}

/* Com fotos: elas ficam atrás, o véu na cor da igreja por cima — escuro o
   bastante para o texto branco ficar legível em qualquer foto —, e o conteúdo
   na frente. As fotos são `<img>` (o CSP barra `style=""`), empilhadas; a
   `.ativa` aparece, e o script estático troca a classe no carrossel. */
.site-banner-com-capa {
    min-height: 72vh;
    background: var(--site-escura);
}

.site-banner-fotos {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.site-banner-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.site-banner-foto.ativa {
    opacity: 1;
}

/* Dois véus: a cor da igreja, leve, para a foto ainda aparecer (com 0,72 ela
   sumia — uma foto laranja saía azul); e uma sombra neutra, mais forte no meio e
   embaixo, que é o que segura a leitura do título branco. */
.site-banner-com-capa::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--site-degrade);
    opacity: 0.45;
}

.site-banner-fotos::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15) 70%),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.35));
}

.site-banner-conteudo {
    position: relative;
    z-index: 2;
}

.site-banner-com-capa {
    color: #fff;
}

/* Sem foto, o botão de contorno segue o texto do degradê — branco sobre um
   degradê claro sumiria. */
.site-banner:not(.site-banner-com-capa) .site-botao-contorno-claro {
    color: var(--site-texto-degrade);
    border-color: var(--site-texto-degrade);
}

/* Os controles do carrossel: setas nas laterais e pontos embaixo. Nascem
   `hidden`, e só o script os mostra — sem ele, não fariam nada. */
.site-carrossel-controles {
    position: absolute;
    inset: auto 0 22px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.site-carrossel-controles[hidden] {
    display: none;
}

.site-carrossel-pontos {
    display: flex;
    gap: 4px;
}

/* O ponto visível é pequeno, mas a área de toque tem 32px. */
.site-carrossel-ponto {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.site-carrossel-ponto::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    margin: auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transition: background 0.2s, transform 0.2s;
}

.site-carrossel-ponto.ativo::before {
    /* Branco nos dois modos: fica sobre a foto do banner. */
    background: #ffffff;
    transform: scale(1.3);
}

.site-carrossel-seta {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.site-carrossel-seta:hover,
.site-carrossel-seta:focus-visible {
    background: rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
    .site-banner-foto {
        transition: none;
    }
}

.site-banner-logo {
    width: 104px;
    height: 104px;
    object-fit: contain;
    margin-bottom: 18px;
    /* O círculo branco atrás do logo, nos dois modos: logos são feitos para
       fundo claro. */
    background: #ffffff;
    border-radius: 50%;
    padding: 14px;
}

.site-banner h1 {
    margin: 0 0 14px;
    font-size: clamp(34px, 7vw, 64px);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}

.site-banner-frase {
    margin: 0 auto 32px;
    max-width: 680px;
    font-size: clamp(18px, 2.6vw, 22px);
    font-weight: 300;
}

.site-banner-acoes {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.site-banner .site-botao-degrade {
    /* Branco nos dois modos: fica sobre a foto ou o degradê do banner. */
    background: #ffffff;
    color: var(--site-escura);
}

/* ---------------------------------------------------------------- pílulas */

.site-pilulas {
    background: var(--site-fundo-suave);
    border-bottom: 1px solid var(--site-borda);
}

/* Rola de lado **dentro de si**: a página não. */
.site-pilulas-trilho {
    display: flex;
    gap: 12px;
    justify-content: center;
    max-width: 1140px;
    margin: 0 auto;
    padding: 22px 20px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.site-pilula {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid var(--site-borda-forte);
    border-radius: 999px;
    color: var(--site-texto);
    background: var(--site-superficie);
    font-family: var(--site-fonte-titulo);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    overflow-wrap: normal;
}

.site-pilula:hover,
.site-pilula:focus-visible {
    border-color: var(--site-destaque);
    color: var(--site-destaque);
}

/* ---------------------------------------------------------------- seções */

.site-secao {
    padding: 80px 0;
}

.site-secao-clara {
    background: var(--site-clara);
}

.site-sobretitulo {
    margin: 0 0 6px;
    text-align: center;
    font-family: var(--site-fonte-destaque);
    font-style: italic;
    font-weight: 500;
    font-size: 21px;
    color: var(--site-destaque);
}

.site-secao-titulo {
    margin: 0 0 36px;
    font-size: clamp(28px, 4.4vw, 40px);
    font-weight: 800;
    text-align: center;
}

.site-titulo-grande {
    font-size: clamp(32px, 5.4vw, 50px);
}

.site-alinhado-esquerda {
    text-align: left;
}

.site-destaque {
    margin: 0 0 4px;
    font-family: var(--site-fonte-destaque);
    font-style: italic;
    font-weight: 500;
    font-size: 28px;
    color: var(--site-destaque);
}

/* ---------------------------------------------------------------- atalhos */

.site-secao-atalhos {
    padding: 56px 0;
}

/* Flex, e não grade: a última linha fica **centralizada** (9 atalhos = 6 + 3). */
.site-atalhos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 0;
}

.site-atalhos > li {
    flex: 0 0 calc(100% / 6);
    min-width: 0;
}

.site-atalho {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 22px 12px;
    border-radius: var(--site-raio);
    color: var(--site-texto);
    text-align: center;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
}

.site-atalho:hover,
.site-atalho:focus-visible {
    background: var(--site-clara);
    transform: translateY(-3px);
}

.site-atalho-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--site-clara);
    color: var(--site-destaque);
}

.site-atalho-icone svg {
    width: 34px;
    height: 34px;
}

.site-atalho-rotulo {
    font-family: var(--site-fonte-titulo);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------- cards de destaque */

/* Três por vez no computador, um e um pedaço do próximo no celular. O arrastar é
   do navegador (`scroll-snap`), sem script; as setas são o único acréscimo do
   `site-igreja.js`. O trilho rola **dentro de si**, a página não. */
.site-secao-destaques {
    padding: 56px 0 48px;
}

.site-cards {
    position: relative;
}

.site-cards-trilho {
    --site-cards-vao: 24px;
    list-style: none;
    /* Folga em volta, com margem negativa do mesmo tamanho: sem ela, a sombra
       dos cards era cortada pelas bordas do trilho e desenhava uma faixa cinza
       embaixo. -10px cabe no respiro de 20px do conteúdo — a página não rola. */
    margin: 0 -10px;
    padding: 6px 10px 28px;
    scroll-padding-inline: 10px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * var(--site-cards-vao)) / 3);
    gap: var(--site-cards-vao);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    /* Sem a barra de rolagem: ela desenhava uma faixa cinza sob os cards, e quem
       navega tem as setas (computador) ou o dedo (celular). */
    scrollbar-width: none;
}

.site-cards-trilho::-webkit-scrollbar {
    display: none;
}

.site-cards-trilho:focus-visible {
    outline: 2px solid var(--site-destaque);
    outline-offset: 4px;
    border-radius: var(--site-raio);
}

.site-card {
    scroll-snap-align: start;
    min-width: 0;
}

.site-card-corpo {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--site-superficie);
    border: 1px solid var(--site-borda);
    border-radius: 20px;
    box-shadow: 0 6px 16px rgba(15, 27, 45, 0.07);
    color: var(--site-texto);
    text-decoration: none;
    transition: transform 0.25s, box-shadow 0.25s;
}

a.site-card-corpo:hover,
a.site-card-corpo:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(15, 27, 45, 0.12);
}

.site-card-foto {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--site-clara);
    transition: transform 0.5s;
}

a.site-card-corpo:hover .site-card-foto {
    transform: scale(1.04);
}

.site-card-texto {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px 22px;
    position: relative;
    background: var(--site-superficie);
}

.site-card-titulo {
    font-family: var(--site-fonte-titulo);
    font-weight: 700;
    font-size: 19px;
    line-height: 1.3;
}

.site-card-resumo {
    color: var(--site-texto-suave);
    font-size: 15px;
    line-height: 1.5;
}

.site-card-mais {
    margin-top: auto;
    padding-top: 6px;
    color: var(--site-destaque);
    font-family: var(--site-fonte-titulo);
    font-weight: 600;
    font-size: 14px;
}

/* As setas ficam sobre as bordas do trilho, na altura da foto. Nascem `hidden`
   e só o script as mostra; no celular somem — lá se arrasta com o dedo. */
.site-cards-setas {
    position: absolute;
    top: calc((100% - 18px) * 0.3);
    /* -14px, e não mais: numa tela de 1024px o conteúdo começa a 20px da borda,
       e a seta além disso faria a página inteira rolar de lado. */
    left: -14px;
    right: -14px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.site-cards-setas[hidden] {
    display: none;
}

.site-cards-seta {
    pointer-events: auto;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--site-borda);
    border-radius: 50%;
    background: var(--site-superficie);
    color: var(--site-destaque);
    font-size: 28px;
    line-height: 1;
    box-shadow: var(--site-sombra);
    cursor: pointer;
    transition: opacity 0.2s;
}

.site-cards-seta:disabled {
    opacity: 0;
    cursor: default;
}

/* ---------------------------------------------------------------- galeria */

.site-galeria .site-secao-titulo {
    margin-bottom: 32px;
}

/* Quatro por linha no computador, três no tablet, duas no celular — ver as
   `@media` no fim. Miniaturas quadradas, do mesmo tamanho, gravadas assim. */
.site-galeria-grade {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.site-galeria-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: var(--site-clara);
    aspect-ratio: 1;
}

.site-galeria-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

.site-galeria-item:hover img,
.site-galeria-item:focus-visible img {
    transform: scale(1.05);
}

.site-galeria-item:focus-visible {
    outline: 3px solid var(--site-destaque);
    outline-offset: 3px;
}

/* A legenda aparece sobre a foto, embaixo, com uma sombra para ser legível em
   qualquer imagem. */
.site-galeria-legenda {
    position: absolute;
    inset: auto 0 0;
    padding: 28px 12px 10px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.65));
    color: #fff;
    font-size: 14px;
    line-height: 1.35;
}

/* A foto ampliada, por cima da página. Montada pelo `site-igreja.js` — toda a
   aparência é daqui, nenhuma por `style=""`, que o CSP barra. */
.site-visor {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 16px 24px;
    background: rgba(8, 12, 20, 0.94);
    color: #fff;
}

.site-visor[hidden] {
    display: none;
}

.site-visor-foto {
    max-width: 100%;
    max-height: calc(100vh - 150px);
    object-fit: contain;
    border-radius: 8px;
    user-select: none;
}

.site-visor-legenda {
    min-height: 1.4em;
    margin: 14px 0 0;
    max-width: 760px;
    text-align: center;
    font-size: 16px;
}

.site-visor-contador {
    position: absolute;
    top: 18px;
    left: 20px;
    font-size: 14px;
    opacity: 0.85;
}

.site-visor-botao {
    position: absolute;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.site-visor-botao:hover,
.site-visor-botao:focus-visible {
    background: rgba(255, 255, 255, 0.2);
}

.site-visor-fechar {
    top: 10px;
    right: 14px;
}

.site-visor-anterior {
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
}

.site-visor-proxima {
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
}

/* Com o visor aberto, a página atrás não rola. */
body.site-visor-aberto {
    overflow: hidden;
}

/* ---------------------------------------------------------------- ondas */

.site-onda-bloco {
    color: var(--site-texto-degrade);
    padding: 20px 0;
}

.site-onda-miolo {
    padding: 72px 0 80px;
    /* O degradê do fundo do sistema, com as bordas de cima e de baixo curvas:
       as ondas em SVG, de uma cor só, não casavam com degradê horizontal. */
    background: var(--site-degrade);
    border-radius: 50% 50% 50% 50% / 60px 60px 60px 60px;
}

.site-onda-bloco .site-secao-titulo {
    color: var(--site-texto-degrade);
}

.site-texto-sobre {
    font-size: 18px;
}

.site-texto-sobre a {
    color: inherit;
}

/* No modo escuro, as faixas do degradê usam a **versão escurecida** dele,
   calculada no servidor com o texto recalculado: o degradê do sistema costuma
   começar no branco, e uma faixa branca numa página escura ofusca. O banner
   fica com o degradê original — ele está sob a foto, ou é o topo da página. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="claro"]) .site-onda-miolo,
    :root:not([data-tema="claro"]) .site-faixa-curva {
        background: var(--site-degrade-no-escuro);
    }

    :root:not([data-tema="claro"]) .site-onda-bloco,
    :root:not([data-tema="claro"]) .site-onda-bloco .site-secao-titulo,
    :root:not([data-tema="claro"]) .site-faixa-curva {
        color: var(--site-texto-degrade-no-escuro);
    }
}

:root[data-tema="escuro"] .site-onda-miolo,
:root[data-tema="escuro"] .site-faixa-curva {
    background: var(--site-degrade-no-escuro);
}

:root[data-tema="escuro"] .site-onda-bloco,
:root[data-tema="escuro"] .site-onda-bloco .site-secao-titulo,
:root[data-tema="escuro"] .site-faixa-curva {
    color: var(--site-texto-degrade-no-escuro);
}

/* ---------------------------------------------------------------- texto rico */

.site-texto h2,
.site-texto h3 {
    margin: 1.4em 0 0.5em;
}

.site-texto blockquote {
    margin: 1.2em 0;
    padding: 0.6em 1.2em;
    border-left: 4px solid var(--site-destaque);
    font-family: var(--site-fonte-destaque);
    font-style: italic;
    font-size: 1.15em;
}

.site-onda-bloco .site-texto blockquote {
    border-left-color: currentColor;
}

/* As imagens do "Sobre" e dos estudos. As classes são as de posição do CKEditor
   5 — as únicas que o perfil público do sanitizador deixa passar. Sem `style` (o
   CSP barra), o tamanho é daqui: inteira no centro, metade ao lado do texto — e,
   no celular, sempre inteira. */
.site-texto figure {
    margin: 1.5em auto;
    text-align: center;
}

.site-texto img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: var(--site-raio);
}

.site-texto figcaption {
    margin-top: 6px;
    font-size: 14px;
    opacity: 0.8;
}

.site-texto figure.image-style-align-left,
.site-texto figure.image-style-block-align-left {
    float: left;
    max-width: 50%;
    margin: 0.3em 1.5em 1em 0;
}

.site-texto figure.image-style-align-right,
.site-texto figure.image-style-block-align-right {
    float: right;
    max-width: 50%;
    margin: 0.3em 0 1em 1.5em;
}

/* O texto que corre ao lado da imagem não empurra a próxima seção. */
.site-texto::after {
    content: "";
    display: table;
    clear: both;
}

/* ---------------------------------------------------------------- cultos */

/* A programação da semana: um bloco por dia, lado a lado no computador e
   empilhados no celular. Cada culto é uma linha — horário à esquerda, em
   destaque, e o nome com o detalhe ao lado. */
.site-programacao {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
    align-items: start;
}

.site-dia {
    background: var(--site-superficie);
    border: 1px solid var(--site-borda);
    border-top: 4px solid var(--site-destaque);
    border-radius: var(--site-raio);
    box-shadow: 0 6px 16px rgba(15, 27, 45, 0.06);
    overflow: hidden;
}

.site-dia-hoje {
    border-color: var(--site-destaque);
    box-shadow: 0 8px 22px rgba(15, 27, 45, 0.12);
}

.site-dia-nome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 14px 18px;
    background: var(--site-clara);
    color: var(--site-texto-clara);
    font-size: 17px;
    font-weight: 800;
}

.site-dia-curto {
    display: none;
}

.site-dia-selo {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--site-primaria);
    color: var(--site-texto-primaria);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.site-dia-cultos {
    list-style: none;
    margin: 0;
    padding: 6px 18px 10px;
}

.site-dia-cultos li {
    display: flex;
    gap: 14px;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--site-borda);
}

.site-dia-cultos li:last-child {
    border-bottom: 0;
}

.site-culto-hora {
    flex: 0 0 auto;
    min-width: 48px;
    font-family: var(--site-fonte-titulo);
    font-weight: 800;
    font-size: 17px;
    color: var(--site-destaque);
    font-variant-numeric: tabular-nums;
}

.site-culto-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.site-culto-nome {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.35;
}

.site-culto-detalhe {
    color: var(--site-texto-suave);
    font-size: 14px;
    line-height: 1.4;
}

/* No computador, **a semana inteira numa linha só** (pedido do dono,
   26/09/2026): uma coluna por dia, todas da mesma largura, quantos dias
   houver — até 8, com "Em datas especiais". Com ~130px por coluna, horário e
   nome lado a lado não cabem: o horário sobe para cima do nome, e as letras
   diminuem. No tablet e no celular, os blocos voltam a quebrar em linhas. */
@media (min-width: 1024px) {
    .site-programacao {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .site-dia {
        border-top-width: 3px;
    }

    .site-dia-nome {
        flex-wrap: wrap;
        padding: 10px 12px;
        font-size: 14px;
        line-height: 1.25;
    }

    .site-dia-selo {
        padding: 1px 7px;
        font-size: 10px;
    }

    /* O nome curto do dia na linha única; o longo continua lá para leitor de
       tela, só escondido da vista. */
    .site-dia-curto {
        display: inline;
    }

    .site-dia-longo {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .site-dia-cultos {
        padding: 2px 12px 6px;
    }

    .site-dia-cultos li {
        flex-direction: column;
        gap: 1px;
        padding: 8px 0;
    }

    .site-culto-hora {
        min-width: 0;
        font-size: 15px;
    }

    .site-culto-nome {
        font-size: 14px;
    }

    .site-culto-detalhe {
        font-size: 12px;
    }
}

/* ---------------------------------------------------------------- ao vivo */

.site-ao-vivo {
    position: relative;
    padding: 90px 0;
    background: var(--site-fundo-suave);
    overflow: hidden;
}

/* A capa esmaecida ao fundo, como o "Rede Super" da referência. */
.site-ao-vivo-com-capa::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--site-capa);
    background-size: cover;
    background-position: center;
    filter: grayscale(1);
    opacity: 0.12;
}

.site-ao-vivo-grade {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px;
    align-items: center;
}

.site-ao-vivo-grade > :only-child {
    grid-column: 1 / -1;
    max-width: 640px;
}

.site-ao-vivo-texto p {
    font-size: 19px;
    font-weight: 300;
    color: var(--site-texto-suave);
}

.site-ao-vivo-texto .site-destaque {
    color: var(--site-destaque);
}

.site-botoes-empilhados {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 24px;
}

/* O botão "Notícias" da seção de vídeo (03/10/2026): o selo NEWS com um ponto
   pulsando, como os selos de "ao vivo", para chamar o clique. Vermelho com
   texto branco nos dois modos — contraste 5,6 —, e sem movimento para quem
   pediu menos animação no aparelho. */
.site-botao-noticias {
    gap: 10px;
}

.site-selo-news {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #c62828;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.6;
}

.site-selo-news-ponto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffffff;
    animation: site-news-pulso 1.4s ease-in-out infinite;
}

@keyframes site-news-pulso {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.25; transform: scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
    .site-selo-news-ponto {
        animation: none;
    }
}

.site-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--site-raio);
    overflow: hidden;
    background: #000;
    box-shadow: var(--site-sombra);
}

.site-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ------------------------------------------------ nossas congregações */
/* FEATURE-032, possibilidade E: um cartão por filial, no molde dos eventos. A grade
   se ajusta sozinha — uma coluna no celular, até três no computador — e fica
   **centralizada** sob o título: com `auto-fill` e `1fr`, uma filial só ficava
   encostada à esquerda embaixo de um título no meio (visto na tela). */

.site-congregacoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 360px));
    justify-content: center;
    gap: 16px;
}

.site-congregacao {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 22px;
    background: var(--site-superficie);
    border: 1px solid var(--site-borda);
    border-radius: var(--site-raio);
    box-shadow: var(--site-sombra);
    min-width: 0;
}

.site-congregacao-nome {
    margin: 0;
    font-family: var(--site-fonte-titulo);
    font-size: 18px;
    font-weight: 700;
    overflow-wrap: break-word;
}

.site-congregacao-endereco {
    margin: 0;
    overflow-wrap: anywhere;
}

.site-congregacao-cultos {
    margin: 0;
    padding-left: 18px;
    font-size: 15px;
}

.site-congregacao-acoes {
    margin: 4px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.site-congregacao-acoes a:not(.site-botao) {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
}

/* ---------------------------------------------------------------- agenda */

.site-agenda,
.site-estudos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
}

.site-evento {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 20px 22px;
    background: var(--site-superficie);
    border: 1px solid var(--site-borda);
    border-radius: var(--site-raio);
    box-shadow: var(--site-sombra);
}

.site-evento-data {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--site-primaria), var(--site-escura));
    color: var(--site-texto-escura);
    line-height: 1;
    font-family: var(--site-fonte-titulo);
}

.site-evento-dia {
    font-size: 26px;
    font-weight: 800;
}

.site-evento-mes {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.site-evento-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.site-evento-nome {
    font-family: var(--site-fonte-titulo);
    font-weight: 700;
    font-size: 19px;
}

.site-evento-detalhe {
    color: var(--site-destaque);
    font-weight: 500;
    font-size: 15px;
}

.site-evento-resumo {
    color: var(--site-texto-suave);
    font-size: 15px;
}

/* ---------------------------------------------------------------- estudos */

/* Estudos e apresentações no mesmo molde dos cards de culto (pedido do dono,
   03/10/2026: "para não ficar muito grande"): a borda na cor de destaque em
   cima, a faixa clara com o tipo e o corpo curto embaixo. */
.site-estudos {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
    align-items: stretch;
}

.site-estudo {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--site-superficie);
    border: 1px solid var(--site-borda);
    border-top: 4px solid var(--site-destaque);
    border-radius: var(--site-raio);
    box-shadow: 0 6px 16px rgba(15, 27, 45, 0.06);
    overflow: hidden;
    color: var(--site-texto);
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.site-estudo:hover,
.site-estudo:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(15, 27, 45, 0.12);
}

.site-estudo-tipo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--site-clara);
    color: var(--site-texto-clara);
    font-family: var(--site-fonte-titulo);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.site-estudo-icone {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.site-estudo-corpo {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 18px 14px;
}

.site-estudo-titulo {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.35;
}

.site-estudo-tema {
    color: var(--site-texto-suave);
    font-size: 14px;
    line-height: 1.4;
}

.site-estudo-ler {
    margin-top: auto;
    padding-top: 8px;
    color: var(--site-destaque);
    font-weight: 500;
    font-size: 14px;
}

/* A leitura do estudo. */
.site-voltar {
    margin: 0 0 12px;
    font-weight: 500;
}

.site-voltar a {
    text-decoration: none;
}

.site-estudo-cabecalho {
    margin: 0 0 10px;
    font-size: clamp(30px, 5vw, 44px);
    font-weight: 800;
}

.site-estudo-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0 0 30px;
    color: var(--site-texto-suave);
}

/* A apresentação no site: um slide abaixo do outro. O fundo é `<img>` (o CSP
   barra `style=""`), coberto por um véu escuro para o texto claro ler bem. */
.site-slides {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 24px;
}

.site-slide {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    min-height: 220px;
    padding: 32px 28px 40px;
    background: var(--site-superficie);
    border: 1px solid var(--site-borda);
    border-radius: var(--site-raio);
    box-shadow: var(--site-sombra);
    overflow: hidden;
}

/* Altura mínima perto do 16:9, sem `aspect-ratio`: com ele e `overflow: hidden`,
   um slide de muito texto seria cortado em vez de crescer. */
.site-slide-com-fundo {
    min-height: clamp(200px, 45vw, 420px);
    color: #ffffff;
    border-color: transparent;
}

.site-slide-com-fundo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.6));
}

.site-slide-fundo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.site-slide > .site-video,
.site-slide-video,
.site-slide-conteudo,
.site-slide-numero {
    position: relative;
    z-index: 2;
}

.site-slide-video {
    width: 100%;
    border-radius: var(--site-raio);
    background: #000;
}

.site-slide-conteudo {
    overflow-wrap: anywhere;
}

.site-slide-conteudo > :first-child {
    margin-top: 0;
}

.site-slide-conteudo > :last-child {
    margin-bottom: 0;
}

/* O slide do telão é centralizado e de letra grande, mas o perfil público do
   sanitizador tira o alinhamento e o tamanho gravados: o padrão vem daqui. */
.site-slide-com-fundo .site-slide-conteudo {
    text-align: center;
    font-size: clamp(18px, 2.6vw, 26px);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.site-slide-com-fundo .site-slide-conteudo,
.site-slide-com-fundo .site-slide-conteudo a {
    color: #ffffff;
}

.site-slide-numero {
    position: absolute;
    right: 16px;
    bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--site-texto-suave);
}

.site-slide-com-fundo .site-slide-numero {
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 600px) {
    .site-slide {
        padding: 24px 18px 36px;
    }
}

/* O botão do telão e o telão em si (montado pelo `site-igreja.js`): os slides
   da página, um por vez, cobrindo a tela. Fechado, o telão é só a lista. */
.site-apresentar {
    margin: 0 0 28px;
}

.site-telao-controles {
    display: none;
}

.site-telao-aberto {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #000;
    color: #fff;
}

.site-telao-aberto .site-slides {
    display: block;
    height: 100%;
}

.site-telao-aberto .site-slide {
    display: none;
    position: absolute;
    inset: 0;
    min-height: 0;
    align-items: center;
    padding: 64px clamp(24px, 8vw, 120px);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
}

/* Slide sem foto: o fundo claro do cartão, com o texto do tema (o branco do
   telão sumiria nele). */
.site-telao-aberto .site-slide:not(.site-slide-com-fundo) {
    color: var(--site-texto);
}

.site-telao-aberto .site-slide.site-slide-atual {
    display: flex;
}

/* No telão, todo slide é centralizado e de letra de projetor. */
.site-telao-aberto .site-slide-conteudo {
    width: 100%;
    max-width: 1400px;
    text-align: center;
    font-size: clamp(22px, 3.6vw, 56px);
    line-height: 1.35;
}

.site-telao-aberto .site-slide > .site-video,
.site-telao-aberto .site-slide-video {
    width: min(100%, calc((100vh - 180px) * 16 / 9));
    flex: 0 0 auto;
}

.site-telao-aberto .site-slide-video {
    max-height: calc(100vh - 180px);
}

/* O número da lista dá lugar ao contador do telão. */
.site-telao-aberto .site-slide-numero {
    display: none;
}

.site-telao-aberto .site-telao-controles {
    display: block;
}

.site-telao-controles .site-visor-contador {
    z-index: 3;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.site-telao-controles .site-visor-botao {
    z-index: 3;
    background: rgba(0, 0, 0, 0.35);
}

.site-telao-controles .site-visor-botao:disabled {
    opacity: 0.3;
    cursor: default;
}

/* ---------------------------------------------------------------- PIX */

.site-cartao-pix {
    padding: 44px 32px;
    text-align: center;
    background: var(--site-superficie);
    border: 1px solid var(--site-borda);
    border-radius: 24px;
    box-shadow: var(--site-sombra);
}

.site-cartao-pix .site-secao-titulo {
    margin-bottom: 8px;
}

.site-cartao-pix-icone {
    width: 44px;
    height: 44px;
    color: var(--site-destaque);
}

.site-pix-chave {
    display: inline-block;
    max-width: 100%;
    margin: 12px 0 8px;
    padding: 12px 20px;
    border: 2px dashed var(--site-destaque);
    border-radius: 12px;
    background: var(--site-clara);
    color: var(--site-texto-clara);
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 18px;
    user-select: all;
}

.site-cartao-pix .site-botao {
    margin-top: 12px;
}

/* O QR e o "Pix copia e cola" (FEATURE-024, §10). O QR fica sobre branco fixo: o leitor
   do banco precisa de contraste, e o tema da igreja pode ser escuro. Em coluna no
   celular; lado a lado a partir de 768px, com a chave à esquerda e o QR à direita. */
.site-pix-qr {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--site-borda);
}

.site-pix-qr-imagem {
    display: inline-block;
    padding: 8px;
    background: #ffffff;
    border-radius: 14px;
    line-height: 0;
}

.site-pix-qr-imagem svg {
    width: 180px;
    max-width: 100%;
    height: auto;
}

.site-pix-instrucao {
    max-width: 280px;
    margin: 10px auto 0;
    font-size: 0.9rem;
}

@media (min-width: 768px) {
    .site-cartao-pix-duplo {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 40px;
    }

    .site-cartao-pix-duplo .site-pix-qr {
        margin-top: 0;
        padding: 0 0 0 40px;
        border-top: 0;
        border-left: 1px solid var(--site-borda);
    }
}

/* Os vários Pix da igreja (FEATURE-042). A imagem é a capa do Pix, recortada em 16:9
   pelo servidor; o valor, quando o Pix tem, vem logo abaixo do título. */
.site-pix-imagem {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin-bottom: 16px;
    border-radius: 16px;
}

.site-pix-valor {
    margin: 0 0 8px;
    color: var(--site-destaque);
    font-family: var(--site-fonte-titulo);
    font-size: 1.5rem;
    font-weight: 700;
}

.site-pix-texto {
    margin: 0 auto 8px;
    max-width: 560px;
}

/* Os outros Pix na seção da página inicial: cartões sem QR, que levam à página de cada
   um — a seção não pode virar uma parede de QR Codes. Um por linha no celular. */
.site-ofertas-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.site-oferta-cartao {
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    overflow: hidden;
    padding: 0 0 16px;
    background: var(--site-superficie);
    border: 1px solid var(--site-borda);
    border-radius: var(--site-raio);
    box-shadow: var(--site-sombra);
    color: var(--site-texto);
    text-align: center;
    text-decoration: none;
}

.site-oferta-cartao img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.site-oferta-titulo {
    padding: 16px 16px 0;
    font-family: var(--site-fonte-titulo);
    font-weight: 700;
}

.site-oferta-valor {
    color: var(--site-destaque);
    font-weight: 700;
}

/* A meta de um Pix (FEATURE-042, fase 3): quanto entrou, de quanto, e a barra. É um
   `<progress>` porque o CSP do site não aceita `style` em atributo; o trilho e o
   preenchimento são pintados aqui, nos três motores, com as cores do tema — que já
   trocam sozinhas no escuro. */
.site-meta {
    width: 100%;
    max-width: 420px;
    margin: 4px auto 12px;
    text-align: left;
}

.site-oferta-cartao .site-meta {
    margin: 4px 0 0;
    padding: 0 16px;
}

.site-meta-numeros {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    margin: 0 0 6px;
    font-size: 0.95rem;
}

.site-meta-percentual {
    color: var(--site-destaque);
    font-weight: 700;
}

.site-meta-barra {
    display: block;
    width: 100%;
    height: 10px;
    border: 1px solid var(--site-borda-forte);
    border-radius: 999px;
    overflow: hidden;
    background: var(--site-fundo-suave);
    color: var(--site-destaque);
    appearance: none;
}

.site-meta-barra::-webkit-progress-bar {
    background: var(--site-fundo-suave);
}

.site-meta-barra::-webkit-progress-value {
    background: var(--site-destaque);
    border-radius: 999px;
}

.site-meta-barra::-moz-progress-bar {
    background: var(--site-destaque);
    border-radius: 999px;
}

.site-ofertas-todas {
    margin: 24px 0 0;
    text-align: center;
}

/* A página "Todas as ofertas": um cartão embaixo do outro, cada um com o seu link. */
.site-ofertas-item {
    margin-top: 32px;
}

.site-ofertas-link {
    margin: 8px 0 0;
    text-align: center;
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------- faixa dupla */

.site-faixa-dupla {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.site-faixa-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 110px;
    padding: 24px;
    font-family: var(--site-fonte-titulo);
    font-size: clamp(18px, 2.4vw, 24px);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    transition: filter 0.2s;
}

.site-faixa-item:hover,
.site-faixa-item:focus-visible {
    filter: brightness(1.1);
}

.site-faixa-item svg {
    width: 32px;
    height: 32px;
}

.site-faixa-primaria {
    background: var(--site-primaria);
    color: var(--site-texto-primaria);
}

.site-faixa-escura {
    background: var(--site-escura);
    color: var(--site-texto-escura);
}

/* ---------------------------------------------------------------- cartões de ação */

.site-cartoes-duplos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.site-cartao-acao {
    padding: 36px 32px;
    background: var(--site-clara);
    color: var(--site-texto-clara);
    border-radius: 24px;
}

.site-cartao-acao > svg {
    width: 40px;
    height: 40px;
    color: var(--site-destaque);
}

.site-cartao-acao h2 {
    margin: 12px 0 8px;
    font-size: 26px;
    font-weight: 800;
}

.site-cartao-acao-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0 0;
}

/* ---------------------------------------------------------------- faixa curva */

.site-faixa-curva {
    position: relative;
    padding: 80px 0 120px;
    background: var(--site-degrade);
    color: var(--site-texto-degrade);
    /* A borda de baixo curva, como a faixa de novidades da referência. */
    border-radius: 0 0 50% 50% / 0 0 80px 80px;
}

.site-faixa-curva .site-secao-titulo {
    color: inherit;
}

.site-contato {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

.site-contato li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--site-raio);
}

.site-contato li > span {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.site-contato a {
    color: inherit;
}

.site-contato-rotulo {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.85;
}

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

.site-rodape {
    margin-top: 60px;
    padding: 56px 0 24px;
    background: var(--site-rodape);
    color: #d6dbe5;
    font-size: 15px;
}

.site-rodape a {
    color: #ffffff;
}

.site-rodape p {
    margin: 0 0 10px;
}

.site-rodape-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 36px;
}

.site-rodape-titulo {
    font-family: var(--site-fonte-titulo);
    font-weight: 700;
    font-size: 17px;
    color: #ffffff;
}

.site-rodape-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.site-redes-redondas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.site-redes-redondas a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transition: background 0.2s;
}

.site-redes-redondas a:hover,
.site-redes-redondas a:focus-visible {
    background: var(--site-primaria);
}

.site-rodape-fim {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 14px;
}

/* ---------------------------------------------------------------- telas menores */

@media (max-width: 900px) {
    .site-nav {
        display: none;
    }

    .site-menu {
        display: block;
    }

    .site-ao-vivo-grade {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .site-atalhos > li {
        flex-basis: calc(100% / 4);
    }

    .site-cards-trilho {
        grid-auto-columns: calc((100% - var(--site-cards-vao)) / 2);
    }

    .site-cards-setas {
        display: none;
    }

    .site-galeria-grade {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* No celular as pílulas começam na borda e rolam; centralizadas, as
       primeiras ficariam escondidas à esquerda. */
    .site-pilulas-trilho {
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
    body {
        font-size: 16px;
    }

    .site-banner {
        min-height: 0;
        padding: 64px 0 72px;
    }

    .site-banner-com-capa {
        min-height: 70vh;
    }

    .site-secao,
    .site-ao-vivo {
        padding: 56px 0;
    }

    .site-atalhos {
        gap: 8px 0;
    }

    .site-atalhos > li {
        flex-basis: calc(100% / 3);
    }

    .site-galeria-grade {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    /* No celular as setas do visor vão para baixo, longe da foto e do polegar
       que arrasta. */
    .site-visor-anterior,
    .site-visor-proxima {
        top: auto;
        bottom: 16px;
        transform: none;
    }

    /* Um card e um pedaço do próximo: o pedaço é o que diz que dá para arrastar. */
    .site-cards-trilho {
        --site-cards-vao: 14px;
        grid-auto-columns: 82%;
    }

    .site-atalho {
        padding: 14px 4px;
    }

    .site-atalho-icone {
        width: 58px;
        height: 58px;
    }

    .site-atalho-rotulo {
        font-size: 13px;
    }

    .site-texto figure.image-style-align-left,
    .site-texto figure.image-style-block-align-left,
    .site-texto figure.image-style-align-right,
    .site-texto figure.image-style-block-align-right {
        float: none;
        max-width: 100%;
        margin: 1.5em auto;
    }

    .site-faixa-curva {
        border-radius: 0 0 50% 50% / 0 0 40px 40px;
    }

    .site-evento {
        gap: 14px;
        padding: 16px;
    }
}

/* ---------------------------------------------------------------- pedido de oração */

/* O único formulário do site (fase 7). O cartão fica na superfície neutra, e não
   na cor da igreja: campo de texto precisa do contraste do fundo comum, nos dois
   modos. O retorno do envio é uma faixa com a borda colorida e o texto neutro —
   a cor diz "deu certo" ou "não deu", e quem é lido é o texto. */
.site-formulario {
    display: grid;
    gap: 18px;
    padding: 28px;
    border-radius: var(--site-raio);
    background: var(--site-superficie);
    color: var(--site-texto);
    box-shadow: var(--site-sombra);
}

.site-campo {
    display: grid;
    gap: 6px;
    font-weight: 500;
}

.site-campo small {
    font-weight: 400;
    color: var(--site-texto-suave);
}

.site-campo input,
.site-campo textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid var(--site-borda-forte);
    border-radius: 10px;
    background: var(--site-fundo);
    color: var(--site-texto);
    font: inherit;
    font-weight: 400;
}

.site-campo textarea {
    resize: vertical;
}

.site-campo input:focus-visible,
.site-campo textarea:focus-visible,
.site-caixa input:focus-visible {
    outline: 3px solid var(--site-destaque);
    outline-offset: 2px;
}

.site-caixa {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}

.site-caixa input {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 1px 0 0;
    accent-color: var(--site-destaque);
}

.site-formulario .site-botao {
    justify-self: start;
}

/* O honeypot: fora da vista, mas não `display: none` — há robô que pula campo
   escondido assim. */
.site-armadilha {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.site-aviso {
    margin: 0 0 20px;
    padding: 14px 18px;
    border-left: 5px solid;
    border-radius: 10px;
    background: var(--site-superficie);
    color: var(--site-texto);
    font-weight: 500;
}

.site-aviso-ok {
    border-left-color: #16a34a;
}

.site-aviso-erro {
    border-left-color: #dc2626;
}

@media (max-width: 575px) {
    .site-formulario {
        padding: 20px;
    }

    .site-formulario .site-botao {
        justify-self: stretch;
    }
}

/* ---------------------------------------------------------------- devocional */

/* O ícone do devocional (FEATURE-040, fase 2), em toda página do site, só com
   devocional no ar. Mora **dentro do topo**, que é `sticky`, e fica pendurado
   logo abaixo dele (`top: 100%`): acompanha a rolagem e a altura da barra, que
   em 320px quebra em duas linhas (149px contra 73px, medido em 05/10/2026). Um
   `position: fixed` com `top` fixo ficaria por cima da barra no celular
   estreito. Até 05/10/2026 ficava no canto de baixo — o dono o quis em cima. */
.site-devocional-icone {
    position: absolute;
    top: calc(100% + 12px);
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 8px 18px 8px 14px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--site-primaria), var(--site-escura));
    color: var(--site-texto-escura);
    box-shadow: 0 8px 24px rgba(15, 27, 45, 0.28);
    font-family: var(--site-fonte-titulo);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: filter 0.2s, transform 0.2s;
}

.site-devocional-icone:hover,
.site-devocional-icone:focus-visible {
    filter: brightness(1.08);
    transform: translateY(1px);
}

.site-devocional-icone:focus-visible {
    outline: 3px solid var(--site-destaque);
    outline-offset: 3px;
}

/* O menu do celular abre no mesmo canto, logo abaixo do botão: com ele aberto,
   o ícone sai da frente. */
.site-menu[open] ~ .site-devocional-icone {
    visibility: hidden;
}

/* A página do devocional: o título é alinhado à esquerda, como o do estudo, e o
   sobretítulo acompanha. */
.site-devocional-sobretitulo {
    text-align: left;
}

.site-devocional-referencia {
    color: var(--site-destaque);
    font-weight: 500;
}

.site-devocional-louvor {
    margin: 0 0 30px;
}

.site-devocional-louvor audio {
    display: block;
    width: 100%;
}

.site-devocional-louvor-nome {
    margin: 10px 0 0;
    color: var(--site-texto-suave);
    font-size: 15px;
}

/* Os comentários do devocional (FEATURE-040, fase 3): uma conversa, do mais
   antigo ao mais novo, e o formulário no molde do pedido de oração. */
.site-comentarios-contagem {
    color: var(--site-texto-suave);
    font-weight: 500;
}

.site-comentarios {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    gap: 14px;
}

.site-comentario {
    padding: 16px 20px;
    background: var(--site-superficie);
    border: 1px solid var(--site-borda);
    border-left: 4px solid var(--site-destaque);
    border-radius: 12px;
}

.site-comentario-autor {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 0 0 6px;
}

.site-comentario-autor time {
    color: var(--site-texto-suave);
    font-size: 14px;
}

/* O leitor escreve em texto puro: a quebra de linha que ele deu fica. */
.site-comentario-texto {
    margin: 0;
    white-space: pre-line;
}

.site-formulario-titulo {
    margin: 0;
    font-family: var(--site-fonte-titulo);
    font-weight: 700;
    font-size: 18px;
}

.site-formulario-nota {
    margin: 0;
    color: var(--site-texto-suave);
    font-size: 14px;
}

/* O botão enviando (`data-enviando`, no `site-igreja.js`): o ícone dá lugar ao
   girador, e o botão trava — pedido do dono em 05/10/2026, no comentário do
   devocional. */
.site-botao-enviando {
    cursor: progress;
    filter: none;
    transform: none;
}

.site-botao-enviando .site-botao-icone {
    display: none;
}

.site-botao-enviando::before {
    content: "";
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: site-girar 0.8s linear infinite;
}

.site-botao:disabled {
    opacity: 0.85;
}

@keyframes site-girar {
    to {
        transform: rotate(360deg);
    }
}

/* Quem pediu menos movimento vê o girador parado — o "Enviando…" já diz tudo. */
@media (prefers-reduced-motion: reduce) {
    .site-botao-enviando::before {
        animation: none;
    }
}

/* O versículo da referência, buscado na Bíblia do sistema (FEATURE-040, fase 4). */
.site-devocional-versiculo {
    margin: 0 0 30px;
    padding: 18px 22px;
    background: var(--site-clara);
    color: var(--site-texto-clara);
    border-left: 4px solid var(--site-destaque);
    border-radius: 12px;
}

.site-devocional-versiculo p {
    margin: 0 0 8px;
    font-family: var(--site-fonte-destaque);
    font-style: italic;
    font-size: 19px;
    line-height: 1.55;
}

.site-devocional-versiculo sup {
    font-family: var(--site-fonte-texto);
    font-style: normal;
    font-size: 11px;
    opacity: 0.75;
}

.site-devocional-versiculo footer {
    font-size: 14px;
    font-weight: 500;
}

/* ---------------------------------------------------------------- o app (FEATURE-044) */

/* O link "App" do menu some dentro do próprio app (`site-app.js`). O `display` dos links
   do menu ganharia do `hidden` sem esta regra. */
[data-app-link][hidden],
.site-app [hidden] {
    display: none !important;
}

.site-app-conteudo {
    max-width: 640px;
}

.site-app-cartao {
    padding: 40px 28px;
    text-align: center;
    background: var(--site-superficie);
    border: 1px solid var(--site-borda);
    border-radius: 24px;
    box-shadow: var(--site-sombra);
}

.site-app-cartao .site-secao-titulo {
    margin-bottom: 12px;
}

.site-app-icone {
    width: 96px;
    height: 96px;
    margin-bottom: 16px;
    border-radius: 22px;
    box-shadow: var(--site-sombra);
}

.site-app-texto {
    margin: 0 auto 24px;
    max-width: 480px;
    line-height: 1.6;
}

.site-app-passos {
    margin-top: 8px;
    text-align: left;
    line-height: 1.6;
}

.site-app-passos ol {
    padding-left: 22px;
}

.site-app-passos-titulo {
    margin: 16px 0 4px;
    font-weight: 700;
}

.site-app-endereco {
    padding: 10px 14px;
    border: 2px dashed var(--site-destaque);
    border-radius: 12px;
    background: var(--site-clara);
    color: var(--site-texto-clara);
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    text-align: center;
    overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
    .site-app-cartao {
        padding: 28px 18px;
    }
}


/* ---------------------------------------------------------------- a área do membro (FEATURE-044) */

.site-aviso-info {
    border-left-color: var(--site-destaque);
}

.site-membro {
    max-width: 520px;
}

.site-membro .site-secao-titulo {
    margin-bottom: 12px;
}

.site-membro-texto {
    text-align: center;
    line-height: 1.6;
}

.site-membro .site-formulario .site-botao {
    width: 100%;
}

.site-membro-google {
    width: 100%;
}

.site-membro-ou {
    margin: 24px 0 8px;
    text-align: center;
    color: var(--site-texto-suave);
    font-size: 14px;
}

.site-membro-rodape {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
}

/* As telas do membro (FEATURE-044, fase 4). */
.site-membro-largo {
    max-width: 760px;
}

.site-membro-cartoes {
    display: grid;
    gap: 12px;
    margin: 24px 0;
}

.site-membro-cartao {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    padding: 18px 20px;
    background: var(--site-superficie);
    border: 1px solid var(--site-borda);
    border-radius: 16px;
    box-shadow: var(--site-sombra);
    color: inherit;
    text-decoration: none;
}

a.site-membro-cartao:hover,
a.site-membro-cartao:focus-visible {
    border-color: var(--site-destaque);
}

.site-membro-cartao strong {
    font-family: var(--site-fonte-titulo);
    font-size: 17px;
}

.site-membro-cartao span {
    color: var(--site-texto-suave);
    font-size: 14px;
    line-height: 1.5;
}

.site-membro-subtitulo {
    margin: 28px 0 12px;
    font-size: 20px;
}

.site-membro-lista {
    padding-left: 22px;
    line-height: 1.8;
}

.site-membro-lista span {
    color: var(--site-texto-suave);
}

/* A cifra rola dentro dela no celular: as linhas de acorde não podem quebrar. */
.site-membro-cifra {
    overflow-x: auto;
    padding: 16px;
    background: var(--site-superficie);
    border: 1px solid var(--site-borda);
    border-radius: 12px;
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre;
}

.site-membro-carteirinha {
    margin-bottom: 20px;
    padding: 24px;
    text-align: center;
    background: var(--site-superficie);
    border: 2px solid var(--site-destaque);
    border-radius: 18px;
    box-shadow: var(--site-sombra);
}

.site-membro-carteirinha p {
    margin: 4px 0;
}

.site-membro-carteirinha-igreja {
    color: var(--site-destaque);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 13px;
}

.site-membro-carteirinha-nome {
    font-family: var(--site-fonte-titulo);
    font-size: 22px;
    font-weight: 800;
}

.site-membro-qr svg {
    display: block;
    width: 180px;
    height: 180px;
    margin: 16px auto 8px;
}

.site-membro-codigo {
    font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
    letter-spacing: 0.08em;
}

/* O código de retirada do Kids (FEATURE-027, fase 4): grande, para ditar na saída. */
.site-membro-codigo-grande {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: 0.18em;
}

/* Quem pode buscar, na ficha do filho pelo responsável (FEATURE-027, rodada 2, fase 4). */
.site-membro-autorizado {
    border: 1px solid var(--site-borda, rgba(127, 127, 127, 0.35));
    border-radius: 10px;
    padding: 10px 12px 2px;
    margin: 0 0 12px;
    min-width: 0;
}

.site-membro-filhos {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}

.site-membro-filhos li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--site-borda, rgba(127, 127, 127, 0.35));
}

/* A barra dos avisos no app instalado (FEATURE-044): fixa embaixo, acima da barra de gestos. */
.site-app-barra {
    position: fixed;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: 560px;
    margin: 0 auto;
    padding: 14px 16px;
    background: var(--site-superficie);
    border: 1px solid var(--site-borda);
    border-radius: 16px;
    box-shadow: var(--site-sombra);
}

.site-app-barra[hidden] {
    display: none;
}

.site-app-barra p {
    margin: 0;
    flex: 1 1 200px;
    line-height: 1.4;
}

.site-app-barra-acoes {
    display: flex;
    gap: 8px;
}

/* Leve o app para mais gente (FEATURE-044): o QR, o cartaz e o compartilhar. O QR é SVG com
   fundo branco próprio, legível no escuro também. */
.site-app-divulgar {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--site-borda);
}

.site-app-qr svg {
    display: block;
    width: 200px;
    height: 200px;
    margin: 8px auto;
}

.site-app-dica {
    color: var(--site-texto-suave);
    font-size: 14px;
}

/* Os botões do mesmo tamanho (pedido do dono, 10/10/2026): duas colunas iguais, cada botão
   ocupando a célula; o "Compartilhar", quando existe, ocupa a linha toda acima. */
.site-app-compartilhar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: 360px;
    margin: 12px auto 0;
}

.site-app-compartilhar .site-botao {
    width: 100%;
    padding-right: 8px;
    padding-left: 8px;
}

.site-app-compartilhar [data-app-compartilhar] {
    grid-column: 1 / -1;
}

/* Em tela estreita, duas colunas quebrariam "Copiar link" em duas linhas: uma coluna só. */
@media (max-width: 359.98px) {
    .site-app-compartilhar {
        grid-template-columns: minmax(0, 1fr);
    }
}

.site-app-compartilhar [hidden] {
    display: none;
}

/* A página do app em duas colunas no computador — instalar | levar para mais gente —, para caber
   sem rolar; uma coluna no celular (pedido do dono, 10/10/2026). */
@media (min-width: 900px) {
    .site-app-conteudo {
        max-width: 1000px;
    }

    .site-app-colunas {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        gap: 40px;
        align-items: start;
    }

    .site-app-divulgar {
        margin-top: 0;
        padding-top: 0;
        padding-left: 40px;
        border-top: 0;
        border-left: 1px solid var(--site-borda);
    }
}

/* O site da igreja nova, com os exemplos à mostra (FEATURE-041, §13): uma linha, no
   tom claro da igreja, que já tem a versão do modo escuro. */
.site-demonstracao {
    margin: 0;
    padding: 9px 16px;
    background: var(--site-clara);
    color: var(--site-texto-clara);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
}

/* A resposta à escala (FEATURE-044, §20): "Vou estar lá" e o "Não posso" que abre o
   motivo. O selo da lista mostra a resposta de cada escala. */
.site-membro-resposta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 8px;
}

.site-membro-resposta > form .site-botao {
    width: 100%;
}

.site-membro-recusa summary {
    display: inline-block;
    min-height: 44px;
    padding: 10px 0;
    color: var(--site-destaque);
    font-weight: 600;
    cursor: pointer;
}

.site-membro-recusa .site-formulario {
    margin-top: 8px;
}

.site-membro-cartao .site-membro-selo {
    align-self: flex-start;
    margin-top: 6px;
    padding: 2px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--site-clara);
    color: var(--site-texto-clara);
    font-size: 13px;
    font-weight: 600;
}

.site-membro-cartao .site-membro-selo-recusado {
    background: transparent;
    border-color: currentColor;
    color: var(--site-texto);
}

/* O evento com inscrição pelo app (FEATURE-044, §20): o botão fica no cartão, sem
   esticar até a largura toda no computador. */
.site-membro-cartao form {
    margin-top: 8px;
}

/* O rótulo do botão é um `span`, e o `.site-membro-cartao span` o pintava na cor
   suave: "Quero me inscrever" saía cinza sobre o degradê. O botão manda na cor dele. */
.site-membro-cartao .site-botao span {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

/* O extrato de dízimos (FEATURE-044, §20): os totais do ano em três quadros, e a
   tabela dos meses rolando dentro dela no celular estreito — nunca a página. */
.site-membro-anos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.site-membro-anos a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--site-borda);
    border-radius: 999px;
    color: var(--site-texto);
    text-decoration: none;
}

.site-membro-anos a[aria-current="page"] {
    background: var(--site-clara);
    color: var(--site-texto-clara);
    border-color: transparent;
    font-weight: 700;
}

.site-membro-totais {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.site-membro-totais > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 12px;
    background: var(--site-superficie);
    border: 1px solid var(--site-borda);
    border-radius: 14px;
}

.site-membro-totais span {
    color: var(--site-texto-suave);
    font-size: 14px;
}

.site-membro-totais strong {
    font-size: 16px;
    white-space: nowrap;
}

.site-membro-tabela-caixa {
    overflow-x: auto;
    margin-bottom: 12px;
}

.site-membro-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.site-membro-tabela th,
.site-membro-tabela td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--site-borda);
    text-align: right;
    white-space: nowrap;
    overflow-wrap: normal;
}

.site-membro-tabela th:first-child {
    text-align: left;
}

.site-membro-tabela-vazio {
    color: var(--site-texto-suave);
}

/* O membro informa a contribuição (FEATURE-044, §21). */
.site-membro-informar {
    margin: 20px 0 12px;
}

.site-membro-informar > summary {
    list-style: none;
    width: 100%;
    cursor: pointer;
}

.site-membro-informar > summary::-webkit-details-marker {
    display: none;
}

.site-membro-informar[open] > summary {
    margin-bottom: 12px;
}

.site-membro-tipo {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    border: 0;
    padding: 0;
    margin: 0 0 12px;
}

.site-membro-tipo legend {
    width: 100%;
    margin-bottom: 4px;
    font-weight: 600;
}

.site-membro-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.site-membro-acoes form {
    margin: 0;
}

/* As escalas do membro sem sinal (FEATURE-046, D8): a linha pequena no topo da área do membro —
   "Sem conexão · versão de", as respostas esperando sinal e as que não foram aceitas. Pequena de
   propósito, como a do mercado: o que importa na tela é a escala. */
.site-membro-offline {
    margin: 0 0 12px;
    font-size: .82rem;
    color: var(--site-texto-suave);
}

.site-membro-offline a {
    color: inherit;
    font-weight: 600;
}

/*
 * O canário contra clonagem (FEATURE-054, D6; `App\Support\Canario`). Sem função: é uma
 * marca que uma cópia do CSS arrasta junto e que prova de onde ela veio. O valor é o
 * `Canario::ID`, e não muda — o `CanarioTest` reprova se ele sumir ou mudar.
 */
:root,
.sa-f22fd157 {
    --sa-f22fd157: "stauros-admin";
}