/* =========================================================
   ★ IDENTIDADE VISUAL ★
   ---------------------------------------------------------
   ESTE É O ÚNICO BLOCO QUE VOCÊ PRECISA MEXER PARA MUDAR
   A CARA DO SITE INTEIRO: cores, fontes, cantos arredondados.

   Depois de salvar, atualize a página com Ctrl+F5.
   (o F5 comum pode mostrar a versão antiga do CSS)

   → LOGO: não é aqui. Salve o arquivo como
     public/assets/img/logo.png  (ou .svg)  e pronto.

   → NOME DA IGREJA: não é aqui. É no arquivo .env,
     na linha APP_NOME.
   ========================================================= */
:root {
    /* ---------- CORES DA MARCA ----------
       --marca         cor principal (topo, botões, menu lateral)
       --marca-escura  versão mais escura (títulos, fundo do painel)
       --marca-clara   versão mais clara (links, hover de botão)
       --destaque      cor de chamariz (botão "Área de membros")

       Sugestões prontas — troque os 4 valores de uma vez:
       O 4º valor é a cor de destaque (botões de chamariz). Em todas as
       sugestões abaixo ela é da MESMA família da marca, um tom mais claro —
       chama atenção sem brigar com o resto.

         Azul (atual):  #1e3a5f  #16293f  #2d5486  +  #4a7fb5
         Vinho:         #6b2737  #4d1c27  #8f3448  +  #b4576d
         Verde:         #2d5940  #1f3d2c  #3d7856  +  #58a37a
         Roxo:          #4a3468  #33244a  #63478a  +  #8a68b8
         Grafite:       #2f3640  #1e2229  #454f5e  +  #6b7a90
    */
    --marca:            #1e3a5f;   /* azul profundo — confiança, serenidade */
    --marca-escura:     #16293f;
    --marca-clara:      #2d5486;
    --destaque:         #4a7fb5;   /* azul claro — mesma família da marca */
    --destaque-escuro:  #3a6795;

    /* Neutros */
    --fundo:            #f7f6f3;   /* off-white quente */
    --superficie:       #ffffff;
    --superficie-alt:   #f1efea;
    --borda:            #e2ded6;
    --borda-forte:      #cfc9bd;

    /* Texto */
    --texto:            #1f2328;
    --texto-suave:      #5c6470;
    --texto-fraco:      #8b939f;
    --texto-invertido:  #ffffff;

    /* Estados */
    --sucesso:          #1f7a4d;
    --sucesso-fundo:    #e6f4ec;
    --erro:             #b3261e;
    --erro-fundo:       #fdeceb;
    --aviso:            #9a6700;
    --aviso-fundo:      #fdf5e2;
    --info:             #1e5f8f;
    --info-fundo:       #e8f1f8;

    /* Forma */
    --raio:             10px;
    --raio-pequeno:     6px;
    --raio-grande:      18px;
    --sombra:           0 1px 2px rgba(16, 24, 40, .05), 0 4px 12px rgba(16, 24, 40, .06);
    --sombra-forte:     0 8px 28px rgba(16, 24, 40, .12);

    /* ---------- TIPOGRAFIA ----------
       --fonte         textos em geral
       --fonte-titulo  títulos e nome da igreja

       Combinações que funcionam bem (sem instalar nada — já existem
       no Windows, no Mac e no celular):

         Clássica (atual):
           --fonte-titulo: Georgia, "Times New Roman", serif;
         Moderna e limpa:
           --fonte-titulo: "Segoe UI Semibold", "Trebuchet MS", sans-serif;
         Elegante:
           --fonte-titulo: "Palatino Linotype", Palatino, Georgia, serif;
         Sóbria e forte:
           --fonte-titulo: "Cambria", Georgia, serif;

       Sempre deixe as fontes de reserva depois da vírgula: se a
       primeira não existir no computador do visitante, o navegador
       usa a seguinte em vez de escolher qualquer coisa.

       Para usar uma fonte do Google Fonts, veja PERSONALIZAR.md —
       exige liberar o domínio na política de segurança.
    */
    --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fonte-titulo: Georgia, "Times New Roman", serif;

    /* Layout */
    --largura-max: 1140px;
    --barra-lateral: 260px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 16px;
    line-height: 1.6;
    color: var(--texto);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--fonte-titulo);
    line-height: 1.25;
    margin: 0 0 .6em;
    color: var(--marca-escura);
    font-weight: 600;
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1rem; }

a { color: var(--marca-clara); text-decoration: none; }
a:hover { text-decoration: underline; }

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

hr { border: 0; border-top: 1px solid var(--borda); margin: 1.75rem 0; }

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

/* =========================================================
   LAYOUT
   ========================================================= */
.container {
    width: 100%;
    max-width: var(--largura-max);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.pilha > * + * { margin-top: 1rem; }
.centro { text-align: center; }

/* =========================================================
   CABEÇALHO PÚBLICO
   ========================================================= */
.topo {
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
    position: sticky;
    top: 0;
    z-index: 50;
}

.topo__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 72px;
}

.marca {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-family: var(--fonte-titulo);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--marca-escura);
    text-decoration: none;
}
.marca:hover { text-decoration: none; }

.marca__simbolo {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    background: var(--marca);
    color: var(--texto-invertido);
    border-radius: var(--raio-pequeno);
    font-size: 1.1rem;
    flex-shrink: 0;
    overflow: hidden;
}

/* Quando existe um arquivo de logo, ele ocupa o quadrado inteiro
   e o fundo colorido sai da frente. */
.marca__simbolo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.marca__simbolo:has(img) {
    background: transparent;
}

/* HAVENDO LOGO, o cabeçalho mostra só ela — sem o nome escrito ao lado.
   O nome continua no HTML, escondido apenas VISUALMENTE: leitores de
   tela e buscadores continuam lendo. Some da tela, não da página.

   Sem arquivo de logo, o símbolo ✝ sozinho não diria nada — nesse caso
   o nome permanece visível. */
.marca:has(.marca__simbolo img) .marca__nome {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Sozinha, a logo pode ser um pouco maior. */
.topo .marca:has(.marca__simbolo img) .marca__simbolo {
    width: 48px;
    height: 48px;
}

.nav { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }

.nav a {
    padding: .5rem .8rem;
    border-radius: var(--raio-pequeno);
    color: var(--texto-suave);
    font-size: .94rem;
    font-weight: 500;
}
.nav a:hover { background: var(--superficie-alt); color: var(--marca); text-decoration: none; }
.nav a.ativo { color: var(--marca); background: var(--superficie-alt); }

/* =========================================================
   BOTÕES
   ========================================================= */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--raio-pequeno);
    background: var(--marca);
    color: var(--texto-invertido);
    font: inherit;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}
.botao:hover { background: var(--marca-clara); text-decoration: none; color: var(--texto-invertido); }
.botao:active { transform: translateY(1px); }
.botao[disabled], .botao.desabilitado { opacity: .55; cursor: not-allowed; }

.botao--destaque { background: var(--destaque); color: #fff; }
.botao--destaque:hover { background: var(--destaque-escuro); color: #fff; }

.botao--contorno {
    background: transparent;
    border-color: var(--borda-forte);
    color: var(--texto);
}
.botao--contorno:hover { background: var(--superficie-alt); color: var(--marca); }

.botao--perigo { background: var(--erro); }
.botao--perigo:hover { background: #8f1e17; }

.botao--bloco { width: 100%; }
.botao--pequeno { padding: .4rem .75rem; font-size: .85rem; }

/* =========================================================
   CARTÕES
   ========================================================= */
.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1.5rem;
}

.cartao__titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.1rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--borda);
}
.cartao__titulo h2, .cartao__titulo h3 { margin: 0; }

/* =========================================================
   FORMULÁRIOS
   ========================================================= */
.campo { margin-bottom: 1.15rem; }

.campo label {
    display: block;
    margin-bottom: .4rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--texto);
}

.campo__dica {
    display: block;
    margin-top: .35rem;
    font-size: .82rem;
    color: var(--texto-suave);
}

input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="date"], input[type="number"],
input[type="search"], select, textarea {
    width: 100%;
    padding: .65rem .8rem;
    font: inherit;
    font-size: .95rem;
    color: var(--texto);
    background: var(--superficie);
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-pequeno);
    transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--marca-clara);
    box-shadow: 0 0 0 3px rgba(45, 84, 134, .15);
}

textarea { resize: vertical; min-height: 110px; }

.campo--erro input, .campo--erro select, .campo--erro textarea {
    border-color: var(--erro);
    background: var(--erro-fundo);
}

.campo__erro {
    display: block;
    margin-top: .35rem;
    font-size: .85rem;
    color: var(--erro);
    font-weight: 500;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .92rem;
    color: var(--texto-suave);
    cursor: pointer;
}
.checkbox input { width: auto; margin: 0; accent-color: var(--marca); }

.senha-campo { position: relative; }
.senha-campo input { padding-right: 3.2rem; }

.senha-alternar {
    position: absolute;
    right: .45rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: .35rem .5rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--texto-suave);
    cursor: pointer;
    border-radius: var(--raio-pequeno);
}
.senha-alternar:hover { background: var(--superficie-alt); color: var(--marca); }

/* =========================================================
   ALERTAS / FLASH
   ========================================================= */
.alerta {
    display: flex;
    gap: .7rem;
    padding: .85rem 1rem;
    border-radius: var(--raio-pequeno);
    border: 1px solid transparent;
    font-size: .93rem;
    margin-bottom: 1rem;
}
.alerta__icone { flex-shrink: 0; font-weight: 700; }

.alerta--sucesso { background: var(--sucesso-fundo); border-color: #b7e0c8; color: var(--sucesso); }
.alerta--erro    { background: var(--erro-fundo);    border-color: #f3c3c0; color: var(--erro); }
.alerta--aviso   { background: var(--aviso-fundo);   border-color: #eddaa8; color: var(--aviso); }
.alerta--info    { background: var(--info-fundo);    border-color: #bdd8ec; color: var(--info); }

/* =========================================================
   TELA DE AUTENTICAÇÃO
   ========================================================= */
.auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1.25rem;
    background:
        radial-gradient(1000px 500px at 50% -10%, rgba(30, 58, 95, .10), transparent 70%),
        var(--fundo);
}

.auth__caixa {
    width: 100%;
    max-width: 440px;
}

.auth__marca {
    text-align: center;
    margin-bottom: 1.75rem;
}

.auth__marca .marca__simbolo {
    width: 56px; height: 56px;
    margin: 0 auto .8rem;
    font-size: 1.5rem;
    border-radius: var(--raio);
}

.auth__marca h1 {
    font-size: 1.5rem;
    margin: 0 0 .25rem;
}

.auth__marca p {
    margin: 0;
    color: var(--texto-suave);
    font-size: .93rem;
}

.auth__rodape {
    margin-top: 1.5rem;
    text-align: center;
    font-size: .88rem;
    color: var(--texto-suave);
}

/* =========================================================
   PAINEL (área logada)
   ========================================================= */
.painel { display: flex; min-height: 100vh; }

.painel__lateral {
    width: var(--barra-lateral);
    flex-shrink: 0;
    background: var(--marca-escura);
    color: #cfd8e4;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.painel__marca {
    padding: 1.35rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    gap: .65rem;
    color: #fff;
    font-family: var(--fonte-titulo);
    font-weight: 600;
    font-size: 1.02rem;
    text-decoration: none;
}
.painel__marca:hover { text-decoration: none; color: #fff; }
.painel__marca .marca__simbolo { background: rgba(255, 255, 255, .12); width: 34px; height: 34px; }

.painel__menu { padding: 1rem .75rem; flex: 1; }

.painel__menu-titulo {
    padding: .5rem .65rem .35rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: rgba(207, 216, 228, .55);
    font-weight: 700;
}

.painel__menu a {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .65rem;
    border-radius: var(--raio-pequeno);
    color: #cfd8e4;
    font-size: .93rem;
    font-weight: 500;
    margin-bottom: .15rem;
}
.painel__menu a:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
.painel__menu a.ativo { background: var(--marca-clara); color: #fff; }
.painel__menu a .icone { width: 18px; text-align: center; opacity: .85; }

.painel__usuario {
    padding: .9rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    gap: .7rem;
}

.painel__usuario-info { min-width: 0; flex: 1; }
.painel__usuario-nome {
    color: #fff; font-size: .9rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.painel__usuario-papel { font-size: .78rem; color: rgba(207, 216, 228, .7); }

.painel__conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.painel__topo {
    background: var(--superficie);
    border-bottom: 1px solid var(--borda);
    padding: 1rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.painel__topo h1 { margin: 0; font-size: 1.35rem; }

.painel__corpo { padding: 1.75rem; flex: 1; }

/* =========================================================
   BOTÃO "VOLTAR AO SITE" (topo do painel)

   Aparece em TODAS as larguras. Antes ele sumia no celular, que é
   justamente onde a pessoa mais precisa dele: sem barra lateral à
   vista, não sobrava caminho nenhum de volta para o site.

   O texto encolhe em vez de o botão sumir.
   ========================================================= */
.painel__ver-site {
    flex-shrink: 0;
    white-space: nowrap;
}
.painel__ver-site--curto { display: none; }

@media (max-width: 560px) {
    .painel__ver-site--longo { display: none; }
    .painel__ver-site--curto { display: inline; }
    .painel__ver-site { padding-inline: .7rem; gap: .35rem; }
}

/* =========================================================
   AVATAR
   ========================================================= */
.avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--superficie-alt);
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .85rem;
    color: var(--marca);
    border: 1px solid var(--borda);
}
.avatar--grande { width: 96px; height: 96px; font-size: 1.8rem; }
.avatar--pequeno { width: 32px; height: 32px; font-size: .72rem; }

/* =========================================================
   GRADE E ESTATÍSTICAS
   ========================================================= */
.grade {
    display: grid;
    gap: 1.15rem;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.stat {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 1.15rem 1.25rem;
    box-shadow: var(--sombra);
}
.stat__rotulo {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--texto-suave);
    font-weight: 700;
    margin-bottom: .35rem;
}
.stat__valor {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--marca-escura);
    font-family: var(--fonte-titulo);
}

/* =========================================================
   ETIQUETAS
   ========================================================= */
.etiqueta {
    display: inline-flex;
    align-items: center;
    padding: .18rem .55rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .02em;
    border: 1px solid transparent;
}
.etiqueta--ativo    { background: var(--sucesso-fundo); color: var(--sucesso); border-color: #b7e0c8; }
.etiqueta--inativo  { background: var(--erro-fundo);    color: var(--erro);    border-color: #f3c3c0; }
.etiqueta--pendente { background: var(--aviso-fundo);   color: var(--aviso);   border-color: #eddaa8; }
.etiqueta--papel    { background: var(--info-fundo);    color: var(--info);    border-color: #bdd8ec; }

/* =========================================================
   TABELAS
   ========================================================= */
.tabela-envolucro { overflow-x: auto; border-radius: var(--raio); border: 1px solid var(--borda); }

table.tabela {
    width: 100%;
    border-collapse: collapse;
    background: var(--superficie);
    font-size: .93rem;
}
table.tabela th {
    text-align: left;
    padding: .8rem 1rem;
    background: var(--superficie-alt);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--texto-suave);
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 1px solid var(--borda);
}
table.tabela td { padding: .8rem 1rem; border-bottom: 1px solid var(--borda); vertical-align: middle; }
table.tabela tr:last-child td { border-bottom: 0; }
table.tabela tbody tr:hover { background: var(--superficie-alt); }

/* =========================================================
   LISTA SIMPLES
   ========================================================= */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--borda);
}
.lista li:last-child { border-bottom: 0; }

.vazio {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--texto-fraco);
    font-size: .93rem;
}

/* =========================================================
   HERO PÚBLICO
   ========================================================= */
.hero {
    background: linear-gradient(160deg, var(--marca-escura), var(--marca-clara));
    color: #fff;
    padding: clamp(3rem, 9vw, 6rem) 0;
    text-align: center;
    position: relative;
}

/* Com foto de fundo, escurecemos por cima para o texto continuar legível.
   Sem essa camada, uma foto clara engole o título branco. */
/* A altura vem de --capa-altura, definida em Painel > Aparência.
   min-height (e não height) para que um texto longo possa esticar
   o bloco em vez de vazar para fora dele. */
.hero--com-imagem {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: var(--capa-altura, 460px);
    display: flex;
    align-items: center;
    padding-block: clamp(2.5rem, 7vw, 4.5rem);
}
/* CAPA FIXA (efeito parallax): a imagem fica parada e a página rola
   por cima dela.

   Ligado só onde funciona de verdade:
     min-width 861px  -> em telas pequenas o efeito é dispensável
     hover: hover     -> exclui telas de toque. O Safari do iPhone
                         ignora background-attachment: fixed, e vários
                         Android travam a rolagem por causa dele.
     prefers-reduced-motion -> quem pediu menos animação no sistema
                         operacional não recebe o efeito.

   Nos casos excluídos a imagem simplesmente rola junto — o site
   continua bonito, só sem o parallax. */
@media (min-width: 861px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
    .hero--com-imagem.hero--fixa {
        background-attachment: fixed;
    }
}

.hero--com-imagem::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg,
        rgba(0, 0, 0, .62),
        rgba(0, 0, 0, .45));
}
.hero--com-imagem > .container {
    position: relative;
    z-index: 1;
    width: 100%;
}
.hero--com-imagem h1,
.hero--com-imagem p {
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
.hero h1 { color: #fff; margin-bottom: .75rem; }
.hero p { color: rgba(255, 255, 255, .88); font-size: 1.08rem; max-width: 620px; margin: 0 auto 1.75rem; }
.hero__acoes { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* =========================================================
   MENU LATERAL (gaveta)
   O menu fica escondido em QUALQUER tamanho de tela e abre
   deslizando pela direita. Um só menu para celular e desktop.
   ========================================================= */
.pular-para-conteudo {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--marca);
    color: #fff;
    padding: .75rem 1.25rem;
    z-index: 200;
    border-radius: 0 0 var(--raio-pequeno) 0;
}
.pular-para-conteudo:focus {
    left: 0;
    text-decoration: none;
}

.marca__nome {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 62vw;
}

.hamburguer {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: transparent;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-pequeno);
    padding: .55rem .9rem;
    cursor: pointer;
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    color: var(--texto);
    flex-shrink: 0;
}
.hamburguer:hover { background: var(--superficie-alt); border-color: var(--marca-clara); }

/* As três barras desenhadas com border, sem imagem nem ícone externo. */
.hamburguer__barras,
.hamburguer__barras::before,
.hamburguer__barras::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}
.hamburguer__barras { position: relative; }
.hamburguer__barras::before,
.hamburguer__barras::after {
    content: "";
    position: absolute;
    left: 0;
}
.hamburguer__barras::before { top: -6px; }
.hamburguer__barras::after  { top: 6px; }

.menu-fundo {
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 25, .55);
    z-index: 90;
    opacity: 0;
    transition: opacity .25s ease;
}
.menu-fundo.aberto { opacity: 1; }

.menu-lateral {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 86vw);
    background: var(--marca-escura);
    color: #cfd8e4;
    z-index: 100;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    box-shadow: -12px 0 32px rgba(0, 0, 0, .25);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.menu-lateral.aberto { transform: translateX(0); }

.menu-lateral__topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.menu-lateral__titulo {
    font-family: var(--fonte-titulo);
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
}
.menu-lateral__fechar {
    background: none;
    border: 0;
    color: #cfd8e4;
    font-size: 2rem;
    line-height: 1;
    padding: 0 .35rem;
    cursor: pointer;
    border-radius: var(--raio-pequeno);
}
.menu-lateral__fechar:hover { color: #fff; background: rgba(255, 255, 255, .1); }

.menu-lateral__lista {
    list-style: none;
    margin: 0;
    padding: .75rem;
    flex: 1;
}
.menu-lateral__lista a {
    display: block;
    padding: .85rem 1rem;
    border-radius: var(--raio-pequeno);
    color: #cfd8e4;
    font-size: 1rem;
    font-weight: 500;
}
.menu-lateral__lista a:hover {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    text-decoration: none;
}
.menu-lateral__lista a[aria-current="page"] {
    background: var(--marca-clara);
    color: #fff;
}

.menu-lateral__rodape {
    padding: 1rem 1.25rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.redes { display: flex; gap: 1rem; flex-wrap: wrap; }
.redes--menu {
    justify-content: center;
    margin-top: 1rem;
    font-size: .88rem;
}
.redes--menu a { color: rgba(207, 216, 228, .85); }
.redes--menu a:hover { color: #fff; }

body.menu-aberto { overflow: hidden; }

/* =========================================================
   SEÇÕES DO SITE
   ========================================================= */
.secao { padding-block: clamp(2.5rem, 6vw, 4rem); }
.secao--alt { background: var(--superficie-alt); }

.secao__titulo {
    text-align: center;
    margin-bottom: 2rem;
}
.secao__titulo--grupo {
    font-size: 1.25rem;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    color: var(--texto-suave);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.cabecalho-pagina {
    background: linear-gradient(160deg, var(--marca-escura), var(--marca-clara));
    color: #fff;
    padding-block: clamp(2.5rem, 6vw, 4rem);
    text-align: center;
}
.cabecalho-pagina h1 { color: #fff; margin: 0; }

.prosa {
    max-width: 68ch;
    margin-inline: auto;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--texto);
}
.prosa p { margin-bottom: 1.2em; }
.prosa p:last-child { margin-bottom: 0; }

.vazio-pagina {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--texto-suave);
    max-width: 56ch;
    margin-inline: auto;
}

.cartao--link {
    display: block;
    color: inherit;
    transition: transform .15s ease, box-shadow .15s ease;
}
.cartao--link:hover {
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: var(--sombra-forte);
}
.cartao--link h3 { color: var(--marca); }

.botao--claro {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
}
.botao--claro:hover { background: rgba(255, 255, 255, .28); color: #fff; }

/* =========================================================
   PASTORES
   ========================================================= */
.pastores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.75rem;
    max-width: 800px;
    margin-inline: auto;
}

.pastor {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-grande);
    padding: 2rem 1.5rem;
    box-shadow: var(--sombra);
    color: inherit;
}
.pastor--clicavel { transition: transform .15s ease, box-shadow .15s ease; }
.pastor--clicavel:hover {
    text-decoration: none;
    transform: translateY(-4px);
    box-shadow: var(--sombra-forte);
}

.pastor__foto {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    border-radius: var(--raio-grande);
    overflow: hidden;
    background: var(--superficie-alt);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}
.pastor__foto img { width: 100%; height: 100%; object-fit: cover; }
.pastor__iniciais {
    font-family: var(--fonte-titulo);
    font-size: 4.5rem;
    color: var(--marca);
}

.pastor__cargo {
    display: block;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--destaque-escuro);
    font-weight: 700;
}
.pastor__nome { margin: .3rem 0 .5rem; font-size: 1.35rem; }
.pastor__texto { color: var(--texto-suave); font-size: .95rem; margin-bottom: .5rem; }
.pastor__instagram {
    display: inline-block;
    font-size: .9rem;
    font-weight: 600;
    color: var(--marca-clara);
}

/* =========================================================
   PESSOAS (líderes e membros)
   ========================================================= */
.pessoas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1.25rem;
}
.pessoas--compacta { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }

.pessoa {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 1.25rem 1rem;
    text-align: center;
    box-shadow: var(--sombra);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
}

.pessoa__foto {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--superficie-alt);
    display: grid;
    place-items: center;
    margin-bottom: .5rem;
    border: 2px solid var(--borda);
}
.pessoa__foto--pequena { width: 76px; height: 76px; }
.pessoa__foto img { width: 100%; height: 100%; object-fit: cover; }
.pessoa__iniciais {
    font-family: var(--fonte-titulo);
    font-size: 1.6rem;
    color: var(--marca);
}

.pessoa__nome { font-size: 1rem; margin: 0; line-height: 1.3; }
.pessoa__funcao {
    font-size: .8rem;
    color: var(--texto-suave);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.pessoa__bio { font-size: .87rem; color: var(--texto-suave); margin: .4rem 0 0; }
.pessoa__instagram { font-size: .85rem; font-weight: 600; margin-top: .35rem; }
.pessoa__contato {
    font-size: .82rem;
    color: var(--texto-suave);
    margin-top: .4rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    word-break: break-word;
}

/* =========================================================
   AGENDA DE CULTOS
   ========================================================= */
.agenda {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    max-width: 860px;
    margin-inline: auto;
}
.agenda--pagina { max-width: 700px; }

.agenda__item {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-left: 4px solid var(--destaque);
    border-radius: var(--raio-pequeno);
    padding: 1.15rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.agenda__dia {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--texto-suave);
    font-weight: 700;
}
.agenda__hora {
    font-family: var(--fonte-titulo);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--marca-escura);
    line-height: 1.1;
}
.agenda__nome { font-size: .95rem; color: var(--texto); }

/* =========================================================
   PIX
   ========================================================= */
.pix-chave {
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
    background: var(--superficie-alt);
    border: 1px dashed var(--borda-forte);
    border-radius: var(--raio-pequeno);
    padding: .85rem 1rem;
}
.pix-chave code {
    flex: 1;
    min-width: 200px;
    background: transparent;
    border: 0;
    font-size: 1rem;
    word-break: break-all;
    user-select: all;
    padding: 0;
}

/* =========================================================
   RODAPÉ
   ========================================================= */
.rodape {
    background: var(--marca-escura);
    color: rgba(207, 216, 228, .82);
    padding: 3rem 0 1.5rem;
    font-size: .92rem;
    margin-top: 0;
}
.rodape a { color: #fff; }
.rodape h3 {
    color: #fff;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: .9rem;
    font-family: var(--fonte);
    font-weight: 700;
}
.rodape address { font-style: normal; line-height: 1.7; margin-bottom: .6rem; }

.rodape__colunas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 2rem;
    padding-bottom: 2rem;
}

.rodape__marca {
    display: flex;
    align-items: center;
    gap: .7rem;
    color: #fff;
    font-family: var(--fonte-titulo);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: .75rem;
}
.rodape__marca .marca__simbolo { background: rgba(255, 255, 255, .12); }
.rodape__slogan { color: rgba(207, 216, 228, .75); margin: 0; font-size: .9rem; }

.rodape__lista { list-style: none; margin: 0; padding: 0; line-height: 1.9; }
.rodape__lista a { word-break: break-word; }

.rodape__base {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding-top: 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .86rem;
    color: rgba(207, 216, 228, .7);
}
.rodape__separador { opacity: .5; margin-inline: .35rem; }

/* =========================================================
   RESPONSIVO DO SITE PÚBLICO
   ========================================================= */
@media (max-width: 640px) {
    .hamburguer__texto { display: none; }
    .hamburguer { padding: .55rem .7rem; }

    .pastor { padding: 1.25rem 1rem; }
    .pastor__iniciais { font-size: 3.5rem; }

    .agenda { grid-template-columns: 1fr; }
    .pessoas { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .9rem; }
    .pessoa { padding: 1rem .75rem; }
    .pessoa__foto { width: 76px; height: 76px; }

    .rodape__base { justify-content: center; text-align: center; }
    .rodape { padding-top: 2.25rem; }
}

@media (max-width: 380px) {
    .pessoas { grid-template-columns: 1fr 1fr; }
    .marca { font-size: 1rem; gap: .5rem; }
}

/* =========================================================
   INSTALADOR
   ========================================================= */
.verificacao { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.verificacao li {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--borda);
}
.verificacao li:last-child { border-bottom: 0; }
.verificacao__marca { flex-shrink: 0; font-weight: 800; font-size: 1rem; line-height: 1.5; }
.verificacao__marca--ok    { color: var(--sucesso); }
.verificacao__marca--falha { color: var(--erro); }
.verificacao__texto { flex: 1; min-width: 0; }
.verificacao__titulo { font-weight: 600; font-size: .93rem; }
.verificacao__detalhe { font-size: .84rem; color: var(--texto-suave); word-break: break-word; }

/* =========================================================
   UTILITÁRIOS
   ========================================================= */
.texto-suave { color: var(--texto-suave); }
.texto-fraco { color: var(--texto-fraco); }
code {
    font-family: ui-monospace, Consolas, "Courier New", monospace;
    font-size: .88em;
    background: var(--superficie-alt);
    padding: .1em .35em;
    border-radius: 4px;
    border: 1px solid var(--borda);
}
.texto-pequeno { font-size: .87rem; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.flex { display: flex; } .flex-entre { justify-content: space-between; } .flex-centro { align-items: center; }
.gap-1 { gap: .5rem; } .gap-2 { gap: 1rem; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
/* =========================================================
   PAINEL NO CELULAR — a barra lateral vira gaveta
   Mesma ideia do menu do site: escondida, abre por cima,
   fecha no Esc, no fundo escuro ou ao tocar num item.
   ========================================================= */
.painel__fundo {
    position: fixed;
    inset: 0;
    background: rgba(10, 15, 25, .55);
    z-index: 90;
    opacity: 0;
    transition: opacity .25s ease;
}
.painel__fundo.aberto { opacity: 1; }

.painel__fechar {
    display: none;
    position: absolute;
    top: .6rem;
    right: .75rem;
    background: none;
    border: 0;
    color: #cfd8e4;
    font-size: 2rem;
    line-height: 1;
    padding: 0 .35rem;
    cursor: pointer;
    border-radius: var(--raio-pequeno);
}
.painel__fechar:hover { color: #fff; background: rgba(255, 255, 255, .1); }

.hamburguer--painel { display: none; padding: .5rem .7rem; }
.hamburguer--painel .hamburguer__barras { width: 18px; }

@media (max-width: 900px) {
    /* ---- Painel: barra lateral vira gaveta ---- */
    .painel__lateral {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100dvh;
        width: min(290px, 84vw);
        z-index: 100;
        transform: translateX(-100%);
        transition: transform .28s cubic-bezier(.4, 0, .2, 1);
        box-shadow: 12px 0 32px rgba(0, 0, 0, .25);
    }
    .painel__lateral.aberto { transform: translateX(0); }
    .painel__fechar { display: block; }

    .hamburguer--painel { display: inline-flex; }

    .painel__topo {
        gap: .75rem;
        padding: .85rem 1rem;
    }
    .painel__topo h1 {
        font-size: 1.1rem;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .painel__corpo { padding: 1.15rem 1rem; }

    /* Grades do painel viram coluna única — duas colunas em 360px
       de largura não cabem sem espremer os campos. */
    .painel__corpo .grade { grid-template-columns: 1fr !important; }

    body.menu-aberto { overflow: hidden; }
}

@media (min-width: 901px) {
    /* No computador o ☰ some — os links já estão no topo.
       A regra que MOSTRA o .nav-topo fica junto da definição dele,
       mais abaixo: uma media query não muda a especificidade, então
       o que vale é quem aparece por último no arquivo. */
    .hamburguer { display: none; }
}

/* =========================================================
   MENU HORIZONTAL DO TOPO (só no computador)

   Escondido por PADRÃO. A regra que o mostra está na media
   query de 901px acima. Fazer o contrário — mostrar por padrão
   e esconder na media query — foi um bug real aqui: como media
   query não muda a especificidade, a declaração que aparecesse
   por último no arquivo venceria, e o menu continuava visível
   no celular.
   ========================================================= */
.nav-topo {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex: 1;
    min-width: 0;
}

/* Só a fonte: sem caixa, sem fundo, sem borda. */
.nav-topo a {
    padding: .35rem 0;
    color: var(--texto-suave);
    font-size: .95rem;
    font-weight: 500;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.nav-topo a:hover {
    color: var(--marca);
    text-decoration: none;
    border-bottom-color: var(--borda-forte);
}
.nav-topo a.ativo {
    color: var(--marca);
    font-weight: 700;
    border-bottom-color: var(--marca);
}

/* O link do painel segue a MESMA regra dos outros — só texto.
   Antes ele tinha a classe .botao junto, o que punha fundo azul
   atrás; com a cor do texto também azul, virava um bloco preto. */
.nav-topo__acao {
    padding: .35rem 0;
    color: var(--marca);
    font-size: .95rem;
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.nav-topo__acao:hover {
    color: var(--marca-escura);
    text-decoration: none;
    border-bottom-color: var(--marca-clara);
}

/* A partir daqui é computador: o menu aparece e o cabeçalho vira
   uma grade de três colunas — logo | menu | vazio. As colunas das
   pontas têm a mesma largura (1fr), então o menu fica exatamente
   no centro da página, independente do tamanho do logo. */
@media (min-width: 901px) {
    .nav-topo { display: flex; }

    .topo__interno {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 1.5rem;
    }
    .marca { justify-self: start; }
}

/* Em telas médias, aperta o espaçamento antes de virar ☰.
   Foi ajustado quando a aba "Eventos" entrou: com sete abas mais o
   link do painel, o espaçamento antigo empurrava o menu para fora
   do centro entre 901px e 1100px. */
@media (min-width: 901px) and (max-width: 1240px) {
    .nav-topo { gap: .95rem; }
    .nav-topo a,
    .nav-topo__acao { font-size: .85rem; }
    .marca__nome { max-width: 150px; }
}

@media (min-width: 901px) and (max-width: 1010px) {
    .nav-topo { gap: .7rem; }
    .nav-topo a,
    .nav-topo__acao { font-size: .8rem; }
    .topo__interno { gap: .9rem; }
}

/* =========================================================
   CONVITES DA HOME (batismo e célula)

   Coluna centralizada. A versão anterior usava grid com o ícone
   e a seta ocupando duas linhas, e o texto era espremido numa
   coluna estreita — quebrava uma palavra por linha.
   ========================================================= */
.secao--convites { padding-block: clamp(2rem, 5vw, 3rem); }

.convites {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.15rem;
    max-width: 820px;
    margin-inline: auto;
}

.convite {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: .6rem;
    background: var(--marca);
    color: #fff;
    border-radius: var(--raio-grande);
    padding: 2rem 1.5rem;
    box-shadow: var(--sombra);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.convite:hover {
    text-decoration: none;
    color: #fff;
    background: var(--marca-clara);
    transform: translateY(-3px);
    box-shadow: var(--sombra-forte);
}

.convite__icone {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .16);
    border-radius: 50%;
    font-size: 1.6rem;
    flex-shrink: 0;
}
.convite__titulo {
    font-family: var(--fonte-titulo);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}
.convite__texto {
    font-size: .93rem;
    color: rgba(255, 255, 255, .85);
    max-width: 30ch;
    line-height: 1.5;
}
.convite__seta {
    font-size: 1.25rem;
    opacity: .85;
    margin-top: .15rem;
}

@media (max-width: 480px) {
    .convite { padding: 1.5rem 1.15rem; }
    .convite__icone { width: 48px; height: 48px; font-size: 1.35rem; }
    .convite__titulo { font-size: 1.1rem; }
}

/* =========================================================
   CAMPO-ISCA (honeypot)
   Precisa existir no HTML e ser invisível para gente.
   display:none seria detectado por robôs mais espertos —
   tirar da tela com position é mais convincente.
   ========================================================= */
.isca {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* =========================================================
   PEDIDOS DO SITE (painel)
   ========================================================= */
.selo {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 .35rem;
    margin-left: auto;
    background: var(--destaque);
    color: #fff;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
}

.pedido__mensagem {
    margin: 0 0 .75rem;
    padding: .7rem .9rem;
    background: var(--superficie-alt);
    border-left: 3px solid var(--marca-clara);
    border-radius: var(--raio-pequeno);
    font-size: .92rem;
    color: var(--texto);
}

/* =========================================================
   RESPONSIVO GERAL DO PAINEL
   ========================================================= */
@media (max-width: 640px) {
    .painel__corpo .cartao { padding: 1.15rem 1rem; }
    .painel__corpo .tabela-envolucro { margin-inline: -.25rem; }
    table.tabela { font-size: .87rem; }
    table.tabela th, table.tabela td { padding: .6rem .65rem; }

    .stat { padding: .9rem 1rem; }
    .stat__valor { font-size: 1.5rem; }

    /* Formulários lado a lado viram empilhados */
    .pedido form { flex: 1 1 100% !important; min-width: 0 !important; }
}

/* =========================================================
   EVENTOS

   Tudo aqui é montado com grid de "auto-fit / minmax": a coluna
   se ajusta sozinha ao espaço disponível, então não existe um
   layout "de celular" e outro "de computador" para manter em
   sincronia — existe um só, que respira.
   ========================================================= */

/* auto-FILL, não auto-fit: com um único evento na lista, o auto-fit
   esticaria o cartão pela largura toda da tela e o resultado ficava
   grotesco. O auto-fill mantém a coluna do tamanho normal. */
.eventos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1.25rem;
}

/* Cartão de evento — o bloco inteiro é o link. */
.evento {
    display: flex;
    flex-direction: column;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-grande);
    overflow: hidden;
    color: inherit;
    box-shadow: var(--sombra);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.evento:hover {
    text-decoration: none;
    border-color: var(--marca-clara);
    box-shadow: var(--sombra-forte);
    transform: translateY(-3px);
}
.evento:focus-visible { outline: 3px solid var(--marca-clara); outline-offset: 2px; }

/* Evento que já passou fica mais discreto, sem sumir. */
.evento--passado .evento__capa img { filter: saturate(.75); }
.evento--passado .evento__data { background: var(--texto-suave); }

.evento__capa {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--marca) 0%, var(--marca-clara) 100%);
    overflow: hidden;
}
.evento__capa img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bloquinho de calendário sobre a capa */
.evento__data {
    position: absolute;
    top: .7rem;
    left: .7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 52px;
    padding: .35rem .5rem;
    background: var(--marca);
    color: #fff;
    border-radius: var(--raio-pequeno);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    line-height: 1.05;
}
.evento__data-dia { font-size: 1.35rem; font-weight: 700; font-family: var(--fonte-titulo); }
.evento__data-mes { font-size: .68rem; letter-spacing: .06em; opacity: .9; }

.evento__selos {
    position: absolute;
    right: .7rem;
    bottom: .7rem;
    display: flex;
    gap: .35rem;
}
.evento__selo {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .18rem .45rem;
    background: rgba(16, 20, 26, .72);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    border-radius: 999px;
}

.evento__corpo {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: 1.05rem 1.15rem 1.25rem;
    flex: 1;
}
.evento__quando {
    font-size: .8rem;
    font-weight: 600;
    color: var(--marca-clara);
    text-transform: none;
}
.evento__titulo {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.3;
    color: var(--texto);
}
.evento__resumo {
    margin: 0;
    color: var(--texto-suave);
    font-size: .92rem;
    line-height: 1.5;
}
.evento__local {
    margin-top: auto;
    padding-top: .5rem;
    font-size: .82rem;
    color: var(--texto-fraco);
}

/* ---------------- Página de um evento ---------------- */

.evento-capa {
    padding-block: clamp(2rem, 6vw, 3.5rem);
    background: var(--marca);
    color: var(--texto-invertido);
}
.evento-capa--com-imagem {
    background-size: cover;
    background-position: center;
    position: relative;
}
/* Véu escuro por cima da foto: sem ele, um título branco sobre uma
   foto clara fica ilegível — e não dá para saber de antemão como é
   a foto que vão subir. */
.evento-capa--com-imagem::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12, 18, 28, .55) 0%, rgba(12, 18, 28, .78) 100%);
}
.evento-capa .container { position: relative; z-index: 1; }
.evento-capa h1 { color: #fff; margin: .5rem 0 .35rem; }
.evento-capa__quando { margin: 0; font-size: 1.02rem; opacity: .92; }

.evento-voltar {
    display: inline-block;
    color: #fff;
    opacity: .85;
    font-size: .88rem;
    font-weight: 600;
}
.evento-voltar:hover { opacity: 1; }

.evento-corpo {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 2rem;
    align-items: start;
}
@media (max-width: 820px) {
    .evento-corpo { grid-template-columns: 1fr; gap: 1.5rem; }
}

.evento-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-grande);
    padding: 1.25rem;
}
.evento-info__bloco h2 {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--texto-fraco);
    margin: 0 0 .3rem;
}
.evento-info__bloco p { margin: 0 0 .6rem; line-height: 1.5; }

.evento-texto__resumo {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--texto-suave);
    border-left: 3px solid var(--destaque);
    padding-left: 1rem;
    margin: 0 0 1.25rem;
}

/* ---------------- Vídeos ---------------- */

.videos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}
.video { margin: 0; }

/* padding-top de 56,25% = proporção 16:9. Vem antes de aspect-ratio
   porque funciona em qualquer navegador, inclusive nos antigos. */
.video__quadro {
    position: relative;
    padding-top: 56.25%;
    background: #0d1117;
    border-radius: var(--raio);
    overflow: hidden;
}
.video__quadro iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
/* Mesma proporção do quadro do YouTube, para que um vídeo vertical
   de celular não fique com metade da altura do vizinho e desalinhe
   a grade inteira. object-fit: contain garante que ele apareça
   inteiro dentro do espaço, com tarja preta nas laterais. */
.video__arquivo {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 70vh;
    object-fit: contain;
    background: #0d1117;
    border-radius: var(--raio);
    display: block;
}
.video__externo {
    background: var(--superficie);
    border: 1px dashed var(--borda-forte);
    border-radius: var(--raio);
    padding: 1.5rem;
    text-align: center;
}
.video figcaption {
    margin-top: .5rem;
    font-size: .88rem;
    color: var(--texto-suave);
    text-align: center;
}

/* ---------------- Galeria de fotos ---------------- */

.galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: .6rem;
}
.galeria__item {
    padding: 0;
    border: 0;
    background: none;
    aspect-ratio: 1 / 1;
    border-radius: var(--raio-pequeno);
    overflow: hidden;
    cursor: zoom-in;
    display: block;
}
.galeria__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}
.galeria__item:hover img { transform: scale(1.06); }
.galeria__item:focus-visible { outline: 3px solid var(--marca-clara); outline-offset: 2px; }

/* Lupa: a foto ampliada, criada pelo JavaScript.
   Se o JavaScript estiver desligado, nada disso aparece — e o
   clique na miniatura simplesmente não faz nada, em vez de
   quebrar a página. */
.lupa {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem;
    background: rgba(9, 12, 17, .94);
}
.lupa img {
    max-width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: var(--raio);
}
.lupa__legenda {
    color: #e9ecf1;
    font-size: .9rem;
    text-align: center;
    max-width: 60ch;
    margin: 0;
}
.lupa__contador { color: #97a0ad; font-size: .8rem; margin: 0; }
.lupa__fechar,
.lupa__seta {
    position: absolute;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border: 0;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lupa__fechar:hover,
.lupa__seta:hover { background: rgba(255, 255, 255, .24); }
.lupa__fechar { top: 1rem; right: 1rem; }
.lupa__seta--anterior { left: 1rem; top: 50%; transform: translateY(-50%); }
.lupa__seta--proxima  { right: 1rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 560px) {
    .lupa__seta { width: 40px; height: 40px; }
    .lupa__seta--anterior { left: .4rem; }
    .lupa__seta--proxima  { right: .4rem; }
}

body.lupa-aberta { overflow: hidden; }

/* ---------------- Eventos no painel ---------------- */

.evento-linha {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.evento-linha__capa {
    flex: 0 0 132px;
    aspect-ratio: 16 / 9;
    border-radius: var(--raio-pequeno);
    overflow: hidden;
    background: var(--superficie-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--texto-fraco);
    font-size: 1.6rem;
}
.evento-linha__capa img { width: 100%; height: 100%; object-fit: cover; }
.evento-linha__dados { flex: 1; min-width: 0; }
.evento-linha form { display: inline; }

@media (max-width: 620px) {
    /* No celular a miniatura vira uma faixa em cima, não uma
       coluna estreita ao lado — 132px roubam metade da largura. */
    .evento-linha { flex-direction: column; }
    .evento-linha__capa { flex: none; width: 100%; }
}

.previa-capa {
    width: 100%;
    max-width: 420px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--raio);
    border: 1px solid var(--borda);
    display: block;
    margin-bottom: .75rem;
}

/* Miniaturas com botão de excluir, no painel */
.galeria--painel { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.galeria__gerencia {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: var(--raio-pequeno);
    overflow: hidden;
    background: var(--superficie-alt);
}
.galeria__gerencia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria__quebrada {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--texto-fraco);
    font-size: 1.5rem;
}
.galeria__excluir {
    position: absolute;
    top: .3rem;
    right: .3rem;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(18, 22, 28, .78);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.galeria__excluir:hover { background: var(--erro); }

.lista--midias { list-style: none; padding: 0; margin: 0; }
.lista--midias li {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: .75rem 0;
    border-bottom: 1px solid var(--borda);
}
.lista--midias li:last-child { border-bottom: 0; }

.separador { border: 0; border-top: 1px solid var(--borda); margin: 1.5rem 0; }

/* Campo com o endereço do site colado antes (…/eventos/[____]) */
.campo__prefixo {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: .35rem;
}
.campo__prefixo > span {
    display: flex;
    align-items: center;
    padding: 0 .6rem;
    background: var(--superficie-alt);
    border: 1px solid var(--borda);
    border-radius: var(--raio-pequeno);
    color: var(--texto-suave);
    font-size: .82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.campo__prefixo > input { flex: 1; min-width: 140px; }

/* =========================================================
   ÁLBUNS DE FOTOS (aba Fotos)

   Mesmo desenho dos cartões de evento de propósito: são a mesma
   ideia — um quadro com imagem, título e um selo. O site fica
   mais fácil de entender quando coisas parecidas se parecem.
   ========================================================= */

.albuns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}

.album {
    display: flex;
    flex-direction: column;
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio-grande);
    overflow: hidden;
    color: inherit;
    box-shadow: var(--sombra);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.album:hover {
    text-decoration: none;
    border-color: var(--marca-clara);
    box-shadow: var(--sombra-forte);
    transform: translateY(-3px);
}
.album:focus-visible { outline: 3px solid var(--marca-clara); outline-offset: 2px; }

.album__capa {
    position: relative;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, var(--marca) 0%, var(--marca-clara) 100%);
    overflow: hidden;
}
.album__capa img { width: 100%; height: 100%; object-fit: cover; display: block; }

.album__vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 2rem;
    color: rgba(255, 255, 255, .55);
}

.album__selo {
    position: absolute;
    right: .7rem;
    bottom: .7rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .5rem;
    background: rgba(16, 20, 26, .72);
    color: #fff;
    font-size: .74rem;
    font-weight: 600;
    border-radius: 999px;
}

.album__corpo {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .95rem 1.1rem 1.15rem;
    flex: 1;
}
.album__tipo {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    color: var(--marca-clara);
}
.album__titulo { margin: 0; font-size: 1.05rem; line-height: 1.3; color: var(--texto); }
.album__texto  { margin: 0; font-size: .88rem; color: var(--texto-suave); line-height: 1.5; }

/* ---------------- Culto que vira link para as fotos ---------------- */

.agenda__item--link {
    color: inherit;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.agenda__item--link:hover {
    text-decoration: none;
    border-color: var(--marca-clara);
    border-left-color: var(--marca);
    box-shadow: var(--sombra);
    transform: translateY(-2px);
}
.agenda__item--link:focus-visible { outline: 3px solid var(--marca-clara); outline-offset: 2px; }

.agenda__fotos {
    margin-top: .5rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--marca-clara);
}

/* ---------------- Marcador de capa no painel ---------------- */

.galeria__capa {
    position: absolute;
    left: .3rem;
    bottom: .3rem;
    padding: .12rem .45rem;
    border: 0;
    border-radius: 999px;
    background: rgba(18, 22, 28, .78);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.galeria__capa--botao { cursor: pointer; background: rgba(18, 22, 28, .45); }
.galeria__capa--botao:hover { background: var(--marca); }

/* A miniatura do álbum na lista do painel é quadrada, não 16:9 —
   as fotos são fotos, não banners. */
.album-linha__capa { aspect-ratio: 1 / 1; flex-basis: 96px; }

.mb-4 { margin-bottom: 2.25rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}