/* =========================================================
   SITE.CSS — o visual do site público (2026)

   Este arquivo é carregado SÓ nas páginas públicas, depois do app.css.
   O painel não carrega este arquivo, então nada aqui muda o painel.

   As cores, as fontes e o arredondamento continuam vindo de
   Painel › Aparência: aqui só se USAM as variáveis que o painel define
   (--marca-escura, --destaque, --fundo, --fonte-titulo, --raio...).
   Nenhuma cor da igreja está escrita neste arquivo.

   As ideias que guiam tudo daqui pra baixo:

   1. Claro para ler, escuro para emocionar. As páginas são claras; a
      capa, o versículo, o menu do celular e o rodapé são escuros.
   2. Linhas finas no lugar de caixinhas com sombra. O espaço em branco
      separa as coisas; quando precisa de mais, entra um traço de 1px.
   3. Alinhado à esquerda. Título, texto e botões começam na mesma
      margem — o olho não fica pulando entre o centro e a borda.
   4. Duas fontes com papéis claros: a serifada para os momentos
      grandes (títulos, versículo, horários), a sem serifa para ler e
      para tudo que é informação.

   Para voltar o site ao visual antigo: em app/Views/layouts/site.php,
   troque  parcial('parciais/cabeca', ['site' => true])
   por      parcial('parciais/cabeca')  — o resto dos arquivos novos
   continua funcionando com o app.css, só sem este acabamento.
   ========================================================= */


/* =========================================================
   FONTES (moram no próprio servidor, em assets/fonts)
   As regras @font-face não ficam mais aqui: o PHP escreve só as das
   duas fontes escolhidas em Aparência (catálogo em app/Core/Fontes.php).
   Assim dá para ter várias fontes na lista sem o site baixar nenhuma
   que não está usando.
   ========================================================= */


/* =========================================================
   VARIÁVEIS DO VISUAL NOVO
   Os nomes em português dizem o papel de cada cor, não a cor em si:
   "tinta" é a cor do texto, "papel" a do fundo, "noite" a dos
   momentos escuros. Trocar a cor no painel muda tudo de uma vez.
   ========================================================= */
.site {
    --tinta:        var(--texto);
    --tinta-suave:  var(--texto-suave);
    --papel:        var(--fundo);
    --papel-alto:   #f6f6f4;
    --papel-forte:  #e9e8e5;

    /* Quanto o fundo das seções alternadas escurece (0% = igual ao
       fundo; 12% já fica bem marcado). */
    --alternado:    8%;
    --noite:        var(--marca-escura);
    --noite-tinta:  var(--escura-texto, #fff);
    --acento:       var(--destaque);
    --serifa:       var(--fonte-titulo);
    --sans:         var(--fonte);

    /* traços finos (versão para navegador antigo; a moderna vem abaixo) */
    --linha:        rgba(31, 35, 40, .13);
    --linha-forte:  rgba(31, 35, 40, .28);

    /* movimento: começa rápido e pousa devagar — é o que dá a sensação
       de "fluido" sem parecer elástico ou de brinquedo */
    --curva:        cubic-bezier(.22, .8, .2, 1);

    --largura:      1240px;
    --margem:       clamp(1.25rem, 4.2vw, 3rem);
    --espaco:       clamp(3.25rem, 2rem + 4vw, 6rem);
    --barra-altura: 76px;
    --vao:          clamp(1rem, 2vw, 1.75rem);
}

/* color-mix: mistura a cor do painel com branco ou transparente.
   Assim o "papel mais claro" e os traços acompanham qualquer cor de
   fundo que for escolhida, em vez de ficarem fixos num cinza. */
@supports (color: color-mix(in oklab, red, blue)) {
    .site {
        /* O cinza dos textos secundários puxado um pouco para a cor do
           texto: com fundos acinzentados (como #e0e0e0) o cinza original
           ficava no limite do contraste mínimo para leitura. */
        --tinta-suave: color-mix(in oklab, var(--texto-suave), var(--texto) 30%);
        --papel-alto:  color-mix(in oklab, var(--fundo), #fff 62%);
        --papel-forte: color-mix(in oklab, var(--fundo), var(--marca-escura) var(--alternado));
        --linha:       color-mix(in oklab, var(--tinta) 13%, transparent);
        --linha-forte: color-mix(in oklab, var(--tinta) 28%, transparent);
    }
}


/* =========================================================
   BASE
   ========================================================= */
html { scroll-behavior: smooth; }

.site {
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
}

/* A serifada nova só tem um peso. Sem "font-synthesis: none" o navegador
   inventaria um negrito borrado em cima dela.

   O ":where(.site)" deixa estas regras com a MENOR força possível
   (especificidade zero na parte do .site): servem de padrão e qualquer
   classe de componente lá embaixo (.cartao-pastor__nome, .ficha__titulo...)
   consegue mudar sem precisar de truque. */
:where(.site) h1,
:where(.site) h2 {
    font-family: var(--serifa);
    font-weight: var(--titulo-peso, 400);
    font-synthesis: none;
    color: inherit;
    line-height: 1.04;
    letter-spacing: -.012em;
    text-wrap: balance;
}

:where(.site) h3 {
    font-family: var(--sans);
    font-weight: 600;
    color: inherit;
    line-height: 1.3;
    letter-spacing: -.005em;
}

:where(.site) p { text-wrap: pretty; }

.site .container {
    max-width: var(--largura);
    padding-inline: var(--margem);
}

.site ::selection { background: var(--noite); color: var(--noite-tinta); }

/* Foco visível em fundo escuro: o contorno vira branco para aparecer. */
.capa :focus-visible,
.gaveta :focus-visible,
.versiculo-site :focus-visible,
.rodape-site :focus-visible,
.evento-topo :focus-visible,
.barra--sobre-capa:not(.barra--rolou) :focus-visible {
    outline-color: #fff;
}

.pular-para-conteudo { background: var(--noite); }


/* =========================================================
   PEÇAS PEQUENAS QUE SE REPETEM
   ========================================================= */

/* Palavrinha acima dos títulos ("Cultos", "Agenda"...). */
.rotulo {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    font-family: var(--sans);
    font-size: .74rem;
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}
.rotulo::before {
    content: "";
    width: 1.6rem;
    height: 1px;
    background: currentColor;
    opacity: .6;
}
.rotulo--claro { color: rgba(255, 255, 255, .84); }

/* A setinha (parciais/seta.php) anda um pouco quando o mouse passa. */
.seta {
    flex: none;
    transition: transform .45s var(--curva);
}
.seta--voltar { transform: rotate(180deg); }

/* Link com seta: "Ver a agenda completa →" */
.link-seta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding-bottom: .2rem;
    color: var(--tinta);
    font-weight: 600;
    font-size: .98rem;
    text-decoration: none;
    border-bottom: 1px solid var(--linha-forte);
    transition: border-color .3s ease;
}
.link-seta:hover { text-decoration: none; border-bottom-color: currentColor; }
.link-seta:hover .seta { transform: translateX(4px); }
.link-seta:hover .seta--voltar { transform: rotate(180deg) translateX(4px); }
.link-seta--claro { color: #fff; border-bottom-color: rgba(255, 255, 255, .45); }
.link-seta--claro:hover { color: #fff; }

/* ---------- Botões ---------- */
.site .botao {
    gap: .6rem;
    padding: .85rem 1.35rem;
    border: 1px solid var(--noite);
    border-radius: var(--raio);
    background: var(--noite);
    color: var(--noite-tinta);
    font-family: var(--sans);
    font-size: .98rem;
    font-weight: 600;
    letter-spacing: .005em;
    transition: background .35s var(--curva), color .35s var(--curva), border-color .35s var(--curva);
}
.site .botao:hover {
    background: var(--tinta);
    border-color: var(--tinta);
    color: var(--noite-tinta);
}
.site .botao:hover .seta { transform: translateX(4px); }

.site .botao--claro { background: #fff; border-color: #fff; color: #15171a; }
.site .botao--claro:hover { background: rgba(255, 255, 255, .86); border-color: transparent; color: #15171a; }

.site .botao--contorno { background: transparent; border-color: var(--linha-forte); color: var(--tinta); }
.site .botao--contorno:hover { background: transparent; border-color: var(--tinta); color: var(--tinta); }

.site .botao--destaque { background: var(--acento); border-color: var(--acento); color: #fff; }

.site .botao--grande  { padding: 1rem 1.6rem; font-size: 1.02rem; }
.site .botao--pequeno { padding: .5rem .95rem; font-size: .86rem; }


/* =========================================================
   TOPO
   Na home ele fica transparente por cima da foto e ganha fundo
   quando a pessoa rola. O site.js liga as classes:
     .barra--rolou      passou do alto da página
     .barra--escondida  rolando para baixo (some para dar espaço)
   ========================================================= */
/* O topo é "fixed" em todas as páginas (e não "sticky") para poder
   encolher ao rolar SEM empurrar o conteúdo. Em troca, a página
   reserva o espaço dele lá em cima — menos na home, onde ele fica
   por cima da foto de propósito. */
.site { padding-top: var(--barra-altura); }
.site--com-capa { padding-top: 0; }
html { scroll-padding-top: 90px; }

.barra {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 80;
    background: var(--topo-fundo, #fff);
    color: var(--topo-texto, var(--tinta));
    border-bottom: 1px solid rgba(var(--topo-veu, 31, 35, 40), .1);
    transition: background-color .45s var(--curva), color .45s var(--curva),
                border-color .45s var(--curva), transform .5s var(--curva);
    view-transition-name: barra;
}

.barra__interno {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.5vw, 2.25rem);
    height: var(--barra-altura);
    transition: height .45s var(--curva);
}

.barra--rolou .barra__interno { height: 64px; }
.barra--escondida { transform: translateY(-100%); }

.barra__marca {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
    margin-right: auto;
    color: inherit;
    text-decoration: none;
}
.barra__marca:hover { text-decoration: none; color: inherit; }

.barra .marca__simbolo,
.gaveta .marca__simbolo,
.rodape-site .marca__simbolo {
    width: 42px;
    height: 42px;
    background: none;
    border-radius: 50%;
    color: inherit;
    font-size: 1.3rem;
}
.barra--rolou .marca__simbolo { width: 36px; height: 36px; }

.barra__nome {
    font-family: var(--serifa);
    font-weight: var(--titulo-peso, 400);
    font-size: 1.4rem;
    line-height: 1;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.barra__nav,
.barra__acao { display: none; }

.barra__link {
    position: relative;
    padding-block: .45rem;
    color: inherit;
    font-size: .94rem;
    font-weight: 500;
    text-decoration: none;
    opacity: .76;
    white-space: nowrap;
    transition: opacity .3s ease;
}
/* O tracinho embaixo do link entra da esquerda e sai pela direita. */
.barra__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .5s var(--curva);
}
.barra__link:hover { opacity: 1; text-decoration: none; color: inherit; }
.barra__link:hover::after,
.barra__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.barra__link[aria-current="page"] { opacity: 1; }

.barra__acao {
    align-items: center;
    padding: .5rem 1.1rem;
    border: 1px solid rgba(var(--topo-veu, 31, 35, 40), .32);
    border-radius: 999px;
    color: inherit;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .3s ease, border-color .3s ease;
}
.barra__acao:hover {
    text-decoration: none;
    color: inherit;
    border-color: currentColor;
}

.barra__menu {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem 0;
    background: none;
    border: 0;
    color: inherit;
    font: 600 .92rem/1 var(--sans);
    cursor: pointer;
}
.barra__menu-linhas {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 9px;
}
.barra__menu-linhas span {
    position: absolute;
    left: 0;
    right: 0;
    height: 1.5px;
    background: currentColor;
    transition: transform .35s var(--curva);
}
.barra__menu-linhas span:first-child { top: 0; }
.barra__menu-linhas span:last-child { bottom: 0; left: 6px; }
.barra__menu:hover .barra__menu-linhas span:last-child { transform: translateX(-6px); }

/* No computador largo o menu aparece inteiro; abaixo disso, botão. */
@media (min-width: 1180px) {
    .barra__nav { display: flex; gap: clamp(1rem, 1.6vw, 1.75rem); }
    .barra__acao { display: inline-flex; }
    .barra__menu { display: none; }
}

/* Por cima da foto da capa: transparente e com letra branca. */
.barra--sobre-capa {
    background: transparent;
    border-bottom-color: transparent;
    color: #fff;
}
.barra--sobre-capa .barra__acao { border-color: rgba(255, 255, 255, .45); }

.barra--sobre-capa.barra--rolou {
    background: var(--topo-fundo, #fff);
    color: var(--topo-texto, var(--tinta));
    border-bottom-color: rgba(var(--topo-veu, 31, 35, 40), .1);
}
.barra--sobre-capa.barra--rolou .barra__acao { border-color: rgba(var(--topo-veu, 31, 35, 40), .32); }

@media (max-width: 380px) {
    .barra__nome { font-size: 1.18rem; }
    .barra .marca__simbolo { width: 36px; height: 36px; }
}


/* =========================================================
   MENU DO CELULAR — tela cheia
   Quem abre e fecha é o app.js (o mesmo de antes). Ele tira o
   "hidden", espera um quadro e liga .aberto; para fechar, desliga
   .aberto e só esconde de novo 300ms depois. Por isso a animação de
   FECHAR tem que caber em 0,3s; a de abrir pode ser mais longa.
   ========================================================= */
.site .menu-fundo { display: none; }

.gaveta {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    flex-direction: column;
    background: var(--noite);
    color: var(--noite-tinta);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    clip-path: inset(0 0 100% 0);
    transition: clip-path .3s var(--curva);
}
.gaveta[hidden] { display: none; }
.gaveta.aberto {
    clip-path: inset(0 0 0 0);
    transition: clip-path .7s var(--curva);
}

.gaveta__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--barra-altura);
}
.gaveta__nome {
    font-family: var(--serifa);
    font-weight: var(--titulo-peso, 400);
    font-size: 1.4rem;
}
.gaveta__fechar {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1rem;
    background: none;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    color: inherit;
    font: 600 .9rem/1 var(--sans);
    cursor: pointer;
}
.gaveta__fechar span { font-size: 1.25rem; line-height: .6; }

.gaveta__lista {
    list-style: none;
    margin: 0;
    padding-block: 1.25rem 2rem;
}
.gaveta__link {
    display: inline-block;
    padding-block: .2rem;
    font-family: var(--serifa);
    font-weight: var(--titulo-peso, 400);
    font-size: max(1.6rem, calc(clamp(2rem, 7.5vw, 3rem) * var(--titulo-escala, 1)));
    line-height: 1.12;
    color: inherit;
    text-decoration: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .25s ease, transform .3s var(--curva);
}
.gaveta.aberto .gaveta__link {
    opacity: 1;
    transform: none;
    transition: opacity .6s var(--curva), transform .8s var(--curva);
    transition-delay: calc(var(--i, 0) * 50ms + 150ms);
}
.gaveta__link:hover { text-decoration: none; color: inherit; font-style: italic; }
.gaveta__link[aria-current="page"] { font-style: italic; }
.gaveta__link[aria-current="page"]::after {
    content: "";
    display: inline-block;
    width: .32em;
    height: .32em;
    margin-left: .35em;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
}

.gaveta__rodape {
    display: grid;
    gap: 1.25rem;
    justify-items: start;
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    opacity: 0;
    transition: opacity .25s ease;
}
.gaveta.aberto .gaveta__rodape { opacity: 1; transition: opacity .8s ease .45s; }

.gaveta__culto { margin: 0; display: grid; gap: .35rem; font-size: .98rem; }
.gaveta__culto .rotulo { color: rgba(255, 255, 255, .7); }
.gaveta__redes { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; }
.gaveta__redes a { color: inherit; opacity: .8; font-weight: 500; }

body.menu-aberto { overflow: hidden; }


/* =========================================================
   AVISOS (mensagens de "enviado com sucesso" etc.)
   ========================================================= */
.avisos-site { padding-top: 1.5rem; }
.site--com-capa .avisos-site {
    position: relative;
    z-index: 2;
    padding-top: calc(var(--barra-altura) + 1rem);
    background: var(--noite);
}
.aviso-admin { padding-block: 0 2rem; }
.aviso-admin--topo { padding-top: 1.5rem; }


/* =========================================================
   CAPA DA HOME
   As fotos trocam sozinhas (site.js), com um zoom lento na que está
   aparecendo. A altura vem de Aparência › Altura da capa, medida em
   porcentagem da tela (--capa-tela).
   ========================================================= */
.capa {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: max(600px, calc(var(--capa-tela, 76) * 1vh));
    overflow: hidden;
    background: var(--noite);
    color: #fff;
}
/* "svh" é a altura da tela SEM a barra de endereço do celular — sem ela,
   no iPhone a capa ficaria mais alta que a tela visível. */
@supports (height: 1svh) {
    .capa { min-height: max(600px, calc(var(--capa-tela, 76) * 1svh)); }
}

.capa__fotos {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.capa__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 38%;
    opacity: 0;
    transform: scale(1.09);
    transition: opacity 1.6s ease, transform 9s linear;
}
.capa__foto--ativa {
    opacity: 1;
    transform: scale(1);
}
/* A primeira foto entra com o zoom já na carga da página. */
.capa__foto--ativa:first-child { animation: capa-zoom 2.6s var(--curva) both; }
@keyframes capa-zoom {
    from { transform: scale(1.12); }
    to   { transform: scale(1); }
}

/* Paralaxe (Aparência › "capa fixa"): a foto anda mais devagar que a
   página. O site.js só escreve quanto a página rolou em --rolagem. */
.capa--paralaxe .capa__fotos {
    transform: translate3d(0, calc(var(--rolagem, 0) * .35px), 0);
    will-change: transform;
}

/* Véu escuro por cima da foto: mais forte embaixo (onde fica o título)
   e no alto (onde fica o menu). Sem ele, uma foto clara engoliria o
   texto branco. */
.capa__veu {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 26%),
        linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .38) 42%, rgba(0, 0, 0, .1) 72%),
        linear-gradient(90deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 60%);
}

.capa__conteudo {
    align-self: end;
    padding-top: calc(var(--barra-altura) + 3rem);
    padding-bottom: clamp(1.5rem, 4vh, 3rem);
}

.capa__titulo {
    max-width: 11ch;
    margin: 0 0 1.4rem;
    color: #fff;
    font-size: calc(clamp(3rem, 1.25rem + 6.4vw, 7.75rem) * var(--titulo-escala, 1));
    line-height: calc(.92 * var(--titulo-linha, 1));
    letter-spacing: -.025em;
}

/* Cada palavra sobe de dentro de uma "janela" que esconde o que está
   fora dela. O respiro em cima e embaixo (padding) existe para não
   cortar o acento do "é" nem a perninha do "g". */
.capa__palavra {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding: .16em .03em .12em;
    margin: -.16em -.03em -.12em;
}
.capa__palavra > span {
    display: inline-block;
    animation: palavra-sobe 1.15s var(--curva) both;
    animation-delay: calc(.15s + var(--i, 0) * .09s);
}
@keyframes palavra-sobe {
    from { transform: translateY(108%); }
    to   { transform: none; }
}

.capa__texto {
    max-width: 34ch;
    margin: 0 0 2.1rem;
    color: rgba(255, 255, 255, .88);
    font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem);
    line-height: 1.45;
    animation: surge 1s var(--curva) .55s both;
}

.capa__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
    animation: surge 1s var(--curva) .7s both;
}

@keyframes surge {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

.capa__base {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    padding-bottom: clamp(1.5rem, 3.5vh, 2.25rem);
    animation: surge 1s var(--curva) .9s both;
}

.capa__proximo {
    display: grid;
    gap: .3rem;
    padding: .2rem 0 .2rem 1.1rem;
    border-left: 1px solid rgba(255, 255, 255, .45);
    color: #fff;
    text-decoration: none;
    order: 2;
}
.capa__proximo:hover { text-decoration: none; color: #fff; border-left-color: #fff; }
.capa__proximo-quando {
    font-family: var(--serifa);
    font-weight: var(--titulo-peso, 400);
    font-size: calc(clamp(1.35rem, 1.15rem + .6vw, 1.7rem) * var(--titulo-escala, 1));
    line-height: 1.1;
}
.capa__proximo-nome { font-size: .92rem; color: rgba(255, 255, 255, .78); }

/* "Hoje tem culto": o tracinho do rótulo vira um ponto que pulsa. */
.capa__proximo--hoje .rotulo::before {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    opacity: 1;
    animation: pulsa 1.8s ease-in-out infinite;
}
@keyframes pulsa {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
    50%      { box-shadow: 0 0 0 .45rem rgba(255, 255, 255, 0); }
}

.capa__controles {
    display: flex;
    align-items: center;
    gap: 1rem;
    order: 1;
}
.capa__pontos { display: flex; gap: .45rem; }
.capa__ponto {
    display: grid;
    align-items: center;
    width: clamp(2rem, 4vw, 3rem);
    height: 28px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}
.capa__ponto span {
    position: relative;
    display: block;
    height: 2px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(255, 255, 255, .32);
}
/* A barrinha da foto atual vai enchendo; quando enche, o site.js passa
   para a próxima foto. Assim o tempo de cada foto mora só aqui. */
.capa__ponto span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left;
}
.capa__ponto[aria-current="true"] span::after { animation: enche 7s linear forwards; }
.capa--parada .capa__ponto[aria-current="true"] span::after {
    animation-play-state: paused;
}
@keyframes enche { to { transform: scaleX(1); } }

.capa__pausa {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
}
.capa__pausa:hover { border-color: #fff; }
/* Ícone de pausa: duas barrinhas. Pressionado, vira o triângulo de "tocar". */
.capa__pausa span {
    width: 9px;
    height: 10px;
    border-left: 3px solid currentColor;
    border-right: 3px solid currentColor;
}
.capa__pausa[aria-pressed="true"] span {
    width: 0;
    height: 0;
    margin-left: 3px;
    border-right: 0;
    border-left: 9px solid currentColor;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}

@media (min-width: 760px) {
    .capa__proximo { order: 1; }
    .capa__controles { order: 2; }
}


/* =========================================================
   PRÓXIMOS PASSOS (batismo e célula) — logo abaixo da capa
   ========================================================= */
.passos { border-bottom: 1px solid var(--linha); }

.passos__grade { display: grid; }

.passo {
    position: relative;
    display: grid;
    gap: .55rem;
    justify-items: start;
    padding: clamp(1.5rem, 3.2vw, 2.5rem) 3.5rem clamp(1.5rem, 3.2vw, 2.5rem) 0;
    color: var(--tinta);
    text-decoration: none;
}
.passo + .passo { border-top: 1px solid var(--linha); }
.passo:hover { text-decoration: none; color: var(--tinta); }

.passo__titulo {
    font-family: var(--serifa);
    font-weight: var(--titulo-peso, 400);
    font-size: calc(clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem) * var(--titulo-escala, 1));
    line-height: 1.04;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: .14em;
    transition: text-decoration-color .4s ease;
}
.passo:hover .passo__titulo { text-decoration-color: currentColor; }
.passo__texto { color: var(--tinta-suave); max-width: 34ch; }

.passo__seta {
    position: absolute;
    right: 0;
    top: 50%;
    width: 30px;
    height: 30px;
    transform: translateY(-50%);
}
.passo:hover .passo__seta { transform: translate(6px, -50%); }

@media (min-width: 760px) {
    .passos__grade { grid-template-columns: 1fr 1fr; }
    .passo + .passo {
        border-top: 0;
        border-left: 1px solid var(--linha);
        padding-left: clamp(1.5rem, 4vw, 3.5rem);
    }
}


/* =========================================================
   SEÇÕES
   ========================================================= */
.bloco { padding-block: var(--espaco); }

/* FUNDO ALTERNADO: uma seção no fundo da Aparência, a seguinte num tom
   mais forte, e assim por diante.

   Quem decide qual seção fica forte é a POSIÇÃO dela na página
   (nth-of-type), e não uma classe escrita à mão em cada uma. Assim, se
   uma seção some — semana sem evento, por exemplo —, as de baixo se
   reorganizam sozinhas e nunca ficam duas iguais encostadas.

   Nas páginas internas a faixa do título (.abertura) é a primeira e já
   vem no tom forte; o conteúdo logo abaixo dela fica no claro.

   Para deixar a diferença mais forte ou mais fraca, mude --alternado
   lá no começo do arquivo. */
main > .bloco:nth-of-type(odd) { background: var(--papel-forte); }
main > .bloco.bloco--fim { background: transparent; }

/* A primeira seção depois da faixa do título começa mais perto dela. */
.abertura + .bloco,
.bloco--colado { padding-top: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem); }

/* A faixinha final com o link "voltar": baixa, separada por um traço. */
.bloco--fim {
    padding-block: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--linha);
}

.bloco__cabeca {
    display: grid;
    gap: 1rem;
    justify-items: start;
    max-width: 46rem;
    margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}
.bloco__titulo {
    margin: 0;
    font-size: calc(clamp(2.2rem, 1.35rem + 2.8vw, 3.9rem) * var(--titulo-escala, 1));
}
.bloco__intro {
    max-width: 40ch;
    margin: 0;
    color: var(--tinta-suave);
    font-size: 1.02rem;
}

/* Título à esquerda, links/setas à direita, na mesma linha. */
.bloco__cabeca--com-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 3rem;
    max-width: none;
}
.bloco__cabeca--com-acoes > div:first-child {
    display: grid;
    gap: 1rem;
    justify-items: start;
    max-width: 46rem;
}
.bloco__acoes {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Duas colunas: o título fica parado à esquerda enquanto a lista rola.
   No celular vira uma coluna só; aí o vão entre título e conteúdo é só
   o "gap" (antes somava com a margem do cabeçalho e ficava o dobro). */
.bloco__dividido { display: grid; gap: clamp(1.75rem, 3vw, 2.6rem); }
.bloco__dividido > .bloco__cabeca { margin-bottom: 0; }

@media (min-width: 900px) {
    .bloco__dividido {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: clamp(2.25rem, 4.5vw, 4.25rem);
        align-items: start;
    }
    .bloco__cabeca--lateral {
        position: sticky;
        top: calc(var(--barra-altura) + 2rem);
        margin-bottom: 0;
    }
}

/* Grupos de uma página (álbuns de culto e de evento, funções da
   liderança): cada grupo é uma seção própria, para entrar na alternância
   de fundo, mas com menos respiro que uma seção comum — são partes do
   mesmo assunto. */
.bloco--grupo { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.25rem); }

.grupo-cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--linha-forte);
}
.grupo-cabeca__titulo {
    margin: 0;
    font-size: calc(clamp(1.7rem, 1.3rem + 1.4vw, 2.6rem) * var(--titulo-escala, 1));
}
/* O número ao lado do título fica no alto, como uma nota de rodapé. */
.grupo-cabeca__conta {
    align-self: flex-start;
    margin-top: .35em;
    color: var(--tinta-suave);
    font-size: .8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.grupo-cabeca__texto {
    flex-basis: 100%;
    margin: 0;
    color: var(--tinta-suave);
}
.grupo-cabeca__link { margin-left: auto; }


/* =========================================================
   ABERTURA DAS PÁGINAS INTERNAS (parciais/abertura.php)
   A faixa do título, no tom mais forte. O conteúdo começa no tom claro
   logo abaixo, então toda página tem as duas cores.
   ========================================================= */
.abertura {
    padding-block: clamp(2rem, 1rem + 4vw, 4.75rem) clamp(2rem, 1rem + 3vw, 3.5rem);
    background: var(--papel-forte);
}

.abertura__interno {
    display: grid;
    gap: 1.75rem;
}

.abertura__titulos {
    display: grid;
    gap: 1.1rem;
    justify-items: start;
}

.abertura__titulo {
    margin: 0;
    font-size: calc(clamp(2.7rem, 1.45rem + 5vw, 6.2rem) * var(--titulo-escala, 1));
    line-height: calc(.95 * var(--titulo-linha, 1));
    letter-spacing: -.022em;
    animation: surge 1s var(--curva) .08s both;
}

.abertura__intro {
    max-width: 44ch;
    color: var(--tinta-suave);
    font-size: clamp(1.04rem, 1rem + .25vw, 1.18rem);
    line-height: 1.55;
    animation: surge 1s var(--curva) .25s both;
}
.abertura__intro p:last-child { margin-bottom: 0; }

.abertura__meta { margin: 0; color: var(--tinta-suave); }

.abertura__voltar {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .6rem;
    color: var(--tinta-suave);
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
}
.abertura__voltar:hover { color: var(--tinta); text-decoration: none; }
.abertura__voltar:hover .seta--voltar { transform: rotate(180deg) translateX(4px); }
.abertura__voltar--claro,
.abertura__voltar--claro:hover { color: rgba(255, 255, 255, .88); }

@media (min-width: 900px) {
    .abertura__interno--com-intro {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: end;
        column-gap: clamp(2.25rem, 4.5vw, 4.25rem);
    }
}


/* =========================================================
   QUADRO DE HORÁRIOS DOS CULTOS (parciais/agenda.php)
   ========================================================= */
.horarios {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--linha-forte);
}
.horarios > li { border-bottom: 1px solid var(--linha-forte); }

.horario {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "dia   hora"
        "nome  nome"
        "fotos fotos";
    gap: .3rem 1rem;
    padding: 1.15rem .15rem;
    color: var(--tinta);
    text-decoration: none;
    transition: color .5s var(--curva), padding .6s var(--curva);
}
.horario__dia {
    grid-area: dia;
    font-family: var(--serifa);
    font-weight: var(--titulo-peso, 400);
    font-size: calc(clamp(1.6rem, 1.25rem + 1.1vw, 2.2rem) * var(--titulo-escala, 1));
    line-height: 1.05;
}
.horario__hora {
    grid-area: hora;
    align-self: center;
    font-size: 1.08rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.horario__nome { grid-area: nome; color: var(--tinta-suave); transition: color .5s var(--curva); }
.horario__fotos {
    grid-area: fotos;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .25rem;
    font-size: .88rem;
    font-weight: 600;
}

.horario__dia { white-space: nowrap; }

@media (min-width: 640px) {
    .horario {
        grid-template-columns: minmax(10rem, 1.15fr) 5.5rem minmax(0, 1.5fr) auto;
        grid-template-areas: "dia hora nome fotos";
        align-items: baseline;
        padding-block: 1.3rem;
    }
    .horario__hora  { align-self: baseline; }
    .horario__fotos { margin-top: 0; }

    /* "subgrid": as linhas dividem as MESMAS colunas. Assim a hora de
       "Domingo" fica exatamente embaixo da hora de "Quarta-feira",
       mesmo com nomes de dia de tamanhos diferentes. */
    @supports (grid-template-columns: subgrid) {
        .horarios {
            display: grid;
            grid-template-columns: max-content max-content minmax(0, 1fr) auto;
            column-gap: clamp(1.25rem, 3vw, 2.75rem);
        }
        .horarios > li,
        .horario {
            display: grid;
            grid-column: 1 / -1;
            grid-template-columns: subgrid;
        }
        .horario { grid-template-areas: none; }
        .horario__dia   { grid-area: auto; grid-column: 1; }
        .horario__hora  { grid-area: auto; grid-column: 2; }
        .horario__nome  { grid-area: auto; grid-column: 3; }
        .horario__fotos { grid-area: auto; grid-column: 4; }
    }
}

/* Na página dos cultos o quadro é a estrela: tudo um pouco maior. */
.horarios--grande .horario__dia { font-size: calc(clamp(1.9rem, 1.35rem + 1.9vw, 3rem) * var(--titulo-escala, 1)); }
.horarios--grande .horario__hora { font-size: 1.2rem; }
.horarios--grande .horario__nome { font-size: 1.05rem; }

/* Linha que é link (o culto tem fotos): ao passar o mouse, ela se
   enche com o tom escuro de baixo para cima. Só em quem tem mouse —
   no celular o "passar por cima" fica preso depois do toque. */
@media (hover: hover) {
    .horario--link::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--noite);
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform .55s var(--curva);
    }
    .horario--link:hover {
        color: var(--noite-tinta);
        padding-inline: 1.25rem;
        text-decoration: none;
    }
    .horario--link:hover::before { transform: scaleY(1); }
    .horario--link:hover .horario__nome { color: inherit; }
    .horario--link:hover .seta { transform: translateX(4px); }
}


/* =========================================================
   CARROSSEL (trilho) — eventos da home
   É uma rolagem de lado de verdade, do próprio navegador: no celular
   arrasta com o dedo, no computador as setas empurram. Não depende de
   biblioteca nenhuma.
   ========================================================= */
.trilho {
    container-type: inline-size;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* O primeiro cartão começa alinhado com o título da seção, e a
       fila vai até a borda da tela — dá a dica de que tem mais. */
    padding-inline: max(var(--margem), calc((100% - var(--largura)) / 2 + var(--margem)));
    scroll-padding-inline: max(var(--margem), calc((100% - var(--largura)) / 2 + var(--margem)));
    padding-bottom: .5rem;
}
.trilho::-webkit-scrollbar { display: none; }
.trilho:focus-visible { outline-offset: -3px; }

.trilho__faixa {
    list-style: none;
    display: flex;
    gap: var(--vao);
    width: max-content;
    margin: 0;
    padding: 0;
}
.trilho__item {
    flex: none;
    width: min(84cqw, 360px);
    scroll-snap-align: start;
}
@media (min-width: 640px) {
    .trilho__item { width: calc((100cqw - var(--vao)) / 2); }
}
@media (min-width: 1000px) {
    .trilho__item { width: calc((100cqw - 2 * var(--vao)) / 3); }
}

.trilho__setas { display: flex; gap: .5rem; }
.trilho__setas[hidden] { display: none; }
.trilho__seta {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--linha-forte);
    border-radius: 50%;
    background: transparent;
    color: var(--tinta);
    cursor: pointer;
    transition: background .3s ease, color .3s ease, border-color .3s ease, opacity .3s ease;
}
.trilho__seta--voltar .seta { transform: rotate(180deg); }
.trilho__seta:hover:not(:disabled) {
    background: var(--noite);
    border-color: var(--noite);
    color: var(--noite-tinta);
}
.trilho__seta:disabled { opacity: .35; cursor: default; }


/* =========================================================
   FICHA — evento ou álbum (parciais/cartao-evento e cartao-album)
   A foto é o cartão. Nada de caixa branca nem sombra.
   ========================================================= */
.ficha {
    display: block;
    color: var(--tinta);
    text-decoration: none;
}
.ficha:hover { text-decoration: none; color: var(--tinta); }

.ficha__imagem {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--raio);
    background: var(--noite);
}
.ficha--album .ficha__imagem { aspect-ratio: 4 / 5; }

.ficha__imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--curva), filter .6s ease;
}
.ficha:hover .ficha__imagem img { transform: scale(1.05); }

.ficha__sem-foto {
    display: grid;
    place-items: center;
    height: 100%;
    font-family: var(--serifa);
    font-weight: var(--titulo-peso, 400);
    font-size: 5rem;
    color: rgba(255, 255, 255, .22);
}

/* A data grande no canto da foto, como num cartaz. */
.ficha__data {
    position: absolute;
    top: .85rem;
    left: .85rem;
    display: grid;
    justify-items: center;
    min-width: 3.5rem;
    padding: .55rem .55rem .5rem;
    border-radius: max(4px, calc(var(--raio) - 3px));
    background: var(--papel-alto);
    color: var(--tinta);
    line-height: 1;
}
.ficha__dia { font-family: var(--serifa); font-weight: var(--titulo-peso, 400); font-size: calc(1.85rem * var(--titulo-escala, 1)); }
.ficha__mes {
    margin-top: .25rem;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.ficha__selos {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    display: flex;
    gap: .35rem;
}
.ficha__selo {
    padding: .3rem .6rem;
    border-radius: 999px;
    background: rgba(10, 12, 15, .66);
    color: #fff;
    font-size: .74rem;
    font-weight: 600;
}

.ficha__corpo {
    display: grid;
    gap: .35rem;
    justify-items: start;
    padding-top: 1.05rem;
}
.ficha__quando {
    color: var(--tinta-suave);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.ficha__titulo {
    margin: 0;
    font-size: clamp(1.08rem, 1rem + .3vw, 1.25rem);
    text-wrap: balance;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    transition: text-decoration-color .35s ease;
}
.ficha:hover .ficha__titulo { text-decoration-color: currentColor; }
.ficha__texto {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    color: var(--tinta-suave);
    font-size: .97rem;
}
.ficha__local {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--tinta-suave);
    font-size: .88rem;
}
.ficha__local::before {
    content: "";
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: var(--acento);
}

/* O que já passou fica em preto e branco; colore quando o mouse passa. */
.ficha--passada .ficha__imagem img { filter: grayscale(.9); }
.ficha--passada:hover .ficha__imagem img { filter: none; }

/* Grade de fichas (páginas Eventos e Fotos) */
.fichas {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: clamp(1.6rem, 2.6vw, 2.25rem) var(--vao);
    margin: 0;
    padding: 0;
}
.fichas--albuns { grid-template-columns: repeat(auto-fill, minmax(min(100%, 235px), 1fr)); }
@media (max-width: 520px) {
    .fichas--albuns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem .85rem; }
    .fichas--albuns .ficha__titulo { font-size: 1.02rem; }
}


/* =========================================================
   PASTORES — cartões lado a lado (home)
   Inspirados no site da Sara: foto em cima, função, nome e o botão
   do Instagram, tudo centralizado e na mesma altura. É a única parte
   do site com cartão e sombra, de propósito: assim ela se destaca.
   ========================================================= */

/* Cabeçalho de seção centralizado (usado aqui). O tracinho do rótulo
   ganha um par do outro lado, para ficar simétrico. */
.bloco__cabeca--centro {
    justify-items: center;
    margin-inline: auto;
    text-align: center;
}
.bloco__cabeca--centro .rotulo::after {
    content: "";
    width: 1.6rem;
    height: 1px;
    background: currentColor;
    opacity: .6;
}

/* auto-fit + justify-content: center → 1 pastor fica no meio, 2 ficam
   lado a lado, e no celular (sem largura para dois) um embaixo do outro. */
.pastoral {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 23rem));
    justify-content: center;
    gap: clamp(1.25rem, 3vw, 2rem);
}

.cartao-pastor {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(.85rem, 1.5vw, 1.1rem) clamp(.85rem, 1.5vw, 1.1rem) clamp(1.4rem, 2.4vw, 1.9rem);
    border-radius: calc(var(--raio) + 6px);
    background: var(--papel-alto);
    text-align: center;
    box-shadow: 0 1px 2px rgba(20, 22, 26, .05), 0 12px 32px -14px rgba(20, 22, 26, .24);
    transition: transform .5s var(--curva), box-shadow .5s var(--curva);
}

/* Sobe um pouco quando o mouse passa (só onde existe mouse). Usa
   "transform" porque a animação de aparecer já usa "translate" —
   assim uma não atrapalha a outra. */
@media (hover: hover) {
    .cartao-pastor:hover {
        transform: translateY(-6px);
        box-shadow: 0 2px 4px rgba(20, 22, 26, .06), 0 24px 48px -18px rgba(20, 22, 26, .34);
    }
}

.cartao-pastor__foto {
    width: 100%;
    aspect-ratio: 1 / 1;          /* a foto do pastor já é salva quadrada */
    margin-bottom: 1.25rem;
    overflow: hidden;
    border-radius: var(--raio);
    background: var(--noite);
}
.cartao-pastor__foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;  /* se precisar cortar, corta embaixo, nunca o rosto */
}
.cartao-pastor__iniciais {
    display: grid;
    place-items: center;
    height: 100%;
    font-family: var(--serifa);
    font-weight: var(--titulo-peso, 400);
    font-size: clamp(4rem, 3rem + 4vw, 6rem);
    color: rgba(255, 255, 255, .24);
}

/* flex: 1 → o bloco de texto estica, e o botão do Instagram fica
   sempre no pé do cartão, alinhado com o do cartão do lado. */
.cartao-pastor__dados {
    flex: 1 0 auto;
    display: grid;
    gap: .45rem;
    align-content: start;
    justify-items: center;
    padding-inline: .5rem;
}
.cartao-pastor__funcao {
    font-size: .74rem;
    font-weight: 650;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}
.cartao-pastor__nome {
    margin: 0;
    font-family: var(--serifa);
    font-weight: var(--titulo-peso, 400);
    font-size: calc(clamp(1.55rem, 1.3rem + .8vw, 2rem) * var(--titulo-escala, 1));
    line-height: calc(1.08 * var(--titulo-linha, 1));
    letter-spacing: -.01em;
    text-wrap: balance;
}
.cartao-pastor__texto {
    max-width: 32ch;
    margin: .25rem 0 0;
    color: var(--tinta-suave);
    font-size: .95rem;
}

/* O botão do Instagram, em pílula escura (como na Sara). */
.cartao-pastor__insta {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    max-width: 100%;
    margin-top: 1.15rem;
    padding: .62rem 1.2rem;
    border-radius: 999px;
    background: var(--noite);
    color: var(--noite-tinta);
    font-size: .86rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .3s var(--curva), transform .3s var(--curva);
}
.cartao-pastor__insta:hover {
    background: #000;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
.cartao-pastor__arroba {
    overflow: hidden;
    font-weight: 450;
    opacity: .78;
    text-overflow: ellipsis;
}


/* =========================================================
   PESSOAS DA LIDERANÇA (parciais/cartao-pessoa.php)
   ========================================================= */
.perfis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem var(--vao);
}
@media (min-width: 760px)  { .perfis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .perfis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.perfil { display: grid; gap: .3rem; align-content: start; justify-items: start; }

.perfil__foto {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: .8rem;
    overflow: hidden;
    border-radius: var(--raio);
    background: var(--linha);
}
.perfil__foto img { width: 100%; height: 100%; object-fit: cover; }
.perfil__iniciais {
    display: grid;
    place-items: center;
    height: 100%;
    font-family: var(--serifa);
    font-weight: var(--titulo-peso, 400);
    font-size: clamp(2.6rem, 2rem + 2.4vw, 3.8rem);
    color: var(--tinta-suave);
}
.perfil__funcao {
    color: var(--tinta-suave);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.perfil__nome { margin: 0; font-size: 1.14rem; }
.perfil__bio { margin: .2rem 0 0; color: var(--tinta-suave); font-size: .93rem; }
.perfil__instagram { margin-top: .2rem; color: var(--tinta); font-size: .9rem; font-weight: 600; }


/* =========================================================
   VERSÍCULO — faixa escura
   ========================================================= */
.versiculo-site {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem);
    background: var(--noite);
    color: var(--noite-tinta);
}
.versiculo-site__figura {
    position: relative;
    max-width: 64rem;
    margin: 0;
}
.versiculo-site__texto { margin: 0; }
.versiculo-site__texto p {
    margin: 0;
    font-family: var(--serifa);
    font-style: italic;
    font-size: calc(clamp(1.75rem, 1.05rem + 2.8vw, 3.8rem) * var(--titulo-escala, 1));
    line-height: 1.1;
    letter-spacing: -.012em;
    text-wrap: balance;
}
/* As aspas grandes "penduradas" fora da margem, como em revista. */
.versiculo-site__texto p::before {
    content: "\201C";
    position: absolute;
    top: -.42em;
    left: -.06em;
    font-size: 3em;
    line-height: 1;
    opacity: .14;
}
.versiculo-site__ref {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    margin-top: 2.25rem;
    font-size: .8rem;
    font-weight: 650;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .78;
}
.versiculo-site__ref::before {
    content: "";
    width: 2.5rem;
    height: 1px;
    background: currentColor;
    opacity: .6;
}


/* =========================================================
   FITA DE FOTOS (home) — corre sozinha e para quando o mouse
   passa por cima ou quando alguém navega por ela com o teclado.
   A lista vem desenhada duas vezes do PHP: as duas andam juntas e,
   quando a primeira sai inteira pela esquerda, a segunda está
   exatamente no lugar onde ela começou. Por isso a volta não "pula".
   ========================================================= */
.fita {
    --fita-vao: .5rem;
    display: flex;
    gap: var(--fita-vao);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.fita__faixa {
    list-style: none;
    display: flex;
    flex: none;
    gap: var(--fita-vao);
    margin: 0;
    padding: 0;
}
.fita--correndo .fita__faixa {
    animation: fita-corre calc(var(--fotos, 10) * 4.5s) linear infinite;
}
.fita:hover .fita__faixa,
.fita:focus-within .fita__faixa { animation-play-state: paused; }
@keyframes fita-corre {
    to { transform: translateX(calc(-100% - var(--fita-vao))); }
}

/* Poucas fotos: em vez de correr, uma fileira que rola com o dedo. */
.fita:not(.fita--correndo) {
    overflow-x: auto;
    padding-inline: var(--margem);
    -webkit-mask-image: none;
            mask-image: none;
}

.fita__item {
    flex: none;
    width: clamp(180px, 21vw, 300px);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--raio-pequeno);
    background: var(--noite);
}
.fita__item a { display: block; height: 100%; }
.fita__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--curva);
}
.fita__item a:hover img { transform: scale(1.06); }


/* =========================================================
   ÍNDICE (atalhos da home) — uma lista de títulos grandes.
   Ao passar o mouse, a linha se enche com o tom escuro.
   ========================================================= */
.indice { border-top: 1px solid var(--linha-forte); }

.indice__item {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "titulo seta"
        "texto  texto";
    gap: .5rem 1rem;
    padding-block: clamp(1.15rem, 2.3vw, 1.8rem);
    border-bottom: 1px solid var(--linha-forte);
    color: var(--tinta);
    text-decoration: none;
    transition: color .55s var(--curva), padding .65s var(--curva);
}
.indice__titulo {
    grid-area: titulo;
    font-family: var(--serifa);
    font-weight: var(--titulo-peso, 400);
    font-size: calc(clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem) * var(--titulo-escala, 1));
    line-height: 1;
    letter-spacing: -.015em;
}
.indice__texto {
    grid-area: texto;
    max-width: 40ch;
    color: var(--tinta-suave);
    transition: color .55s var(--curva);
}
.indice__seta {
    grid-area: seta;
    align-self: center;
    width: clamp(28px, 3vw, 40px);
    height: auto;
}

@media (min-width: 900px) {
    .indice__item {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto;
        grid-template-areas: "titulo texto seta";
        align-items: center;
        gap: 2rem;
    }
}

@media (hover: hover) {
    .indice__item::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--noite);
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform .6s var(--curva);
    }
    .indice__item:hover {
        color: var(--noite-tinta);
        padding-inline: clamp(1rem, 2.5vw, 2rem);
        text-decoration: none;
    }
    .indice__item:hover::before { transform: scaleY(1); }
    .indice__item:hover .indice__texto { color: inherit; }
    .indice__item:hover .indice__seta { transform: translateX(6px); }
}


/* =========================================================
   TEXTO CORRIDO (História, Nossa fé, descrição de evento)
   ========================================================= */
.leitura { display: grid; gap: 2.25rem; }

.prosa-site {
    max-width: 66ch;
    font-size: clamp(1rem, .97rem + .2vw, 1.1rem);
    line-height: 1.78;
}
.prosa-site p { margin: 0 0 1.35em; }
.prosa-site p:last-child { margin-bottom: 0; }
.prosa-site a {
    color: var(--tinta);
    text-decoration: underline;
    text-decoration-color: var(--acento);
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

/* O primeiro parágrafo abre a página grande, em serifa. */
.prosa-site--abre > p:first-child {
    margin-bottom: 1.1em;
    font-family: var(--serifa);
    font-size: calc(clamp(1.4rem, 1.05rem + 1.25vw, 2.1rem) * var(--titulo-escala, 1));
    line-height: 1.22;
    letter-spacing: -.008em;
}

.leitura__lado {
    display: grid;
    gap: .55rem;
    justify-items: start;
    padding-top: 1.1rem;
    border-top: 1px solid var(--linha-forte);
}
.leitura__lado .rotulo { margin-bottom: .4rem; }
.leitura__link {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--tinta);
    font-family: var(--serifa);
    font-weight: var(--titulo-peso, 400);
    font-size: calc(1.5rem * var(--titulo-escala, 1));
    line-height: 1.2;
    text-decoration: none;
}
.leitura__link:hover { color: var(--tinta); text-decoration: none; }
.leitura__link:hover .seta { transform: translateX(4px); }

@media (min-width: 900px) {
    .leitura {
        grid-template-columns: minmax(0, 8fr) minmax(0, 3fr);
        gap: clamp(2.25rem, 5vw, 5rem);
        align-items: start;
    }
    .leitura__lado { position: sticky; top: calc(var(--barra-altura) + 2rem); }
}


/* =========================================================
   PÁGINA DO CULTO — endereço
   ========================================================= */
.endereco { display: grid; gap: 1.75rem; justify-items: start; }
.endereco__texto {
    font-family: var(--serifa);
    font-style: normal;
    font-size: calc(clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem) * var(--titulo-escala, 1));
    line-height: 1.12;
}
.endereco__acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
}


/* =========================================================
   PÁGINA DO EVENTO
   ========================================================= */
.evento-topo {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: end;
    min-height: 360px;
    overflow: hidden;
    background: var(--noite);
    color: #fff;
}
.evento-topo--foto { min-height: clamp(460px, 74vh, 780px); }

.evento-topo__foto {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: capa-zoom 2.4s var(--curva) both;
}
.evento-topo__veu {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 30%),
        linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .35) 55%, rgba(0, 0, 0, .12) 100%);
}
.evento-topo__conteudo {
    display: grid;
    gap: 1rem;
    justify-items: start;
    padding-top: calc(var(--barra-altura) + 3rem);
    padding-bottom: clamp(2.5rem, 6vh, 4.5rem);
}
.evento-topo__titulo {
    max-width: 16ch;
    margin: 0;
    color: #fff;
    font-size: calc(clamp(2.5rem, 1.4rem + 4.3vw, 5.6rem) * var(--titulo-escala, 1));
    line-height: calc(.96 * var(--titulo-linha, 1));
    letter-spacing: -.02em;
    animation: surge 1s var(--curva) .1s both;
}

.evento-corpo { display: grid; gap: 2.25rem; }
.evento-corpo__resumo {
    margin: 0 0 1.5rem;
    font-family: var(--serifa);
    font-size: calc(clamp(1.45rem, 1.1rem + 1.25vw, 2.1rem) * var(--titulo-escala, 1));
    line-height: 1.22;
    text-wrap: balance;
}
.evento-corpo__info { display: grid; border-top: 1px solid var(--linha-forte); }

.info-linha {
    display: grid;
    gap: .55rem;
    justify-items: start;
    padding-block: 1.3rem;
    border-bottom: 1px solid var(--linha-forte);
}
.info-linha p { margin: 0; }
.info-linha .botao { width: 100%; }

@media (min-width: 900px) {
    .evento-corpo {
        grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
        gap: clamp(2.25rem, 5vw, 5rem);
        align-items: start;
    }
    .evento-corpo__info { position: sticky; top: calc(var(--barra-altura) + 2rem); }
}

.site .videos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 2rem var(--vao); }
.site .video__quadro,
.site .video__arquivo { border-radius: var(--raio); }
.site .video figcaption { text-align: left; }


/* =========================================================
   GALERIA (álbum e evento) — a "lupa" que abre a foto grande
   continua sendo a do app.css
   ========================================================= */
.site .galeria {
    grid-template-columns: repeat(auto-fill, minmax(min(46%, 210px), 1fr));
    gap: .5rem;
}
.site .galeria__item {
    border-radius: var(--raio-pequeno);
    background: var(--noite);
}
.site .galeria__item img { transition: transform 1s var(--curva); }
.site .galeria__item:hover img { transform: scale(1.05); }
.galeria__dica {
    margin: 1.25rem 0 0;
    color: var(--tinta-suave);
    font-size: .88rem;
}

.album-evento { margin: 0 0 2rem; }


/* =========================================================
   CONTRIBUA
   ========================================================= */
.doacao { display: grid; gap: 2.25rem; }

.doacao__dados { display: grid; gap: 2.25rem; align-content: start; }

.doacao__bloco {
    display: grid;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--linha-forte);
}

.site .pix-chave {
    padding: .9rem .9rem .9rem 1.25rem;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio);
    background: var(--papel-alto);
}
.site .pix-chave code {
    min-width: 0;
    font-family: var(--sans);
    font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
    font-weight: 600;
    letter-spacing: .01em;
}

.doacao__titular { margin: 0; color: var(--tinta-suave); }
.doacao__titular strong { color: var(--tinta); }

.doacao__aviso {
    margin: 0;
    padding-left: 1rem;
    border-left: 2px solid var(--acento);
    color: var(--tinta-suave);
    font-size: .93rem;
}

.site .pix-arte { margin: 0; }
.site .pix-arte a {
    border-radius: var(--raio);
    background: var(--noite);
}
.site .pix-arte img { transition: transform 1s var(--curva); }
.site .pix-arte a:hover img { transform: scale(1.02); }
.site .pix-arte figcaption {
    margin-top: .9rem;
    color: var(--tinta-suave);
    font-size: .9rem;
    text-align: left;
}

@media (min-width: 900px) {
    .doacao--com-arte {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: clamp(2.25rem, 4.5vw, 4.25rem);
        align-items: start;
    }
    .doacao--com-arte .pix-arte { position: sticky; top: calc(var(--barra-altura) + 2rem); }
}


/* =========================================================
   FORMULÁRIOS DO SITE (batismo, célula)
   ========================================================= */
.formulario-site { display: grid; gap: 2.75rem; }

.formulario-site__convite {
    margin: 0 0 2rem;
    font-family: var(--serifa);
    font-size: calc(clamp(1.45rem, 1.1rem + 1.2vw, 2rem) * var(--titulo-escala, 1));
    line-height: 1.22;
    text-wrap: balance;
}

.formulario-site__passos {
    counter-reset: passo;
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--linha-forte);
}
.formulario-site__passos li {
    counter-increment: passo;
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    padding-block: 1rem;
    border-bottom: 1px solid var(--linha);
    color: var(--tinta-suave);
}
.formulario-site__passos li::before {
    content: counter(passo, decimal-leading-zero);
    padding-top: .15rem;
    color: var(--tinta);
    font-size: .8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.formulario-site__par { display: grid; gap: 0 1rem; }
.formulario-site__dica { margin: -.35rem 0 1.5rem; }
.campo--curto { max-width: 160px; }

.site .campo { margin-bottom: 1.35rem; }
.site .campo label {
    margin-bottom: .5rem;
    color: var(--tinta-suave);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.site .campo__dica { color: var(--tinta-suave); }

.site input[type="text"],
.site input[type="email"],
.site input[type="tel"],
.site input[type="number"],
.site textarea,
.site select {
    padding: .9rem 1rem;
    border: 1px solid var(--linha-forte);
    border-radius: var(--raio-pequeno);
    background: var(--papel-alto);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: 1rem;
}
.site input:focus,
.site textarea:focus,
.site select:focus {
    border-color: var(--tinta);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(31, 35, 40, .12);
}

@media (min-width: 560px) {
    .formulario-site__par { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
    .formulario-site {
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: clamp(2.25rem, 5vw, 5rem);
        align-items: start;
    }
    .formulario-site__lado { position: sticky; top: calc(var(--barra-altura) + 2rem); }
}


/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape-site {
    padding-top: clamp(3.5rem, 2.25rem + 4.5vw, 6rem);
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
    background: var(--noite);
    color: var(--noite-tinta);
}
.rodape-site a { color: inherit; }

.rodape-site__chamada {
    display: grid;
    gap: 1.1rem;
    justify-items: start;
    padding-bottom: clamp(2.25rem, 4.5vw, 3.5rem);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.rodape-site__grande {
    margin: 0;
    font-family: var(--serifa);
    font-weight: var(--titulo-peso, 400);
    font-size: calc(clamp(2.4rem, 1.3rem + 4.4vw, 5.5rem) * var(--titulo-escala, 1));
    line-height: calc(.98 * var(--titulo-linha, 1));
    letter-spacing: -.022em;
    text-wrap: balance;
}
.rodape-site__culto {
    display: block;
    margin-top: .4em;
    font-size: max(1.3rem, .38em);
    letter-spacing: -.005em;
    opacity: .66;
}
.rodape-site__onde {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.75rem;
    margin: .5rem 0 0;
    opacity: .9;
}
.rodape-site .link-seta { color: inherit; border-bottom-color: rgba(255, 255, 255, .4); }

.rodape-site__colunas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 2.5rem;
    padding-block: clamp(2rem, 4vw, 3rem);
}
.rodape-site__titulo {
    margin: 0 0 1rem;
    color: inherit;
    font-family: var(--sans);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .6;
}
.rodape-site__lista {
    list-style: none;
    display: grid;
    gap: .6rem;
    margin: 0;
    padding: 0;
}
.rodape-site__lista a { text-decoration: none; opacity: .88; transition: opacity .25s ease; }
.rodape-site__lista a:hover { opacity: 1; text-decoration: underline; text-underline-offset: .2em; }
/* Duas colunas quando cabe; numa coluna só quando o rodapé fica estreito
   (tablet), em vez de quebrar "Nossa história" em duas linhas. */
.rodape-site__lista--duas {
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    column-gap: 1.5rem;
}

.rodape-site__base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: .86rem;
}
.rodape-site__base p { margin: 0; opacity: .72; }
.rodape-site__marca {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    font-family: var(--serifa);
    font-weight: var(--titulo-peso, 400);
    font-size: 1.3rem;
    text-decoration: none;
}
.rodape-site__marca:hover { text-decoration: none; }
.rodape-site .marca__simbolo { width: 38px; height: 38px; }


/* =========================================================
   ENTRADA AO ROLAR
   O site.js marca com .revelado o que entra na tela, e a peça sobe
   um pouco enquanto aparece. O que já estava visível quando a página
   abriu ganha .ja-visivel e não anima (senão piscaria).
   Sem JavaScript, nada disto acontece e tudo aparece normal.

   Usa "translate" e não "transform" de propósito: assim não briga
   com outros movimentos que a mesma peça já tenha.
   ========================================================= */
.js-revelar [data-revelar]:not(.ja-visivel):not(.revelado) { opacity: 0; }
.js-revelar [data-revelar].revelado {
    animation: revela 1s var(--curva) both;
    animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes revela {
    from { opacity: 0; translate: 0 28px; }
    to   { opacity: 1; translate: none; }
}


/* =========================================================
   TRANSIÇÃO ENTRE PÁGINAS
   Nos navegadores que já entendem (Chrome, Edge, Safari recentes), a
   página nova entra num esmaecer suave em vez do corte seco. Nos
   outros, nada muda — a página só abre normalmente.
   ========================================================= */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-sai .28s ease both; }
::view-transition-new(root) { animation: vt-entra .55s var(--curva) both; }
@keyframes vt-sai   { to   { opacity: 0; } }
@keyframes vt-entra { from { opacity: 0; translate: 0 12px; } }


/* =========================================================
   QUEM PEDIU MENOS MOVIMENTO
   No celular e no computador dá para pedir "reduzir movimento" nas
   configurações de acessibilidade. Para essas pessoas (enjoo, labirintite,
   distração), o site fica parado: nada sobe, nada corre, nada troca sozinho.
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .site *,
    .site *::before,
    .site *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .capa__foto { transform: none !important; }
    .capa .capa__ponto span::after { animation: none !important; }
    .capa--paralaxe .capa__fotos { transform: none !important; }
    .cartao-pastor:hover,
    .cartao-pastor__insta:hover { transform: none; }

    .fita--correndo .fita__faixa { animation: none !important; }
    .fita--correndo { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .fita--correndo .fita__faixa + .fita__faixa { display: none; }

    @view-transition { navigation: none; }
}