/* ═══════════════════════════════════════════════════════════════
   IBVI CHURCH — folha de estilo única

   Registro: campo de cor saturada dominante (drenched), preto,
   branco, e display condensado em caixa alta. Referência de
   registro dada pelo usuário: l2.lagoinha.com.

   A energia vem de TIPOGRAFIA e CAMPO DE COR, não de fotografia:
   o projeto tem três imagens ao todo. Onde houver encaixe de foto
   futuro, está marcado no HTML com ENCAIXE DE FOTO.
═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── Cor ───────────────────────────────────────────────────
     O âmbar é o campo, não o acento: ele carrega superfície
     inteira. Não é o amarelo #FFCD00 da Lagoinha, de propósito —
     a IBVI não pertence àquela rede e não deve parecer que sim. */
  --ambar:        #f0a818;
  --ambar-escuro: #8a5c00;  /* âmbar legível como TEXTO sobre branco */
  --tinta:        #111111;
  --papel:        #ffffff;
  --apoio:        #595959;  /* segundo e último nível de texto no claro */
  --linha:        #8c8c8c;  /* divisória sobre branco — 3,36:1 */
  --profundo:     #1a1208;  /* faixa escura */
  --sobre-fundo:  #f7f2ea;  /* texto sobre a faixa escura */
  --apoio-fundo:  #b9ab96;  /* apoio sobre a faixa escura */
  --linha-fundo:  #78624a;  /* 3,21:1 sobre o profundo */
  --pendente:     #9a3412;

  /* ─── Tipografia ────────────────────────────────────────────
     Eixo de contraste: condensada display + grotesca de texto.
     Bebas Neue só tem caixa alta e um peso — é display, nunca
     corpo. */
  --display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --texto:   "Archivo", system-ui, -apple-system, Arial, sans-serif;

  /* Teto de display em 6rem, que é o limite de craft. Bebas é
     condensada, então 6rem aqui ocupa bem menos largura que 6rem
     numa fonte normal e ainda lê como monumental. */
  --t-hero:   clamp(3.25rem, 10vw, 6rem);
  --t-h2:     clamp(2.25rem, 5vw, 3.75rem);
  --t-lead:   clamp(1.0625rem, 1.3vw, 1.25rem);
  --t-corpo:  1rem;     /* piso de leitura */
  --t-rotulo: .875rem;
  --t-micro:  .75rem;   /* piso absoluto do sistema é 11px */

  /* ─── Espaço ────────────────────────────────────────────────
     4–8 partes da mesma coisa · 12–16 irmãos de lista
     24 blocos distintos · 40+ entre seções */
  --e1: .25rem;  --e2: .5rem;   --e3: .75rem;  --e4: 1rem;
  --e5: 1.5rem;  --e6: 2rem;    --e7: 2.5rem;  --e8: 3.5rem;
  --e9: 5rem;    --e10: 7rem;

  /* ─── Layout: UMA grade, UM breakpoint de coluna ────────────
     A versão anterior tinha cinco divisões de coluna sem relação
     entre si em quatro breakpoints. Nenhuma vertical da página
     concordava com outra — era isso o "fora de compasso". */
  --largura: 1280px;
  --goteira: clamp(1.25rem, 5vw, 3.5rem);

  --z-cabecalho: 100;
  --z-menu: 200;
  --z-pular: 300;

  --curva: cubic-bezier(.22, 1, .36, 1);
  --rapido: 160ms;
  --medio: 300ms;
}

/* ═══════════════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--t-corpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Tudo que é display usa a mesma receita. Bebas pede tracking
   positivo: condensada em caixa alta sem respiro vira mancha. */
.display {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .015em;
  line-height: .92;
}

/* Preto funciona nas DUAS superfícies claras: 18,9:1 sobre branco e
   9,3:1 sobre o âmbar. Âmbar sobre branco dava 2,04:1 e era invisível. */
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
/* Na faixa escura o preto some, então ali o anel é âmbar (9,1:1). */
.faixa-escura :focus-visible,
.cabecalho :focus-visible,
.rodape :focus-visible { outline-color: var(--ambar); }

.pular {
  position: absolute;
  left: -9999px;
  z-index: var(--z-pular);
  background: var(--tinta);
  color: var(--papel);
  padding: var(--e3) var(--e5);
  font-size: var(--t-rotulo);
  font-weight: 700;
  text-decoration: none;
}
.pular:focus { left: 0; top: 0; }

.container {
  width: min(calc(100% - var(--goteira) * 2), var(--largura));
  margin-inline: auto;
}

/* A grade única. Todo bloco de duas ou três colunas encaixa aqui,
   e existe um só breakpoint de coluna no site inteiro. */
/* No celular a grade é uma coluna só: as classes .cN valem a partir de
   60rem, então uma grade de 4 colunas aqui deixaria cada bloco com um
   quarto da largura e o endereço quebrava palavra por palavra. */
.grade { display: grid; grid-template-columns: 1fr; gap: var(--e6); }
@media (min-width: 60rem) {
  .grade { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .c4 { grid-column-end: span 4; }
  .c5 { grid-column-end: span 5; }
  .c6 { grid-column-end: span 6; }
  .c7 { grid-column-end: span 7; }
  .i6 { grid-column-start: 6; }
  .i8 { grid-column-start: 8; }
}

/* ═══════════════════════════════════════════════════════════
   RITMO
   O intervalo entre seções é ESCOLHIDO, não soma de paddings
   adjacentes. Faixa de cor paga o próprio respiro e não soma com
   a vizinha: ela já se separa pela cor.
═══════════════════════════════════════════════════════════ */

.secao        { padding-block: var(--e9) calc(var(--e9) + var(--e2)); }
.faixa        { padding-block: var(--e9) calc(var(--e9) + var(--e2)); }
.faixa--curta { padding-block: var(--e8) calc(var(--e8) + var(--e2)); }

.faixa-escura { background: var(--profundo); color: var(--sobre-fundo); }
.faixa-escura .apoio { color: var(--apoio-fundo); }

/* Cabeça de seção: título grande sobre régua grossa. Sem
   sobrancelha em caixa alta acima de cada seção. */
.cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e3) var(--e5);
  padding-bottom: var(--e4);
  border-bottom: 3px solid currentColor;
  margin-bottom: var(--e7);
}
.cabeca h2 { font-size: var(--t-h2); }
.cabeca > p {
  font-size: var(--t-rotulo);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-bottom: .3rem;
}

.apoio { color: var(--apoio); }

/* ═══════════════════════════════════════════════════════════
   CABEÇALHO
═══════════════════════════════════════════════════════════ */

.cabecalho { position: sticky; top: 0; z-index: var(--z-cabecalho); background: var(--tinta); color: var(--papel); }
.cabecalho__interno {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e5); min-height: 64px;
}

.marca {
  display: inline-flex; align-items: center; gap: var(--e3);
  text-decoration: none; font-family: var(--display); font-size: 1.5rem;
  text-transform: uppercase; letter-spacing: .03em; line-height: 1;
}
.marca img { width: 26px; height: 26px; filter: invert(1) brightness(1.7); }
.marca span { color: var(--ambar); }

.nav { display: none; }
@media (min-width: 60rem) { .nav { display: flex; gap: var(--e6); } }

.nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 48px;
  font-family: var(--display); font-size: 1.125rem; letter-spacing: .07em;
  text-transform: uppercase; text-decoration: none;
  transition: color var(--rapido) var(--curva);
}
.nav a:hover { color: var(--ambar); }
.nav a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 12px; height: 2px;
  background: var(--ambar); transform: scaleX(0); transform-origin: left;
  transition: transform var(--medio) var(--curva);
}
.nav a:hover::after { transform: scaleX(1); }

/* Menu do celular: <details> nativo, sem JavaScript. */
.menu { position: relative; }
@media (min-width: 60rem) { .menu { display: none; } }

.menu__botao {
  display: flex; align-items: center; gap: var(--e3);
  min-height: 48px; min-width: 48px; padding-inline: var(--e3);
  cursor: pointer; list-style: none;
  font-family: var(--display); font-size: 1.125rem; letter-spacing: .07em;
  text-transform: uppercase;
}
.menu__botao::-webkit-details-marker { display: none; }
.menu__botao::marker { content: ""; }

.menu__barras { display: grid; gap: 4px; width: 20px; }
.menu__barras i {
  display: block; height: 2px; background: currentColor;
  transition: transform var(--medio) var(--curva), opacity var(--rapido);
}
.menu[open] .menu__barras i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu[open] .menu__barras i:nth-child(2) { opacity: 0; }
.menu[open] .menu__barras i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu__painel {
  position: absolute; right: 0; top: calc(100% + var(--e3)); z-index: var(--z-menu);
  display: grid; min-width: max(60vw, 250px);
  background: var(--ambar); color: var(--tinta);
}
.menu__painel a {
  display: flex; align-items: center; min-height: 54px; padding: var(--e3) var(--e5);
  font-family: var(--display); font-size: 1.375rem; letter-spacing: .05em;
  text-transform: uppercase; text-decoration: none;
  border-bottom: 2px solid var(--tinta);
}
.menu__painel a:last-child { border-bottom: 0; }
.menu__painel a:hover { background: var(--tinta); color: var(--ambar); }

/* ═══════════════════════════════════════════════════════════
   HERO — o campo âmbar
   A coisa maior da página é o dado que decide a visita: domingo,
   19h. Endereço e botão entram na mesma dobra, em toda largura.
═══════════════════════════════════════════════════════════ */

.campo {
  background: var(--ambar); color: var(--tinta);
  padding-top: clamp(2rem, 4.5vw, 3.5rem);
  overflow: hidden;
}

.hero__titulo { display: grid; gap: var(--e3); }
.hero__oficial {
  font-family: var(--texto); font-size: var(--t-rotulo); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.4;
}
.hero__quando { font-size: var(--t-hero); }

.campo .grade { align-items: center; padding-bottom: var(--e8); }

/* ─── Nicho da menorá ───────────────────────────────────────────
   Fogo sobre campo âmbar não lê: `screen` sobre fundo claro lava
   tudo para branco, e fumaça cinza sobre âmbar vira sujeira. Por
   isso a menorá fica numa reentrância escura dentro do campo. */

/* Emblema circular. O tamanho e a posição da menorá dentro dele NÃO
   são estéticos: foram resolvidos por geometria para que as chamas
   das pontas e os pés da base fiquem dentro do círculo. A menorá
   ocupa 85,75% do diâmetro com o topo em 7%; nessa configuração os
   quatro pontos críticos ficam a 0,449 do centro, contra um limite de
   0,450 — limite que já desconta 5% do diâmetro para o halo do fogo,
   que o círculo recorta. Mexer num dos dois valores põe chama para
   fora. */
.nicho {
  position: relative;
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  aspect-ratio: 1;
  background: var(--tinta);
  border-radius: 50%;
  /* o halo do fogo fica contido no emblema em vez de vazar no âmbar */
  overflow: hidden;
}
@media (min-width: 60rem) { .nicho { max-width: none; } }

.menora-wrap {
  position: absolute;
  left: 50%;
  top: 10.25%;
  width: 79%;
  margin-left: -39.5%;
}

.menora {
  display: block;
  width: 100%;
  height: auto;
  /* A menorá fica NA FRENTE do fogo. Como o PNG é recortado, só o metal
     tapa a chama: a tigela cobre a base dela e o resto aparece acima.
     É o que dá a sensação de o fogo nascer dentro do copo. */
  position: relative;
  z-index: 2;
  /* O arquivo é escuro sobre transparente. No nicho ele precisa ser
     metal claro, senão some no fundo. */
  filter: invert(1) sepia(.22) saturate(1.35) brightness(.97);
}

/* ─── Chamas ────────────────────────────────────────────────────
   Posições MEDIDAS no PNG, não estimadas: os sete copos têm centro
   em 10,94 / 22,95 / 35,16 / 49,90 / 64,55 / 76,86 / 88,87% da
   largura, e a boca deles está a 18,75% da altura. A base da chama
   assenta exatamente nessa linha. */

.chama {
  position: absolute;
  /* Medido no PNG: a boca dos copos está em 18,75% e o fundo da
     tigela em 23,63%. A base da chama assenta em 23%, quase no
     fundo, para o fogo sair de DENTRO do copo e não pousar na borda. */
  top: 23%;
  width: 5.2%;
  height: 11.5%;
  /* Centragem por MARGEM, não por transform. O GSAP lê um
     `translate(-50%,-100%)` do CSS, converte para px e depois soma
     xPercent/yPercent por cima — o deslocamento sai dobrado e a
     chama pula para fora do copo. Margem em % resolve contra a
     LARGURA do contêiner, e como o PNG é quadrado isso equivale à
     altura, então -11.5% sobe exatamente uma chama. */
  margin-left: -2.6%;
  margin-top: -11.5%;
  transform-origin: 50% 100%;
  background: radial-gradient(ellipse at center bottom,
    #fff6b0 0%, #ffd34d 28%, #ff8a00 58%, #ff3b00 78%, rgba(255,59,0,0) 100%);
  border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
  /* SEM filter e SEM mix-blend-mode aqui, de propósito. Antes eram três
     drop-shadow empilhados mais blend `screen`; como o elemento anima
     escala e rotação, o navegador refazia o borrão a cada quadro e
     travava celular modesto. O brilho agora vem do halo pintado no
     ::before, que é só um degradê e não custa nada por quadro. */
  z-index: 1;          /* atrás da menorá, que está em 2 */
  pointer-events: none;
}

/* miolo branco */
.chama::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: 40%;
  height: 42%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at bottom,
    #ffffff 0%, #fff2a8 40%, rgba(255,240,140,0) 100%);
  border-radius: 50%;
}

/* halo atrás do fogo */
.chama::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18%;
  width: 260%;
  height: 210%;
  transform: translateX(-50%);
  /* Degradê radial já nasce suave: `blur` aqui era redundante e caro.
     Mais paradas deixam a borda macia sem filtro nenhum. */
  /* `ellipse closest-side` dimensiona o degradê pela borda MAIS PRÓXIMA,
     então ele chega em transparente exatamente na borda da caixa nos dois
     eixos. Com o padrão (`farthest-corner`) ele ainda tinha cor ao atingir
     as laterais e o halo aparecia como um retângulo cortado. */
  background: radial-gradient(ellipse closest-side,
    rgba(255,176,40,.38) 0%,
    rgba(255,150,10,.22) 30%,
    rgba(255,120,0,.10) 55%,
    rgba(255,100,0,.03) 78%,
    transparent 100%);
  z-index: -1;
}

/* ─── Fumaça ────────────────────────────────────────────────────
   Três partículas por chama: uma bolinha só denuncia o truque. */

/* A fumaça nasce no TOPO DA CHAMA (11,5%), não abaixo dela. Antes
   este bloco tinha `top: 10%` com `height: 26%` e as partículas em
   `bottom: 0`, o que as fazia brotar a 36% da altura — abaixo dos
   copos, no meio dos braços, subindo só até a altura das tigelas.
   Com `height: 0` o `bottom: 0` coincide com o próprio `top`. */
.fumaca {
  position: absolute;
  /* 5%, não 11,5%: a chama tem caixa de 11,5% com base em 23%, mas o
     fogo.js a escala até 1,5x a partir da base, então a ponta sobe
     para ~5,75%. Nascendo em 11,5% a fumaça brotava DENTRO do fogo,
     onde branco sobre o halo laranja não aparece. */
  top: 5%;
  width: 6%;
  height: 0;
  margin-left: -3%;
  z-index: 1;          /* junto da chama, atrás do metal */
  pointer-events: none;
}

/* Fumaça de vela: véu, não bolinha. O que faz ler como fumaça é o
   borrão largo com pouca opacidade, não a forma — partícula nítida
   e opaca vira bola de gude. Quente de leve porque fumaça perto da
   chama pega a cor do fogo. */
.fumaca i {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 135%;
  aspect-ratio: 1;
  border-radius: 50%;
  /* Sem `filter: blur`: eram 21 partículas borradas animando ao mesmo
     tempo. O degradê com paradas suaves dá o mesmo véu de graça. */
  background: radial-gradient(circle,
    rgba(240,236,230,.42) 0%,
    rgba(232,226,218,.26) 30%,
    rgba(224,218,210,.13) 52%,
    rgba(214,208,200,.05) 70%,
    transparent 82%);
  opacity: 0;
}

.chama-1, .fumaca-1 { left: 10.94%; }
.chama-2, .fumaca-2 { left: 22.95%; }
.chama-3, .fumaca-3 { left: 35.16%; }
.chama-4, .fumaca-4 { left: 49.90%; }
.chama-5, .fumaca-5 { left: 64.55%; }
.chama-6, .fumaca-6 { left: 76.86%; }
.chama-7, .fumaca-7 { left: 88.87%; }

/* Sem movimento: a menorá continua acesa, só não anima, e a fumaça
   sai de cena porque fumaça parada não significa nada. */
@media (prefers-reduced-motion: reduce) {
  .fumaca { display: none; }
  .chama { opacity: .92; }
}

.hero__acao { margin-top: var(--e6); }

.hero__onde {
  font-size: var(--t-lead); font-weight: 400; line-height: 1.45;
  max-width: 34ch; margin-top: var(--e6);
  padding-top: var(--e4); border-top: 3px solid var(--tinta);
}
/* A outra igreja batista da cidade fica perto. A desambiguação
   tem que estar AQUI, onde a pessoa decide, não no rodapé. */
.hero__aviso {
  margin-top: var(--e3); font-size: var(--t-rotulo); font-weight: 400;
  line-height: 1.45; max-width: 40ch;
}

/* Tira que corre no pé do campo. É o eco da referência, e o que
   ela repete é o único fato confirmado do site. */
.tira {
  display: flex; overflow: hidden; background: var(--tinta); color: var(--ambar);
  user-select: none;
  /* isola o desenho: o que corre aqui não obriga o resto a repintar */
  contain: paint;
}
.tira__trilho {
  display: flex; flex: none; gap: var(--e6);
  padding-block: var(--e3); padding-right: var(--e6);
  font-family: var(--display); font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  animation: corre 30s linear infinite;
  /* Sem isto o trilho é repintado a cada quadro em vez de ser
     deslocado pela GPU. É a diferença entre travar e deslizar. */
  will-change: transform;
  backface-visibility: hidden;
}
@keyframes corre { to { transform: translateX(-100%); } }
.tira__trilho b { font-weight: 400; color: var(--papel); }

@media (prefers-reduced-motion: reduce) {
  .tira { justify-content: center; }
  .tira__trilho { animation: none; }
  .tira__trilho + .tira__trilho { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   DECLARAÇÃO — faixa escura, uma só vez na página
═══════════════════════════════════════════════════════════ */

.declaracao { text-align: center; }
.declaracao__texto { font-size: clamp(1.75rem, 4.2vw, 3.25rem); max-width: 20ch; margin-inline: auto; }
.declaracao__fonte {
  margin-top: var(--e5); font-size: var(--t-rotulo); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--apoio-fundo);
}

/* ═══════════════════════════════════════════════════════════
   LISTAS DE DEFINIÇÃO
   Endereço, horário e ministérios são pares termo/valor. Como
   div+p+p viravam parágrafos soltos para o leitor de tela.
═══════════════════════════════════════════════════════════ */

.lista { display: grid; }
.lista > div {
  /* Padding vertical assimétrico: o de baixo leva um pouco mais,
     senão o olho lê o bloco como descentralizado. */
  padding-top: var(--e4); padding-bottom: calc(var(--e4) + 3px);
  border-bottom: 1px solid var(--linha);
}
.lista > div:first-child { padding-top: 0; }
.lista > div:last-child { border-bottom: 0; }
.faixa-escura .lista > div { border-bottom-color: var(--linha-fundo); }

.lista dt {
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--apoio);
}
.faixa-escura .lista dt { color: var(--apoio-fundo); }
.lista dd { margin-top: var(--e1); font-size: 1.0625rem; line-height: 1.45; }
.lista dd a { color: var(--ambar-escuro); text-underline-offset: 3px; }
.lista dd a:hover { text-decoration-thickness: 2px; }
.faixa-escura .lista dd a { color: var(--ambar); }

/* Ministérios: nome em display, o que é em texto. Sem numeração,
   porque não é sequência. */
.ministerios dt {
  font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 400; letter-spacing: .02em; text-transform: uppercase;
  color: var(--tinta);
}
.ministerios dd { color: var(--apoio); max-width: 54ch; }

/* ═══════════════════════════════════════════════════════════
   PRIMEIRA VEZ
═══════════════════════════════════════════════════════════ */

.fatos {
  display: grid;
  gap: var(--e6);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
@media (min-width: 48rem) { .fatos { gap: var(--e6) var(--e8); } }
.fato { border-top: 3px solid var(--tinta); padding-top: var(--e4); }
.fato dt {
  font-family: var(--display); font-size: clamp(1.75rem, 3vw, 2.25rem);
  text-transform: uppercase; letter-spacing: .02em; line-height: 1;
}
.fato dd { margin-top: var(--e2); color: var(--apoio); line-height: 1.55; }

/* Pendência: o que a liderança ainda não confirmou. Forma além de
   cor — leva o rótulo escrito, não só o tom. */
.pendencia {
  display: flex; align-items: baseline; gap: var(--e3); max-width: 72ch;
  margin-top: var(--e6); padding: var(--e4);
  background: #f2f2f2; font-size: var(--t-rotulo); line-height: 1.5; color: var(--apoio);
}
.faixa-escura .pendencia { background: #2a1f12; color: var(--apoio-fundo); }
.pendencia b {
  flex: none; font-size: var(--t-micro); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pendente);
}
.faixa-escura .pendencia b { color: #f2a48a; }

/* ═══════════════════════════════════════════════════════════
   BOTÕES
═══════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px;          /* a regra pede 44; 56 dá folga para dedo de idoso */
  padding-inline: var(--e7);
  border: 3px solid var(--tinta);
  font-family: var(--display); font-size: 1.375rem; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background var(--rapido) var(--curva), color var(--rapido) var(--curva),
              transform var(--rapido) var(--curva);
}
.btn:active { transform: scale(.98); }
.btn--preto { background: var(--tinta); color: var(--ambar); }
.btn--preto:hover { background: var(--papel); color: var(--tinta); }
.btn--contorno { background: transparent; color: var(--tinta); }
.btn--contorno:hover { background: var(--tinta); color: var(--ambar); }

/* ═══════════════════════════════════════════════════════════
   PASTORES
   As duas únicas fotografias reais do projeto. Por isso entram
   grandes, e não como avatar de 40px.
═══════════════════════════════════════════════════════════ */

.pastores { display: grid; gap: var(--e6); }
@media (min-width: 48rem) { .pastores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.pastor { background: var(--tinta); }
.pastor img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center;
  filter: grayscale(1) contrast(1.06);
  transition: filter var(--medio) var(--curva);
}
/* Hover só onde existe mouse. No celular o Safari dispara :hover no
   toque, e a transição de `filter` roda no meio do gesto. */
@media (hover: hover) and (pointer: fine) {
  .pastor:hover img { filter: grayscale(0) contrast(1.02); }
}

.pastor__faixa {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--e4); padding: var(--e3) var(--e4) calc(var(--e3) + 3px);
  background: var(--ambar); color: var(--tinta);
}
.pastor__nome {
  font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2rem);
  text-transform: uppercase; letter-spacing: .02em; line-height: 1;
}
.pastor__cargo { font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

/* ═══════════════════════════════════════════════════════════
   A IGREJA
═══════════════════════════════════════════════════════════ */

.numero {
  display: inline-block;
  align-self: start;
  background: var(--ambar);
  color: var(--tinta);
  padding: var(--e4) var(--e5) var(--e5);
  font-family: var(--display);
  font-size: clamp(4.5rem, 11vw, 8rem);
  line-height: .82;
  letter-spacing: 0;
}
.numero span {
  display: block; margin-top: var(--e2);
  font-family: var(--texto); font-size: var(--t-rotulo); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.35;
}

.prosa > * + * { margin-top: var(--e4); }
.prosa p { color: var(--apoio); line-height: 1.65; }
.prosa .lead { font-size: var(--t-lead); color: var(--tinta); }

/* ═══════════════════════════════════════════════════════════
   APLICATIVO
═══════════════════════════════════════════════════════════ */

.app__titulo { font-size: var(--t-h2); }
.app__texto { margin-top: var(--e4); max-width: 44ch; }

.app__recursos { display: grid; gap: var(--e3); margin-top: var(--e5); }
.app__recursos li {
  display: flex; align-items: baseline; gap: var(--e3);
  padding-bottom: var(--e3); border-bottom: 1px solid var(--linha-fundo);
  font-size: 1.0625rem;
}
.app__recursos li:last-child { border-bottom: 0; }
.app__recursos li::before {
  content: ""; flex: none; width: 8px; height: 8px;
  background: var(--ambar); transform: translateY(-2px);
}

.selo {
  display: inline-flex; align-items: center; margin-top: var(--e5);
  padding: var(--e2) var(--e4); border: 2px solid var(--apoio-fundo);
  font-family: var(--display); font-size: 1.125rem; letter-spacing: .06em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════
   RODAPÉ
═══════════════════════════════════════════════════════════ */

.rodape { background: var(--tinta); color: var(--papel); padding-block: var(--e8); }
.rodape__grade { display: grid; gap: var(--e6); }
@media (min-width: 60rem) { .rodape__grade { grid-template-columns: 2fr 1fr 1fr; gap: var(--e8); } }
.rodape__nome {
  font-family: var(--display); font-size: 1.75rem; text-transform: uppercase;
  letter-spacing: .02em; line-height: 1.05;
}
.rodape__legal { margin-top: var(--e3); font-size: var(--t-rotulo); line-height: 1.6; color: #b5b5b5; }
.rodape h3 {
  font-family: var(--display); font-size: 1.25rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ambar); margin-bottom: var(--e2);
}
.rodape__lista { display: grid; }
.rodape__lista a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--t-rotulo); text-decoration: none; color: #d6d6d6;
}
.rodape__lista a:hover { color: var(--ambar); text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   VÍDEO DE BOAS-VINDAS
   O encaixe já guarda a proporção 16:9, então trocar o bloco
   vazio por um <iframe> não mexe em mais nada do layout.
═══════════════════════════════════════════════════════════ */

.video { margin: var(--e8) 0 0; max-width: 780px; }

.video__moldura {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--tinta);
  overflow: hidden;
}
.video__player,
.video__vazio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Espaço reservado: superfície lisa com um contorno para dentro.
   Nada de xadrez — listra repetida é padrão que o detector marca e
   que lê como imagem quebrada. */
.video__vazio {
  display: grid;
  place-items: center;
  gap: var(--e3);
  background: var(--tinta);
  box-shadow: inset 0 0 0 1px rgba(240,168,24,.28);
}
.video__rotulo {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ambar);
}
.video__legenda {
  margin-top: var(--e3);
  font-size: var(--t-rotulo);
  color: var(--apoio);
}


/* ═══════════════════════════════════════════════════════════
   CONFISSÃO DE FÉ
   Os números são do próprio documento, não andaime: uma
   confissão de fé é numerada por natureza, e a ordem é dela.
═══════════════════════════════════════════════════════════ */

.credo { display: grid; gap: var(--e6); counter-reset: artigo; }
@media (min-width: 60rem) {
  .credo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e7) var(--e8); }
}

.credo li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e4);
  align-items: start;
  padding-top: var(--e4);
  border-top: 1px solid var(--linha);
}
.credo li::before {
  counter-increment: artigo;
  content: counter(artigo);
  font-family: var(--display);
  font-size: 2rem;
  line-height: .9;
  /* âmbar puro sobre branco dá 2,04:1 e reprova; este é o tom
     escuro da mesma cor, a 5,81:1 */
  color: var(--ambar-escuro);
  font-variant-numeric: tabular-nums;
  min-width: 1.5ch;
}
.credo p { color: var(--apoio); line-height: 1.62; }

/* ═══════════════════════════════════════════════════════════
   MAPA
   Ocupa a coluna que antes tinha só um botão solto no vazio.
   Cinza em repouso e colorido no hover, igual às fotos dos
   pastores: é o mesmo tratamento, não um efeito novo.
═══════════════════════════════════════════════════════════ */

.mapa {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--tinta);
  overflow: hidden;
}
/* Foto fixa no lugar do embed do Google. O iframe trazia JS e tiles de
   terceiro — era o item mais pesado da página e atrasava o carregamento
   para quem chega em dados móveis. O botão resolve a navegação. */
.mapa__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  transition: filter var(--medio) var(--curva);
}
.mapa__vazio {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--tinta);
  box-shadow: inset 0 0 0 1px rgba(240,168,24,.28);
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ambar);
}
.mapa a { display: block; width: 100%; height: 100%; }
@media (hover: hover) and (pointer: fine) {
  .mapa:hover .mapa__foto { filter: none; }
}
.mapa:focus-within .mapa__foto { filter: none; }

.mapa__acao { margin-top: var(--e4); }
@media (max-width: 59.999rem) { .mapa__acao { width: 100%; } }

/* ═══════════════════════════════════════════════════════════
   CONFISSÃO: recolhida por padrão
   Doze artigos empilhados esticavam a página para mais de
   7.000px no celular. <details> nativo: sem JavaScript, abre
   com teclado e é anunciado pelo leitor de tela.
═══════════════════════════════════════════════════════════ */

.credo-intro {
  max-width: 62ch;
  margin-bottom: var(--e5);
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--apoio);
}

.credo-caixa { border-top: 3px solid var(--tinta); }

.credo-abrir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  min-height: 60px;
  padding-block: var(--e4);
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  transition: color var(--rapido) var(--curva);
}
.credo-abrir::-webkit-details-marker { display: none; }
.credo-abrir::marker { content: ""; }
.credo-abrir:hover { color: var(--ambar-escuro); }
/* O sinal é DESENHADO em CSS, não é glifo de fonte. Antes era um
   escape de caractere e virou um quadrado vazio com um "3" do lado:
   a Bebas não tem o traço, e o escape ainda corrompeu no arquivo.
   Duas barras em degradê não dependem de fonte nem de codificação. */
.credo-abrir::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background:
    linear-gradient(var(--ambar-escuro), var(--ambar-escuro)) center / 20px 3px no-repeat,
    linear-gradient(var(--ambar-escuro), var(--ambar-escuro)) center / 3px 20px no-repeat;
  transition: transform var(--medio) var(--curva);
}
/* aberto: some a barra vertical e sobra o traço de "recolher" */
.credo-caixa[open] .credo-abrir::after {
  background:
    linear-gradient(var(--ambar-escuro), var(--ambar-escuro)) center / 20px 3px no-repeat;
  transform: rotate(180deg);
}

.credo { padding-bottom: var(--e6); }

/* ═══════════════════════════════════════════════════════════
   MOTION
   Revelação só ENRIQUECE um estado já visível: nada aqui esconde
   conteúdo atrás de classe. Em aba oculta ou renderizador sem
   tela a animação não dispara e a seção vai ao ar normal.
═══════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .revela {
      animation: sobe linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 46%;
    }
    @keyframes sobe {
      from { opacity: .45; transform: translateY(14px); }
      to   { opacity: 1;   transform: none; }
    }
    /* As fotos coloram conforme entram na tela: no celular não existe
       hover, então essa é a única forma de a cor aparecer. */
    .pastor img {
      animation: colorir linear both;
      animation-timeline: view();
      animation-range: entry 15% entry 75%;
    }
    @keyframes colorir {
      from { filter: grayscale(1) contrast(1.06); }
      to   { filter: grayscale(0) contrast(1.02); }
    }

    /* Escalonar os itens de UMA lista é legítimo; o que denuncia é
       a mesma entrada idêntica em toda seção. */
    .fato { animation-range: entry 4% entry 40%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   IMPRESSÃO
   Os tokens são redeclarados. Sem isto, imprimir a partir de um
   sistema em tema escuro levava texto claro para papel branco.
═══════════════════════════════════════════════════════════ */

@media print {
  :root {
    --ambar: #ffffff; --ambar-escuro: #000000;
    --tinta: #000000; --papel: #ffffff;
    --apoio: #333333; --linha: #999999;
    --profundo: #ffffff; --sobre-fundo: #000000;
    --apoio-fundo: #333333; --linha-fundo: #999999;
  }
  .cabecalho, .menu, .pular, .tira, .btn { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .campo, .faixa-escura { background: #fff; color: #000; }
  .campo { border-bottom: 2px solid #000; }
  .secao, .faixa, .faixa--curta { padding-block: 1rem; }
  .pastor img { filter: grayscale(1); }
  a { text-decoration: underline; }
}