/* ============================================================
   FIRMADOS EM CRISTO — site institucional
   Verde profundo drenched. A luz é o acento, nunca o fundo.
   ============================================================ */

@font-face{
  font-family:"Neue Haas Display";
  src:url("/assets/fonts/NeueHaas-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Neue Haas Display";
  src:url("/assets/fonts/NeueHaas-400i.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Neue Haas Display";
  src:url("/assets/fonts/NeueHaas-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Birds of Paradise";
  src:url("/assets/fonts/BirdsOfParadise.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  /* ------------------------------------------------------------
     AS QUATRO CORES DA MARCA. Nao existe uma quinta.
     Tudo o mais nesta folha e mistura destas quatro entre si
     (color-mix) — nunca um tom novo.
     ------------------------------------------------------------ */
  --verde-900:#1a443c;   /* fundo dominante */
  --verde-950:#0e2c25;   /* profundidade: versiculo, rodape, ondas */
  --butter:#e9e696;      /* a luz: acento, nunca fundo de secao */
  --creme:#f5f1de;       /* a tinta clara e as secoes claras */

  /* --- derivados (so mistura das quatro) --- */
  --verde-alto:color-mix(in srgb,var(--creme) 9%,var(--verde-900));   /* elevacao sobre escuro */
  --butter-alto:color-mix(in srgb,var(--creme) 45%,var(--butter));    /* hover do butter */
  --creme-off:color-mix(in srgb,var(--creme) 30%,#fff);               /* off-white: superficie sobre creme */
  --oliva:color-mix(in srgb,var(--butter) 81%,var(--verde-900));      /* o oliva da marca (#c2c684) sai das quatro */
  --contorno:color-mix(in srgb,var(--verde-950) 62%,transparent);     /* contorno verde escuro dos controles */
  --tinta-2:color-mix(in srgb,var(--creme) 74%,var(--verde-900));     /* apoio sobre escuro */
  --tinta-esc:color-mix(in srgb,var(--verde-950) 74%,transparent);    /* apoio sobre claro */
  --tinta-esc-2:color-mix(in srgb,var(--verde-950) 52%,transparent);  /* rotulo sobre claro */
  --alerta:#8f3624;      /* unico uso: erro de formulario */

  --fundo:var(--verde-900);
  --tinta:var(--creme);

  /* --- tipografia --- */
  --sans:"Neue Haas Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --script:"Birds of Paradise","Yellowtail",cursive;
  --tk-display:-0.035em;
  --tk-titulo:-0.025em;

  --t-corpo:clamp(1rem,0.95rem + 0.25vw,1.15rem);
  --t-lead:clamp(1.15rem,1.05rem + 0.5vw,1.5rem);
  --t-h3:clamp(1.3rem,1.15rem + 0.7vw,1.75rem);
  --t-h2:clamp(2.1rem,1.5rem + 2.6vw,4rem);
  --t-h1:clamp(2.7rem,1.7rem + 4.8vw,6rem);
  --t-versiculo:clamp(1.35rem,1rem + 1.7vw,2.6rem);

  /* --- ritmo --- */
  --gut:clamp(1.25rem,5vw,2.5rem);
  --larg:78rem;
  --resp-s:clamp(3rem,7vw,5rem);
  --resp-m:clamp(4.5rem,10vw,8rem);
  --resp-g:clamp(6rem,14vw,11rem);

  /* fios: uma espessura so no site inteiro, cor sempre derivada da paleta */
  --fio:1px;
  --fio-claro:color-mix(in srgb,var(--creme) 24%,transparent);
  --fio-butter:color-mix(in srgb,var(--butter) 45%,transparent);
  --fio-escuro:color-mix(in srgb,var(--verde-950) 20%,transparent);

  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-pill:999px;

  /* --- camadas --- */
  --z-ondas:1; --z-conteudo:2; --z-topo:60; --z-menu:70; --z-dialogo:80;

  --saida:cubic-bezier(.16,1,.3,1);
}

/* ============================================================ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
b,strong{font-weight:500}
body{
  margin:0; background:var(--fundo); color:var(--tinta);
  font-family:var(--sans); font-size:var(--t-corpo); font-weight:400;
  line-height:1.6; letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,picture,svg{max-width:100%; display:block}
/* moldura de proporcao fixa: o <picture> precisa esticar, senao a foto
   fica com a altura natural dentro de uma caixa maior. */
.quem__foto picture,.casa__foto picture{display:block; width:100%; height:100%}
h1,h2,h3{margin:0; font-weight:500; letter-spacing:var(--tk-titulo); line-height:1.02; text-wrap:balance}
p{margin:0; text-wrap:pretty}
a{color:inherit}
:focus-visible{outline:3px solid var(--butter); outline-offset:3px; border-radius:4px}

.vis-oculto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pular{position:absolute;left:-9999px;top:0;z-index:99;background:var(--butter);color:var(--verde-950);padding:.75rem 1.25rem;font-weight:500}
.pular:focus{left:.5rem;top:.5rem}

/* ============================================================ ondas (seigaiha) */

/* ============================================================ topo */
.topo{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-topo);
  display:grid;
  grid-template-columns:
    [borda-inicio] minmax(var(--gut),1fr)
    [conteudo-inicio] minmax(0,var(--larg))
    [conteudo-fim] minmax(var(--gut),1fr) [borda-fim];
  padding:1.6rem 0;
  transition:background .4s var(--saida),backdrop-filter .4s var(--saida),padding .4s var(--saida);
}
.topo[data-preso]{
  background:color-mix(in srgb,var(--verde-950) 82%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  padding-block:1.05rem;
  box-shadow:0 1px 0 color-mix(in srgb,var(--creme) 10%,transparent);
}
.topo > *{grid-column:conteudo-inicio / conteudo-fim}
.topo__interno{display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem)}
.topo__marca{display:flex; align-items:center; text-decoration:none; flex:0 0 auto}
.topo__logo{
  display:block; width:clamp(92px,9.5vw,120px); aspect-ratio:574.5/157.75;
  background:var(--creme);
  -webkit-mask:url("/assets/img/logo.svg") no-repeat center/contain;
  mask:url("/assets/img/logo.svg") no-repeat center/contain;
  transition:background .3s var(--saida);
}
.topo__marca:hover .topo__logo{background:var(--butter)}
.topo__nav{display:flex; gap:clamp(.9rem,2.2vw,2rem); margin-inline-start:auto; font-size:.95rem}
.topo__nav a{position:relative; text-decoration:none; color:var(--tinta-2); padding-block:.35rem; transition:color .25s var(--saida)}
.topo__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:var(--fio);
  background:var(--butter); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--saida);
}
.topo__nav a:hover{color:var(--creme)}
.topo__nav a:hover::after{transform:scaleX(1)}
.topo__cta{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  border:var(--fio) solid var(--fio-butter); color:var(--butter);
  padding:.5rem 1.1rem; border-radius:var(--r-pill); font-size:.9rem; font-weight:500;
  white-space:nowrap; transition:background .3s var(--saida),border-color .3s var(--saida);
}
.topo__cta:hover{background:color-mix(in srgb,var(--butter) 12%,transparent); border-color:var(--butter)}
.ponto{width:7px;height:7px;border-radius:50%;background:var(--butter);box-shadow:0 0 0 0 color-mix(in srgb,var(--butter) 60%,transparent);animation:pulso 2.4s infinite}
@keyframes pulso{70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

.topo__menu{display:none; background:none; border:0; padding:.6rem; cursor:pointer; margin-inline-start:auto}
.topo__hamburguer,.topo__hamburguer::before,.topo__hamburguer::after{
  display:block; width:24px; height:2px; background:var(--creme); transition:transform .35s var(--saida),opacity .2s
}
.topo__hamburguer::before,.topo__hamburguer::after{content:""; position:relative}
.topo__hamburguer::before{top:-7px} .topo__hamburguer::after{top:5px}
.topo__menu[aria-expanded="true"] .topo__hamburguer{background:transparent}
.topo__menu[aria-expanded="true"] .topo__hamburguer::before{transform:translateY(7px) rotate(45deg)}
.topo__menu[aria-expanded="true"] .topo__hamburguer::after{transform:translateY(-5px) rotate(-45deg)}

.menu-movel{
  position:fixed; inset:0; z-index:var(--z-menu);
  background:var(--verde-950); display:grid; place-items:center;
}
.menu-movel[hidden]{display:none}
.menu-movel nav{display:grid; gap:1.1rem; text-align:center}
.menu-movel a{
  font-size:clamp(1.6rem,7vw,2.4rem); font-weight:500; letter-spacing:var(--tk-titulo);
  text-decoration:none; color:var(--creme);
}
.menu-movel a:hover{color:var(--butter)}

/* ============================================================ hero */
.hero{
  position:relative; min-height:100svh; display:grid; align-items:center;
  padding:calc(var(--resp-s) + 5rem) var(--gut) clamp(2.5rem,5vw,4rem);
  isolation:isolate; overflow:hidden;
}
.hero__media{position:absolute; inset:0; z-index:-3; background:var(--verde-900); isolation:isolate}
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 42%;
  /* a foto fica na cor original. O contraste com o titulo vem do veu
     escuro em .hero::before, nao de tingir a imagem. */
  transform:scale(1.08); will-change:transform;
}
.hero::before{
  /* banho verde: a foto vira material da marca. E um veu de leitura sobre a
     foto — nao um brilho. So verde da marca, sem halo amarelo. */
  content:""; position:absolute; inset:0; z-index:-2;
  background:linear-gradient(to top,
    var(--verde-950) 0%,
    var(--verde-950) 10%,
    color-mix(in srgb,var(--verde-950) 88%,transparent) 32%,
    color-mix(in srgb,var(--verde-950) 72%,transparent) 58%,
    color-mix(in srgb,var(--verde-900) 66%,transparent) 100%);
}
.hero::after{
  /* fecho contra o versiculo: sem ele aparece uma emenda entre as secoes */
  content:""; position:absolute; inset-inline:0; bottom:0; height:26%;
  background:linear-gradient(to top,var(--verde-950) 0%,var(--verde-950) 28%,transparent 100%);
  z-index:0; pointer-events:none;
}
.hero__conteudo{position:relative; z-index:var(--z-conteudo); max-width:min(100%,64rem); margin-inline:auto; width:100%; text-align:center}
.hero__titulo{
  font-size:var(--t-h1); letter-spacing:var(--tk-display); line-height:.96;
  text-shadow:0 2px 40px color-mix(in srgb,var(--verde-950) 55%,transparent);
}
.hero__titulo em{
  font-family:var(--script); font-style:normal; font-weight:400;
  color:var(--butter); font-size:1.18em; line-height:.8;
  letter-spacing:0; padding-inline:.06em;
}
.hero__lead{
  margin-top:1.5rem; max-width:38ch; font-size:var(--t-lead);
  color:var(--tinta-2); line-height:1.5;
}
.hero__acoes{margin-top:clamp(1.75rem,3.5vw,2.5rem); display:flex; flex-wrap:wrap; gap:.9rem; align-items:stretch; justify-content:center}


/* ============================================================ cápsulas e botões */
.capsula{
  display:inline-flex; align-items:center; gap:.75rem; text-decoration:none;
  border-radius:var(--r-pill); padding:.7rem 1.35rem .7rem 1.05rem;
  border:var(--fio) solid var(--fio-butter); background:color-mix(in srgb,var(--verde-950) 42%,transparent);
  backdrop-filter:blur(8px); color:var(--butter);
  transition:background .3s var(--saida),border-color .3s var(--saida),transform .3s var(--saida);
}
.capsula:hover{background:color-mix(in srgb,var(--butter) 12%,transparent); border-color:var(--butter); transform:translateY(-2px)}
.capsula__pin{width:20px;height:20px;fill:currentColor;flex:0 0 auto}
.capsula span{display:grid; line-height:1.25; text-align:left}
.capsula b{font-weight:500; font-size:1.02rem; letter-spacing:-0.01em}
.capsula small{font-size:.82rem; color:var(--tinta-2); opacity:.85}

.botao{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.7rem; border-radius:var(--r-pill); border:var(--fio) solid transparent;
  font-weight:500; font-size:1rem; letter-spacing:-0.01em; text-decoration:none; cursor:pointer;
  font-family:inherit;
  transition:background .3s var(--saida),color .3s var(--saida),border-color .3s var(--saida),transform .3s var(--saida);
}
.botao:hover{transform:translateY(-2px)}
.botao--fantasma{border-color:var(--fio-claro); color:var(--creme); background:transparent}
.botao--fantasma:hover{border-color:var(--butter); color:var(--butter); background:transparent}
.botao--solido{background:var(--verde-900); color:var(--creme)}
.botao--solido:hover{background:var(--verde-alto)}
.botao--credo{
  background:var(--verde-900); color:var(--creme); border-color:var(--verde-900);
  padding:1.05rem 1.5rem 1.05rem 1.9rem; gap:1rem; font-size:1.08rem;
  box-shadow:0 10px 30px color-mix(in srgb,var(--verde-950) 20%,transparent);
}
.botao--credo svg{width:22px; height:22px; fill:none; stroke:var(--butter); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s var(--saida)}
.botao--credo:hover{background:var(--verde-alto); border-color:var(--verde-alto)}
.botao--credo:hover svg{transform:translateX(5px)}
.botao--claro{background:var(--butter); color:var(--verde-950)}
.botao--claro:hover{background:var(--butter-alto)}

/* ============================================================ versículo */
.versiculo{position:relative; background:var(--verde-950); margin-top:-1px}
/* O grao saiu (so existia para quebrar a faixa do degrade). Ficou este brilho
   unico do site: bem fraco e muito difuso, so por baixo do versiculo. */
.versiculo__palco{isolation:isolate}
.versiculo__luz{
  position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:-1;
  width:min(120vw,1150px); aspect-ratio:1/.58; border-radius:50%;
  background:radial-gradient(ellipse at center,
    color-mix(in srgb,var(--butter) 9%,transparent) 0%,
    color-mix(in srgb,var(--butter) 6%,transparent) 30%,
    color-mix(in srgb,var(--butter) 2.5%,transparent) 52%,
    transparent 74%);
  filter:blur(90px); pointer-events:none;
}
.versiculo__trilho{position:relative; height:165vh}
.versiculo__palco{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center; text-align:center;
  padding:clamp(2rem,5vw,4rem) var(--gut);
}
.versiculo blockquote{margin:0; position:relative; max-width:min(64ch,94vw)}
.v-palavra{
  opacity:0; filter:blur(6px);
  transition:opacity .42s var(--saida),filter .42s var(--saida);
  will-change:opacity,filter;
}
.v-palavra[data-aceso]{opacity:1; filter:blur(0)}
.versiculo p{
  font-size:var(--t-versiculo); font-weight:400; line-height:1.42;
  letter-spacing:var(--tk-titulo); color:var(--creme);
}
.versiculo em{font-family:var(--script); font-style:normal; color:var(--butter); font-size:1.2em; letter-spacing:0; white-space:nowrap}
.versiculo cite{
  display:inline-block; margin-top:2rem; font-style:normal; font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase; font-weight:500;
  color:var(--verde-950); background:var(--butter);
  padding:.45rem 1rem; border-radius:var(--r-pill);
}

/* ============================================================ seções */
.secao{
  position:relative; overflow:hidden;
  padding:var(--resp-g) 0;
  display:grid;
  grid-template-columns:
    [borda-inicio] minmax(var(--gut),1fr)
    [conteudo-inicio] minmax(0,var(--larg))
    [conteudo-fim] minmax(var(--gut),1fr) [borda-fim];
}
.secao > *{grid-column:conteudo-inicio / conteudo-fim; position:relative; z-index:var(--z-conteudo)}
.secao > .botao{justify-self:start}
.secao--escuro{background:var(--verde-900); color:var(--creme)}
.secao--claro{background:var(--creme); color:var(--verde-950)}
.secao--butter{background:var(--creme); color:var(--verde-950)}

.titulo{
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  font-size:var(--t-h2); letter-spacing:var(--tk-display); line-height:1;
}
.titulo__ast{
  /* o glifo do asterisco mora no alto da caixa; 0.121em desce a tinta
     ate o centro optico da maiuscula (medido na Neue Haas Black) */
  font-size:.52em; line-height:1; color:currentColor;
  transform:translateY(.221em);
}
.titulo__risco{
  /* -.02em poe o fio exatamente no centro da tinta do asterisco,
     que ja desceu .221em do proprio tamanho */
  width:clamp(26px,4.4vw,54px); height:var(--fio);
  background:currentColor; opacity:.3; transform:translateY(-.02em);
}
.titulo--claro{color:var(--creme)}
.titulo em{font-family:var(--script); font-style:normal; font-weight:400; font-size:1.12em; letter-spacing:0; color:var(--butter)}
.secao--claro .titulo em,.secao--butter .titulo em{color:var(--verde-alto)}

.secao__lead{margin-top:1.75rem; max-width:56ch; font-size:var(--t-lead); line-height:1.5; color:color-mix(in srgb,currentColor 78%,transparent)}
.secao__lead--claro{color:var(--tinta-2)}

.script{font-family:var(--script); font-weight:400; letter-spacing:0}

/* --- quem somos: um bloco de texto e uma foto da mesma altura --- */
.quem__grade{
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
}
/* titulo, lead, apoio e botao formam UM bloco. Antes o titulo ficava solto
   la em cima e o texto boiava no meio da coluna. */
.quem__texto{display:grid; gap:1.25rem; align-content:start}
.quem__texto .titulo{margin-bottom:.75rem}
.quem__texto .secao__lead{margin-top:0; max-width:26ch}
.quem__apoio{font-size:1.05rem; line-height:1.6; color:var(--tinta-esc); max-width:42ch}
.quem__texto .botao{justify-self:start; margin-top:.75rem}
.quem__foto{
  margin:0; overflow:hidden; border-radius:var(--r-md);
  /* a altura da linha e ditada pelo bloco de texto: a foto so estica ate ela,
     terminando junto com o botao. O min-height e so um piso, tem que ficar
     ABAIXO da altura do texto — se passar, e a foto que passa a mandar. */
  height:100%; min-height:16rem;
  background:var(--verde-alto);
}
.quem__foto img{width:100%; height:100%; object-fit:cover}
@media (max-width:60rem){
  .quem__grade{grid-template-columns:1fr; gap:clamp(1.75rem,5vw,2.5rem)}
  .quem__foto{min-height:0; aspect-ratio:16/10}
}

/* --- agenda --- */
.agenda{list-style:none; margin:var(--resp-s) 0 0; padding:0; display:grid}
.agenda__item{
  display:grid; align-items:baseline; gap:.2rem 1.5rem;
  grid-template-columns:minmax(8.5rem,14vw) minmax(7rem,10vw) 1fr;
  padding:clamp(1.1rem,2.2vw,1.7rem) 0;
  border-top:var(--fio) solid var(--fio-claro);
  transition:background .35s var(--saida),padding-inline .35s var(--saida);
}
.agenda__item:last-child{border-bottom:var(--fio) solid var(--fio-claro)}
.agenda__item:hover{background:color-mix(in srgb,var(--creme) 4.5%,transparent); padding-inline:1rem}
.agenda__dia{font-size:clamp(.95rem,.9rem + .3vw,1.15rem); font-weight:500; letter-spacing:.02em; text-transform:uppercase}
.agenda__hora{font-size:clamp(.95rem,.9rem + .3vw,1.15rem); color:var(--butter); font-variant-numeric:tabular-nums; white-space:nowrap}
.agenda__hora i{font-style:normal; opacity:.55; margin-inline-end:.15rem}
.agenda__nome{font-size:var(--t-h3); font-weight:500; letter-spacing:var(--tk-titulo); line-height:1.15}
.agenda__nome em{font-family:var(--script); font-style:normal; font-weight:400; font-size:1.15em; letter-spacing:0}
.agenda__nome small{font-size:.55em; font-weight:400; opacity:.7; letter-spacing:0; white-space:nowrap}
.agenda__nota{grid-column:3; font-size:.95rem; color:var(--tinta-2); opacity:.8; margin-top:.35rem; max-width:44ch}
.agenda__item--destaque{border-top-color:var(--fio-butter)}
.agenda__item--destaque .agenda__dia{color:var(--butter)}
.agenda__item--destaque .agenda__nome{font-size:clamp(1.6rem,1.2rem + 1.9vw,2.6rem)}

/* --- dúvidas --- */


/* --- pregações --- */
.pregacoes__grade{display:grid; gap:clamp(1.75rem,4vw,2.75rem); margin:var(--resp-s) 0 0}
.pregacoes__lista{display:grid; gap:clamp(1.25rem,2.4vw,2rem); grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.prega{display:grid; gap:1rem}
.prega--principal .prega__texto h3{font-size:clamp(1.4rem,1.1rem + 1.4vw,2.1rem)}
.prega__capa{
  position:relative; display:block; overflow:hidden; border-radius:var(--r-md);
  background:var(--verde-alto); aspect-ratio:16/9;
}
.prega__capa img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--saida)}
.prega__capa:hover img{transform:scale(1.05)}
.prega__play{
  position:absolute; inset:0; margin:auto; width:clamp(46px,6vw,64px); height:clamp(46px,6vw,64px);
  border-radius:50%; background:color-mix(in srgb,var(--verde-950) 72%,transparent);
  backdrop-filter:blur(4px); border:var(--fio) solid var(--fio-butter);
  transition:background .3s var(--saida),transform .3s var(--saida);
}
.prega__play::after{
  content:""; position:absolute; inset:0; margin:auto; width:0; height:0;
  border-left:14px solid var(--butter); border-block:9px solid transparent; translate:2px 0;
}
.prega__capa:hover .prega__play{background:var(--butter); transform:scale(1.08)}
.prega__capa:hover .prega__play::after{border-left-color:var(--verde-950)}
.prega__capa iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.prega__texto h3{font-size:var(--t-h3); line-height:1.2}
.prega__texto h3 a{text-decoration:none; background-image:linear-gradient(var(--butter),var(--butter)); background-size:0 var(--fio); background-repeat:no-repeat; background-position:0 100%; transition:background-size .4s var(--saida)}
.prega__texto h3 a:hover{background-size:100% var(--fio); color:var(--butter)}
.prega__data{margin-top:.4rem; font-size:.88rem; color:var(--tinta-2); opacity:.75}
.pregacoes .botao{margin-top:var(--resp-s)}

/* --- frentes --- */
.frentes__lista{list-style:none; margin:var(--resp-s) 0 0; padding:0; display:grid; gap:0; grid-template-columns:repeat(auto-fit,minmax(23rem,1fr))}
.frentes__lista li{padding:clamp(1.4rem,3vw,2.2rem) clamp(0rem,2vw,1.5rem); border-top:var(--fio) solid var(--fio-escuro)}
.frentes__lista h3{font-size:var(--t-h3); letter-spacing:var(--tk-titulo)}
.frentes__lista p{margin-top:.5rem; line-height:1.55; color:color-mix(in srgb,var(--verde-950) 76%,transparent); max-width:30ch}
.frentes__lista em{font-style:italic; font-weight:500; color:var(--verde-900)}

/* --- casa --- */
.casa__galeria{display:grid; gap:clamp(.75rem,1.6vw,1.25rem); margin:var(--resp-s) 0 0; grid-template-columns:repeat(3,1fr)}
.casa__foto{margin:0; overflow:hidden; border-radius:var(--r-md); background:var(--verde-alto); isolation:isolate}
/* proporcao cravada: a grade nao pode depender do formato da foto que
   subiu pelo painel, senao uma foto em pe estica a fileira inteira */
.casa__foto{grid-column:span 1; aspect-ratio:3/2}
.casa__foto--grande{grid-column:1/-1; aspect-ratio:2.4/1}
.casa__foto img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--saida);
}
.casa__foto:hover img{transform:scale(1.04)}
.casa__mapa{
  margin-top:clamp(.75rem,1.6vw,1.25rem); border-radius:var(--r-md); overflow:hidden;
  aspect-ratio:16/7; position:relative; background:var(--verde-alto);
}
.casa__mapa:has(iframe)::before{display:none}
.casa__mapa iframe{width:100%; height:100%; border:0; display:block}

/* ============================================================ rodapé */
.rodape{position:relative; background:var(--verde-950); padding:var(--resp-m) var(--gut) clamp(2.5rem,5vw,4rem); overflow:hidden}
.rodape__grade{position:relative; max-width:var(--larg); margin-inline:auto; display:grid; gap:clamp(2.25rem,5vw,3.5rem); grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.rodape__marca{display:grid; gap:1rem; align-content:start}
.rodape__simbolo{
  width:clamp(52px,7vw,74px); aspect-ratio:368/336.5; background:var(--butter);
  -webkit-mask:url("/assets/img/simbolo.svg") no-repeat center/contain;
  mask:url("/assets/img/simbolo.svg") no-repeat center/contain;
}
.rodape__marca p{font-weight:500; line-height:1.35}
.rodape__marca span{font-weight:400; color:var(--tinta-2); opacity:.7}
.rodape__bloco h2{font-size:1.02rem; font-weight:500; line-height:1.3; letter-spacing:-0.01em}
.rodape__bloco ul{list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.6rem}
.rodape__bloco a{color:var(--butter); text-decoration:none; line-height:1.45; transition:opacity .25s}
.rodape__bloco a:hover{opacity:.7; text-decoration:underline; text-underline-offset:3px}
.rodape__bloco li{color:var(--tinta-2); font-size:.95rem; line-height:1.5}
.copiar{
  font-family:inherit; font-size:1rem; background:none; border:0; padding:0; cursor:pointer;
  color:var(--butter); text-decoration:underline; text-underline-offset:3px; text-decoration-style:dotted;
}
.copiar[data-copiado]{color:var(--creme); text-decoration:none}
.rodape__fim{position:relative; max-width:var(--larg); margin:var(--resp-m) auto 0; padding-top:1.5rem; border-top:var(--fio) solid var(--fio-claro); font-family:var(--script); font-size:clamp(1.35rem,3vw,2rem); color:var(--tinta-2); text-align:center}

/* ============================================================ credo */
.credo{
  border:0; padding:clamp(1.75rem,5vw,3.5rem); max-width:min(52rem,92vw); width:100%;
  background:var(--creme); color:var(--verde-950); border-radius:var(--r-lg);
  margin:auto; position:fixed; inset:0;
}
.credo::backdrop{background:color-mix(in srgb,var(--verde-950) 82%,transparent); backdrop-filter:blur(6px)}
.credo h2{font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem); letter-spacing:var(--tk-display)}
.credo__texto{margin-top:1.5rem; display:grid; gap:1rem; max-width:62ch; line-height:1.65}
.credo__fechar{
  position:absolute; top:.75rem; right:1rem; font-size:2rem; line-height:1;
  background:none; border:0; cursor:pointer; color:var(--tinta-esc); padding:.35rem .6rem; border-radius:50%;
}
.credo__fechar:hover{background:color-mix(in srgb,var(--verde-950) 8%,transparent)}
[data-preencher]{border:var(--fio) solid var(--fio-escuro); border-radius:var(--r-sm); padding:1rem 1.25rem; color:var(--tinta-esc)}

/* ============================================================ revelação */
[data-revela]{opacity:0; transform:translateY(22px); transition:opacity .8s var(--saida),transform .8s var(--saida)}
[data-revela][data-visivel]{opacity:1; transform:none}
[data-revela-atraso="1"]{transition-delay:.08s}
[data-revela-atraso="2"]{transition-delay:.16s}
[data-revela-atraso="3"]{transition-delay:.24s}

/* ============================================================ responsivo */
@media (max-width:60rem){
  .topo__nav,.topo__cta{display:none}
  .topo__menu{display:block}
  .agenda__item{grid-template-columns:1fr auto; gap:.35rem 1rem}
  .agenda__nome{grid-column:1/-1}
  .agenda__nota{grid-column:1/-1}
  .casa__galeria{grid-template-columns:1fr}
  .casa__foto{grid-column:1/-1}
  .casa__foto--grande{aspect-ratio:auto}
}
@media (max-width:30rem){
  .hero__acoes{flex-direction:column; align-items:stretch}
  .capsula{justify-content:center}
  .botao{width:100%}
}

/* ============================================================ movimento reduzido */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  [data-revela]{opacity:1; transform:none}
  .versiculo__trilho{height:auto}
  .versiculo__palco{position:static; height:auto; padding-block:var(--resp-g)}
  .v-palavra{opacity:1; filter:none}
  .hero__media img{transform:none}
}

/* --- correções de camada --- */
.secao--escuro{isolation:isolate}

/* ============================================================ fale com a gente */
.contato__atalhos{display:flex; flex-wrap:wrap; gap:.9rem; margin-top:var(--resp-s)}
.capsula--zap,.capsula--claro{
  background:var(--verde-900); border-color:var(--verde-900); color:var(--creme);
  padding:.85rem 1.5rem .85rem 1.15rem; backdrop-filter:none;
}
.capsula--zap:hover,.capsula--claro:hover{background:var(--verde-alto); border-color:var(--verde-alto); color:var(--creme)}
.capsula--zap small,.capsula--claro small{color:var(--butter); opacity:1}
.capsula--claro{background:transparent; color:var(--verde-900); border-color:var(--fio-escuro)}
.capsula--claro:hover{background:color-mix(in srgb,var(--verde-950) 6%,transparent); border-color:var(--verde-900); color:var(--verde-900)}
.capsula--claro small{color:var(--tinta-esc)}

.forma{
  margin-top:clamp(2.25rem,5vw,3.5rem); display:grid; gap:1.1rem 1.5rem;
  grid-template-columns:1fr 1fr; align-items:stretch;
}
.forma__campo{display:grid; gap:.45rem}
.forma__campo--nome{grid-column:1; grid-row:1}
.forma__campo--email{grid-column:1; grid-row:2}
.forma__campo--fone{grid-column:1; grid-row:3}
.forma__dica{grid-column:1; grid-row:4; font-size:.85rem; line-height:1.45; color:var(--tinta-esc-2); margin-top:-.35rem}
.forma__campo--msg{grid-column:2; grid-row:1 / span 4; align-self:stretch; grid-template-rows:auto 1fr auto}
.forma__campo--msg textarea{min-height:9.5rem; height:100%}
.forma__rodape{grid-column:1 / -1}
/* recado de erro por campo: some enquanto nao ha erro, para nao empurrar o layout */
.forma__erro{font-size:.82rem; line-height:1.4; color:var(--alerta); font-weight:500}
.forma__erro:empty{display:none}
.forma__campo > span{font-size:.9rem; font-weight:500; letter-spacing:-0.005em; color:var(--verde-900)}
.forma__campo input,.forma__campo textarea{
  font-family:inherit; font-size:1rem; color:var(--verde-950);
  background:var(--creme-off); border:var(--fio) solid var(--fio-escuro); border-radius:var(--r-md);
  padding:.85rem 1.1rem; width:100%; resize:vertical;
  transition:background .25s var(--saida),border-color .25s var(--saida);
}
.forma__campo input:hover,.forma__campo textarea:hover{border-color:color-mix(in srgb,var(--verde-900) 45%,transparent)}
.forma__campo input:focus,.forma__campo textarea:focus{
  outline:none; background:var(--creme-off); border-color:var(--verde-900);
}
.forma__campo input:user-invalid,.forma__campo textarea:user-invalid,
.forma__campo[data-invalido] input,.forma__campo[data-invalido] textarea{border-color:var(--alerta)}
.forma__isca{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.forma__rodape{display:flex; flex-wrap:wrap; align-items:center; gap:1rem; justify-content:space-between}
.forma__aviso{font-size:.95rem; min-height:1.4em; color:var(--tinta-esc)}
.forma__aviso[data-estado="erro"]{color:var(--alerta); font-weight:500}
.forma__aviso[data-estado="ok"]{color:var(--verde-900); font-weight:500}
.forma button[disabled]{opacity:.55; cursor:progress; transform:none}
.contato .capsula__pin{width:22px; height:22px}

@media (max-width:52rem){
  .forma{grid-template-columns:1fr}
  .forma__campo--nome,.forma__campo--email,.forma__campo--fone,
  .forma__campo--msg,.forma__dica{grid-column:1; grid-row:auto}
  .forma__campo--msg textarea{min-height:9rem; height:auto}
}
@media (max-width:30rem){
  .contato__atalhos{flex-direction:column; align-items:stretch}
  .forma__rodape{flex-direction:column; align-items:stretch}
  .forma__rodape .botao{width:100%}
}

/* ============================================================ faixa de ondas (arte da marca) */
.faixa-ondas{
  position:absolute; inset-inline:0; top:0;
  height:clamp(64px,8vw,132px);
  z-index:var(--z-ondas); pointer-events:none;
  background:url("/assets/img/ondas.svg") repeat-x top center;
  background-size:auto 100%;
}
.secao > .faixa-ondas{grid-column:borda-inicio / borda-fim}
/* onde a faixa de ondas entra, o conteudo desce bastante: com o respiro normal
   o titulo encostava nas escamas. Vale para "Nossa programacao" e "A nossa casa". */
.semana,.casa{padding-top:calc(var(--resp-g) * 1.79)}
/* emenda entre duas secoes escuras seguidas: sem quebra visual no meio, o
   respiro cheio dos dois lados (2x --resp-g) abria um vao grande demais. */
.semana{padding-bottom:calc(var(--resp-g) * .6)}
.pregacoes{padding-top:calc(var(--resp-g) * .6)}

/* ============================================================ página do credo */
.pagina-credo{background:var(--creme)}
.topo--fixo{position:sticky; background:var(--verde-950)}
.topo__cta--voltar{margin-inline-start:auto}
.pagina-credo .topo__interno{width:100%}

.credo-capa{
  position:relative; background:var(--verde-900); color:var(--creme); overflow:hidden;
  display:grid;
  grid-template-columns:
    [borda-inicio] minmax(var(--gut),1fr)
    [conteudo-inicio] minmax(0,var(--larg))
    [conteudo-fim] minmax(var(--gut),1fr) [borda-fim];
  padding:clamp(7rem,14vw,11rem) 0 clamp(3.5rem,7vw,6rem);
}
.credo-capa .faixa-ondas{grid-column:borda-inicio / borda-fim}
.credo-capa__interno{grid-column:conteudo-inicio / conteudo-fim; position:relative; z-index:var(--z-conteudo)}
.credo-capa h1{font-size:var(--t-h1); letter-spacing:var(--tk-display); line-height:.98}
.credo-capa h1 em{font-family:var(--script); font-style:normal; font-weight:400; color:var(--butter); font-size:1.15em; letter-spacing:0}
.credo-capa p{margin-top:1.5rem; max-width:46ch; font-size:var(--t-lead); color:var(--tinta-2)}
/* --- o corpo: sumario preso a esquerda, artigos a direita --- */
.credo-corpo{
  background:var(--creme); color:var(--verde-950);
  display:grid;
  grid-template-columns:
    [borda-inicio] minmax(var(--gut),1fr)
    [conteudo-inicio] minmax(0,var(--larg))
    [conteudo-fim] minmax(var(--gut),1fr) [borda-fim];
  padding:var(--resp-m) 0;
}
.credo-corpo > *{grid-column:conteudo-inicio / conteudo-fim}
@media (min-width:64rem){
  .credo-corpo{column-gap:clamp(2.5rem,5vw,5rem)}
  .credo-corpo > .sumario{grid-column:conteudo-inicio / span 1; width:19rem}
  .credo-corpo{
    grid-template-columns:
      [borda-inicio] minmax(var(--gut),1fr)
      [conteudo-inicio] 19rem
      [texto-inicio] minmax(0,calc(var(--larg) - 19rem))
      [conteudo-fim] minmax(var(--gut),1fr) [borda-fim];
  }
  .credo-corpo > .artigos{grid-column:texto-inicio / conteudo-fim}
}

/* --- sumario --- */
/* a coluna precisa esticar ate a altura dos artigos — e a sobra dela que da
   curso ao sticky. Com align-self:start a caixa nao gruda em nada. */
.sumario{align-self:stretch}
.sumario__caixa{position:sticky; top:6.5rem; display:grid; gap:.9rem; align-content:start}
.sumario__titulo{
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; color:var(--tinta-esc-2);
}
.sumario__grupo{
  margin-top:.7rem; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  font-weight:500; color:var(--tinta-esc-2);
}
/* sem corte e sem rolagem interna: a lista inteira fica a vista. */
.sumario__nav{min-width:0}
.sumario__lista{list-style:none; margin:.5rem 0 0; padding:0; display:grid; counter-reset:none}
.sumario__lista a{
  display:grid; grid-template-columns:2.1rem 1fr; align-items:baseline; gap:.15rem;
  padding:.34rem 0; text-decoration:none; line-height:1.25; font-size:.95rem;
  color:var(--tinta-esc); transition:color .25s var(--saida)
}
.sumario__num{font-size:.76rem; color:var(--tinta-esc-2); font-variant-numeric:tabular-nums}
.sumario__lista a:hover{color:var(--verde-900)}
.sumario__lista a[data-aqui]{color:var(--verde-900); font-weight:500}
.sumario__lista a[data-aqui] .sumario__num{color:var(--verde-900)}
.sumario__lista li[hidden]{display:none}

.busca input{
  font-family:inherit; font-size:.95rem; width:100%; color:var(--verde-950);
  background:var(--creme-off); border:var(--fio) solid var(--fio-escuro);
  border-radius:var(--r-pill); padding:.6rem 1rem;
  transition:border-color .25s var(--saida);
}
.busca input::placeholder{color:var(--tinta-esc-2)}
.busca input:focus{outline:none; border-color:var(--verde-900)}
.busca__placar{font-size:.82rem; color:var(--tinta-esc-2); min-height:1.2em}
.busca__placar:empty{display:none}
.busca__vazio{margin-top:2rem; font-size:1.05rem; color:var(--tinta-esc)}

.sumario__tudo{
  justify-self:start; font-family:inherit; font-size:.88rem; cursor:pointer;
  background:none; border:var(--fio) solid var(--fio-escuro); color:var(--tinta-esc);
  border-radius:var(--r-pill); padding:.5rem 1rem;
  transition:border-color .25s var(--saida),color .25s var(--saida);
}
.sumario__tudo:hover{border-color:var(--verde-900); color:var(--verde-900)}

/* --- artigos --- */
.artigos{display:grid; gap:clamp(3rem,6vw,5rem); min-width:0}
.artigo{
  scroll-margin-top:7rem;
  padding-top:clamp(2.25rem,4vw,3.25rem);
  border-top:var(--fio) solid var(--fio-escuro);
}
.artigo:first-of-type{padding-top:0; border-top:0}
.artigo[hidden]{display:none}
.artigo h2{
  display:grid; gap:.6rem; justify-items:start;
  font-size:clamp(1.4rem,1.15rem + 1.1vw,2rem); letter-spacing:var(--tk-titulo); color:var(--verde-900);
}
/* o numero vira sobrelinha: separa o topico sem depender so do espaco */
.artigo__num{
  font-size:.72rem; font-weight:500; letter-spacing:.16em; line-height:1;
  color:var(--verde-950); background:var(--oliva);
  padding:.3rem .55rem; border-radius:var(--r-sm);
  font-variant-numeric:tabular-nums;
}
.artigo p{margin-top:1rem; line-height:1.7; max-width:64ch; color:var(--tinta-esc)}
.artigo em{font-style:italic}
.artigo__lista{margin:1rem 0 0; padding:0; list-style:none; display:grid; gap:1rem; max-width:64ch}
.artigo__lista li{
  position:relative; padding-inline-start:1.5rem; line-height:1.7; color:var(--tinta-esc);
}
.artigo__lista li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:.45rem; height:.45rem; border-radius:50%; background:var(--butter);
  outline:var(--fio) solid color-mix(in srgb,var(--verde-950) 22%,transparent);
}

/* --- as referencias vivem recolhidas: sao 70% do documento --- */
.versos{margin-top:1.5rem; max-width:64ch}
.versos summary{
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; list-style:none;
  font-size:.85rem; letter-spacing:.02em; font-weight:500; color:var(--verde-900);
  border:var(--fio) solid var(--fio-escuro); border-radius:var(--r-pill);
  padding:.45rem 1rem; background:var(--creme-off);
  transition:border-color .25s var(--saida),background .25s var(--saida);
}
.versos summary::-webkit-details-marker{display:none}
.versos summary::after{
  content:""; width:.5rem; height:.5rem; margin-inline-start:.15rem;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  rotate:45deg; translate:0 -2px; transition:rotate .3s var(--saida);
}
.versos summary:hover{border-color:var(--verde-900)}
.versos[open] summary::after{rotate:225deg; translate:0 2px}
.versos .versos__fechar{display:none}
.versos[open] .versos__abrir{display:none}
.versos[open] .versos__fechar{display:inline}
.versos__lista{
  margin:1.25rem 0 0; display:grid; gap:.9rem;
  padding-inline-start:1.25rem;
  border-inline-start:var(--fio) solid var(--fio-escuro);
}
.verso{display:grid; gap:.15rem}
.verso[hidden]{display:none}
.verso dt{
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500;
  color:var(--verde-900);
}
.verso dd{margin:0; font-size:.95rem; line-height:1.6; color:var(--tinta-esc-2)}
mark{background:var(--butter); color:var(--verde-950); border-radius:3px; padding:0 .12em}

/* --- a virada para a parte 2 --- */
.virada{
  margin-block:clamp(1.5rem,3vw,3rem);
  padding:clamp(1.5rem,3vw,2.25rem) 0;
  border-block:var(--fio) solid var(--fio-escuro);
  scroll-margin-top:7rem;
}
.virada__rotulo{
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; color:var(--tinta-esc-2);
}
.virada__texto{
  margin-top:.5rem; font-size:var(--t-h3); line-height:1.3;
  letter-spacing:var(--tk-titulo); color:var(--verde-900); max-width:34ch;
}
.virada[hidden]{display:none}

/* --- o fecho do documento --- */
.credo-suma{
  margin-top:clamp(1rem,2vw,2rem); padding-top:clamp(2rem,4vw,3rem);
  border-top:var(--fio) solid var(--fio-escuro);
}
.credo-suma p{margin-top:1rem; line-height:1.7; max-width:60ch; color:var(--tinta-esc)}
.credo-suma p:first-child{
  margin-top:0; font-size:var(--t-h3); line-height:1.3;
  letter-spacing:var(--tk-titulo); color:var(--verde-900); max-width:24ch;
}
.credo-suma__assina{
  margin-top:2.25rem !important; font-size:.9rem !important; color:var(--tinta-esc-2) !important;
}
.credo-suma__assina span{font-weight:500; color:var(--verde-900)}
.credo-suma[hidden]{display:none}

@media (max-width:63.99rem){
  .sumario{margin-bottom:clamp(2.5rem,6vw,4rem)}
  .sumario__caixa{
    position:static; padding:clamp(1.25rem,3vw,1.75rem);
    background:var(--creme-off); border:var(--fio) solid var(--fio-escuro);
    border-radius:var(--r-md);
  }
  
  .sumario__lista{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:0 1.5rem}
}

/* ============================================================ slider de banners */
.mostra{
  position:relative; margin-top:clamp(2rem,4vw,3rem);
  /* 16:9 fixo: a largura tambem e limitada pela altura que sobra na tela,
     senao o banner e as bolinhas ficam cortados na primeira dobra */
  max-width:min(58rem,100%,calc((100svh - 31rem) * 16 / 9));
  margin-inline:auto; border-radius:var(--r-lg); overflow:hidden;
  background:var(--verde-950);
  box-shadow:0 14px 40px color-mix(in srgb,var(--verde-950) 40%,transparent);
}
.mostra__pista{list-style:none; margin:0; padding:0; display:grid; grid-template-areas:"palco"}
.mostra__slide{
  grid-area:palco; opacity:0; transition:opacity .7s var(--saida);
  pointer-events:none;
}
.mostra__slide[data-ativo]{opacity:1; pointer-events:auto}
.mostra__slide img{width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover}

.mostra__seta{
  position:absolute; top:50%; translate:0 -50%; z-index:2;
  width:clamp(34px,4vw,42px); aspect-ratio:1; border-radius:50%;
  border:var(--fio) solid var(--fio-claro);
  background:color-mix(in srgb,var(--verde-950) 55%,transparent);
  backdrop-filter:blur(6px); cursor:pointer;
  display:grid; place-items:center; opacity:0;
  transition:opacity .3s var(--saida),background .3s var(--saida);
}
.mostra:hover .mostra__seta,.mostra:focus-within .mostra__seta{opacity:1}
.mostra__seta:hover{background:color-mix(in srgb,var(--butter) 20%,transparent); border-color:var(--butter)}
.mostra__seta::before{
  content:""; width:9px; height:9px; border-top:var(--fio) solid var(--creme);
  border-right:var(--fio) solid var(--creme); border-width:1.5px 1.5px 0 0;
}
.mostra__seta--antes{left:.75rem} .mostra__seta--antes::before{rotate:225deg; translate:2px 0}
.mostra__seta--depois{right:.75rem} .mostra__seta--depois::before{rotate:45deg; translate:-2px 0}

.mostra__pontos{
  position:absolute; bottom:.9rem; left:0; right:0; z-index:2;
  display:flex; justify-content:center; gap:.45rem;
}
.mostra__ponto{
  width:7px; height:7px; padding:0; border:0; border-radius:50%; cursor:pointer;
  background:color-mix(in srgb,var(--creme) 45%,transparent);
  transition:background .3s var(--saida),width .3s var(--saida);
}
.mostra__ponto[aria-selected="true"]{background:var(--butter); width:22px; border-radius:var(--r-pill)}
@media (prefers-reduced-motion:reduce){
  .mostra__slide{transition:none}
}

/* ============================================================ ministérios que abrem */
.ministerios{list-style:none; margin:var(--resp-s) 0 0; padding:0; display:grid}
.ministerio{border-top:var(--fio) solid var(--fio-escuro)}
.ministerio:last-child{border-bottom:var(--fio) solid var(--fio-escuro)}
.ministerio__cabeca{
  width:100%; display:grid; align-items:baseline; gap:.35rem 1.5rem;
  grid-template-columns:minmax(9rem,15%) 1fr auto;
  padding:clamp(1.2rem,2.4vw,1.8rem) 0; background:none; border:0; cursor:pointer;
  font-family:inherit; text-align:left; color:inherit;
  transition:padding-inline .35s var(--saida),background .35s var(--saida);
}
.ministerio__cabeca:hover{background:color-mix(in srgb,var(--verde-950) 5%,transparent); padding-inline:1rem}
.ministerio__nome{font-size:var(--t-h3); font-weight:500; letter-spacing:var(--tk-titulo); line-height:1.15}
.ministerio__resumo{font-size:1rem; line-height:1.5; color:color-mix(in srgb,var(--verde-950) 74%,transparent); max-width:44ch}
.ministerio__resumo em{font-style:italic; font-weight:500; color:var(--verde-900)}
.ministerio__mais{
  position:relative; width:30px; height:30px; align-self:center;
  background:var(--oliva);
  border:var(--fio) solid var(--contorno);
  border-radius:50%;
  transition:background .3s var(--saida),border-color .3s var(--saida),rotate .35s var(--saida);
}
.ministerio__cabeca:hover .ministerio__mais{border-color:var(--verde-950)}
.ministerio__mais::before,.ministerio__mais::after{
  content:""; position:absolute; inset:0; margin:auto; background:var(--verde-900);
}
.ministerio__mais::before{width:11px; height:var(--fio)}
.ministerio__mais::after{width:var(--fio); height:11px; transition:opacity .3s var(--saida)}
.ministerio__cabeca[aria-expanded="true"] .ministerio__mais{rotate:180deg; background:var(--butter); border-color:var(--contorno)}
.ministerio__cabeca[aria-expanded="true"] .ministerio__mais::after{opacity:0}
.ministerio__corpo{padding:0 0 clamp(1.4rem,3vw,2rem)}
.ministerio__corpo[hidden]{display:none}
.ficha{
  margin:0; display:grid; gap:1rem 2.5rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  max-width:60rem;
}
.ficha__par dt{
  font-size:.76rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--tinta-esc-2); font-weight:500;
}
.ficha__par dd{margin:.3rem 0 0; line-height:1.55; color:var(--verde-950)}
[data-preencher-curto]{
  color:var(--tinta-esc-2); font-style:italic;
}
.ministerio__corpo{animation:abre .4s var(--saida)}
@keyframes abre{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.ministerio__corpo{animation:none}}
@media (max-width:52rem){
  .ministerio__cabeca{grid-template-columns:1fr auto}
  .ministerio__resumo{grid-column:1/-1}
}

/* ============================================================ instagram */
.insta__grade{
  margin:var(--resp-s) 0 0; display:grid; gap:clamp(.5rem,1.2vw,.9rem);
  grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
}
.insta__grade[hidden]{display:none}
.insta__item{
  position:relative; display:block; overflow:hidden; border-radius:var(--r-sm);
  aspect-ratio:1; background:color-mix(in srgb,var(--verde-900) 12%,var(--creme));
}
.insta__item img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--saida)}
.insta__item:hover img{transform:scale(1.05)}
.insta .botao{margin-top:var(--resp-s)}

/* o botão fantasma do hero fica sobre a foto: precisa do mesmo apoio da cápsula */
.hero__acoes .botao--fantasma{
  background:color-mix(in srgb,var(--verde-950) 42%,transparent); backdrop-filter:blur(8px);
  border-color:var(--fio-butter); color:var(--creme);
}
.hero__acoes .botao--fantasma:hover{
  background:color-mix(in srgb,var(--butter) 14%,transparent);
  border-color:var(--butter); color:var(--butter);
}

/* ============================================================
   FAIXA DE RECADO
   Entra na borda, acima do cabeçalho, e sai sozinha quando a data
   passa. Fundo verde-950 e não butter: butter nunca é fundo de
   faixa larga — ele é a luz que marca a palavra e o link.
   ============================================================ */
.aviso{
  position:fixed; top:0; left:0; right:0; z-index:65;
  display:flex; align-items:center; justify-content:center; gap:.75rem;
  padding:.7rem calc(var(--gut) + 2.5rem) .7rem var(--gut);
  background:var(--verde-950); color:var(--tinta-2);
  border-bottom:var(--fio) solid var(--fio-butter);
  font-size:clamp(.88rem,.84rem + .18vw,1rem); line-height:1.4; text-align:center;
}
.aviso__texto{margin:0; max-width:70ch}
.aviso__texto strong{color:var(--butter); font-weight:500}
.aviso__acao{
  display:inline-block; margin-inline-start:.5rem; color:var(--butter);
  text-decoration:underline; text-underline-offset:.22em;
  text-decoration-color:var(--fio-butter); transition:text-decoration-color .3s var(--saida);
}
.aviso__acao:hover{text-decoration-color:var(--butter)}
.aviso__fechar{
  position:absolute; inset-inline-end:calc(var(--gut) - .35rem); top:50%; translate:0 -50%;
  width:2rem; aspect-ratio:1; border-radius:50%; border:0; background:transparent;
  cursor:pointer; display:grid; place-items:center;
  transition:background .3s var(--saida);
}
.aviso__fechar:hover{background:color-mix(in srgb,var(--creme) 10%,transparent)}
.aviso__fechar::before,.aviso__fechar::after{
  content:""; position:absolute; width:.8rem; height:var(--fio);
  background:var(--tinta-2); transition:background .3s var(--saida);
}
.aviso__fechar::before{rotate:45deg}
.aviso__fechar::after{rotate:-45deg}
.aviso__fechar:hover::before,.aviso__fechar:hover::after{background:var(--butter)}

/* o cabeçalho desce a altura da faixa. O 3rem é a reserva do primeiro
   quadro, antes do JS medir a altura de verdade. */
.aviso + .topo{top:var(--h-aviso,3rem)}

@media (max-width:640px){
  .aviso{padding-block:.6rem; text-align:start; justify-content:flex-start}
}