/* ============================================================
   Igreja Biblica Infinito Amor
   Construido a partir de _trabalho/pacote-de-design.md
   Preto e o padrao para todo visitante. O botao de tema existe,
   o padrao nunca muda. O JS le --modo daqui, nunca do sistema.
   ============================================================ */

:root{
  --modo: dark;

  --canvas:#0A0A0C;
  --panel:#131317;
  --panel-2:#101014;
  --linha:#26262e;
  --linha-forte:#3a3a45;

  --tinta:#F7F7F9;
  --tinta-2:#A6A6B2;
  --tinta-3:#82828e;

  --acao:#7B9CFF;
  --acao-hover:#95AEFF;
  --acao-sussurro:#2A3450;

  /* Amostrado do molho da filmagem, complementar do azul da marca.
     A REGRA: o azul marca o que o visitante pode FAZER (botao, link, foco).
     O ambar marca a VOZ e o TEMPO da igreja (versiculo, datas, rotulos,
     marcadores, a comida). Os dois nunca disputam a mesma funcao. */
  --brasa:#C8763A;          /* preenchimento, fio, ponto */
  --brasa-forte:#D98A4E;    /* texto pequeno: 5,4 para 1 sobre o preto */
  --brasa-fio:rgba(200,118,58,.26);

  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --texto:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;

  --suave:cubic-bezier(.22,.61,.36,1);
  --entra:cubic-bezier(.16,.84,.44,1);

  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);

  --grade:0.62rem;         /* raio de canto das paginas internas */
  --env:1180px;
  --gut:clamp(1.15rem,4vw,2.6rem);
}

html[data-theme="light"]{
  --canvas:#F7F6F3;
  --panel:#FFFFFF;
  --panel-2:#FBFAF8;
  --linha:#E2E0DA;
  --linha-forte:#CBC8C0;
  --tinta:#15151A;
  --tinta-2:#54545E;
  --tinta-3:#75757F;
  --acao:#3A5BD9;
  --acao-hover:#2F4CBC;
  --acao-sussurro:#D6DDF7;
  --brasa:#A85C24;
  --brasa-forte:#8E4A17;
  --brasa-fio:rgba(168,92,36,.3);
  --tshadow:0 1px 2px rgba(255,255,255,.9);
}

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

html{
  overflow-x:hidden;
  overflow-x:clip;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
body{
  overflow-x:hidden;
  overflow-x:clip;
  margin:0;
  background:var(--canvas);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}
[hidden]{display:none !important}

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

.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.pular{
  position:absolute;left:.6rem;top:-3rem;z-index:99;
  background:var(--acao);color:var(--canvas);
  padding:.6rem 1rem;border-radius:8px;
  font-weight:600;font-size:.9rem;text-decoration:none;
  transition:top .22s var(--suave);
}
.pular:focus{top:.6rem}

.env{width:100%;max-width:var(--env);margin:0 auto;padding-inline:var(--gut)}
.estreito{width:100%;max-width:720px;margin:0 auto;padding-inline:var(--gut)}

/* ---------- a camada de ambiente, fixa atras de tudo ---------- */
.ambiente{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60vw 50vh at 18% 12%, rgba(123,156,255,.055), transparent 70%),
    radial-gradient(52vw 46vh at 84% 78%, rgba(200,118,58,.05), transparent 70%);
  animation:deriva 90s ease-in-out -22s infinite alternate;
}
@keyframes deriva{
  from{transform:translate3d(-1.6%,-1%,0) scale(1.03)}
  to{transform:translate3d(1.8%,1.4%,0) scale(1.09)}
}
html[data-theme="light"] .ambiente{
  background:
    radial-gradient(60vw 50vh at 18% 12%, rgba(58,91,217,.06), transparent 70%),
    radial-gradient(52vw 46vh at 84% 78%, rgba(168,92,36,.05), transparent 70%);
}

/* ============================================================
   CABECALHO
   ============================================================ */
.topo{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--canvas) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--linha);
}
.topo-in{display:flex;align-items:center;gap:1.1rem;min-height:66px}

.marca{display:flex;align-items:center;gap:.62rem;text-decoration:none;flex:0 0 auto}
.mk{
  width:34px;height:31px;flex:0 0 auto;
  background:var(--tinta);
  -webkit-mask:url('logo.png') center/contain no-repeat;
  mask:url('logo.png') center/contain no-repeat;
}
.marca-txt{
  display:flex;flex-direction:column;line-height:1.06;
  font-family:var(--texto);font-weight:600;font-size:1.02rem;letter-spacing:-.01em;
}
.marca-txt span{
  font-family:var(--mono);font-weight:400;
  font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tinta-3);margin-top:.22rem;
}

.menu{display:flex;gap:.2rem;margin-left:auto}
.menu a{
  font-size:.9rem;text-decoration:none;color:var(--tinta-2);
  padding:.45rem .62rem;border-radius:7px;
  transition:color .2s var(--suave),background .2s var(--suave);
}
.menu a:hover{color:var(--tinta);background:var(--panel)}

.topo-acoes{display:flex;align-items:center;gap:.55rem;margin-left:auto}
.menu+.topo-acoes{margin-left:.4rem}

.tema{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;padding:0;
  background:transparent;border:1px solid var(--linha);border-radius:9px;
  color:var(--tinta-2);cursor:pointer;
  transition:color .2s var(--suave),border-color .2s var(--suave);
}
.tema:hover{color:var(--tinta);border-color:var(--linha-forte)}
.tema svg{width:17px;height:17px}
.tema .lua{display:none}
html[data-theme="dark"] .tema .sol{display:none}
html[data-theme="dark"] .tema .lua{display:block}

.btn{
  display:inline-block;text-decoration:none;
  font-family:var(--texto);font-weight:600;font-size:.93rem;
  padding:.66rem 1.12rem;border-radius:9px;
  border:1px solid transparent;cursor:pointer;
  transition:background .2s var(--suave),border-color .2s var(--suave),
             color .2s var(--suave),transform .2s var(--suave);
}
.btn-p{background:var(--acao);color:#0A0A0C}
.btn-p:hover{background:var(--acao-hover);transform:translateY(-1px)}
.btn-v{background:transparent;color:var(--tinta);border-color:var(--linha-forte)}
.btn-v:hover{border-color:var(--acao);color:var(--acao)}
.band .btn{text-shadow:none}

@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}

/* ============================================================
   O HERO DE SCRUB
   600vh de altura, intervalo de scroll de 500vh.
   Subiu de 500 para 600 porque com 500 cada legenda ficava com 68vh de
   plato e o teste de flick exige 80 a 130. Agora da uns 110vh por batida.
   ============================================================ */
.heroi{position:relative;height:600vh;z-index:1}
.palco{
  position:sticky;top:0;height:100vh;width:100%;
  overflow:hidden;background:var(--canvas);
}

.poster,#hero{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
}
.poster{
  background-position:50% 50%;background-size:cover;background-repeat:no-repeat;
}
#hero{
  opacity:0;
  transition:opacity .7s var(--suave);
  transform:translateZ(0);
  will-change:transform;
}
.palco.video-pronto #hero{opacity:1}
.palco.video-falhou #hero{display:none}

/* camada 1 do sistema de legibilidade: o scrim base global */
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,
    rgba(10,10,14,0) 34%, rgba(10,10,14,.64) 100%);
}
.scrim-b{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(10,10,14,.5) 0%, rgba(10,10,14,0) 22%,
    rgba(10,10,14,0) 62%, rgba(10,10,14,.72) 100%);
}
/* A lavagem direcional da esquerda. Esta filmagem e clara e agitada de
   borda a borda, e nao tem regiao que fique escura os 8 segundos inteiros.
   Como a acao vive no centro e na direita, a pagina escurece para o lado
   do texto e deixa a comida limpa. Medido: sem ela o contraste da faixa 1
   dava 1,07 para 1, onde o minimo exigido e 3,5. */
.scrim-l{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(96deg,
    rgba(6,6,12,.94) 0%,
    rgba(6,6,12,.90) 26%,
    rgba(6,6,12,.80) 42%,
    rgba(6,6,12,.52) 56%,
    rgba(6,6,12,.16) 70%,
    rgba(6,6,12,0) 84%);
}

/* o anel de carregamento honesto */
.anel{
  position:absolute;left:50%;bottom:2.6rem;transform:translateX(-50%);
  width:44px;height:44px;color:var(--tinta-2);pointer-events:none;
  opacity:.85;transition:opacity .4s var(--suave);
}
.anel circle{transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .18s linear}
.palco.video-pronto .anel{opacity:0}

.seta{
  position:absolute;left:50%;bottom:2.4rem;transform:translateX(-50%);
  color:var(--tinta-2);animation:respira 3.4s var(--suave) -.8s infinite;
}
@keyframes respira{
  0%,100%{transform:translate(-50%,0);opacity:.5}
  50%{transform:translate(-50%,7px);opacity:.95}
}

/* ---------- as faixas de legenda ---------- */
.faixas{
  position:absolute;inset:0;
  display:grid;place-items:center start;
  padding-inline:clamp(1.2rem,7vw,6rem);
}
.band{
  grid-area:1/1;
  position:relative;   /* ancora o scrim da faixa. sem isto o pseudo-elemento
                          escapa e pinta atras do video, e a camada 2 do
                          sistema de legibilidade simplesmente nao existe */
  z-index:1;           /* cria contexto de empilhamento, para o z-index -1
                          do ::before ficar DENTRO da faixa */
  /* pixel, nunca ch: um ch aqui seria medido na Archivo do corpo e o titulo
     renderiza em Newsreader, que e bem mais larga. Com 34ch o titulo do
     assentamento quebrava em quatro linhas. O limite em ch vive no .sub,
     que realmente herda a fonte de texto. */
  max-width:min(560px,76vw);
  opacity:0;
  text-shadow:var(--tshadow);
  pointer-events:none;
}
.band.ligada{pointer-events:auto}

/* camada 2: o scrim por faixa, que aprofunda so enquanto a faixa esta ligada */
.band::before{
  content:"";position:absolute;
  left:-16vw;top:50%;transform:translateY(-50%);
  width:80vw;height:92vh;
  pointer-events:none;z-index:-1;
  opacity:calc(.3 + .7*var(--k,1));
  background:radial-gradient(ellipse 58% 54% at 28% 50%,
    rgba(4,4,9,.78) 0%, rgba(4,4,9,.56) 42%, rgba(4,4,9,0) 74%);
}
/* a faixa de assentamento converge para o centro */
.band.assenta{max-width:min(620px,82vw)}
.band.assenta::before{
  left:-22vw;width:104vw;
  background:radial-gradient(ellipse 54% 58% at 44% 50%,
    rgba(4,4,9,.8) 0%, rgba(4,4,9,.6) 44%, rgba(4,4,9,0) 78%);
}

/* azul, nao ambar: sobre filmagem viva o ambar mede 2,5 para 1 e texto
   pequeno exige 4,5. Ambar so entra onde o fundo e preto solido. */
.band .kick{
  display:block;font-family:var(--mono);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--acao);margin-bottom:1rem;
}
.band h2,.band .t{
  margin:0;
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.1rem,1.1rem + 4.4vw,4.5rem);
  line-height:1.02;letter-spacing:-.022em;
  color:#F7F7F9;
}
.band .sub{
  margin:.9rem 0 0;
  font-size:clamp(1rem,.94rem + .4vw,1.24rem);
  line-height:1.5;color:#DEDEE6;max-width:30ch;
}
.band .fonte{
  display:block;margin-top:.85rem;
  font-family:var(--mono);font-size:.68rem;
  letter-spacing:.13em;text-transform:uppercase;color:#B9B9C4;
}
.band .fila{display:flex;gap:.66rem;flex-wrap:wrap;margin-top:1.5rem}

/* ---------- as entradas de texto ---------- */
/* tudo so em transform e opacity, guiado pelo --k da faixa */

.w{display:inline-block;white-space:pre}
.c{display:inline-block}

/* (e) subida palavra por palavra. faixas 1 e 4 */
.sobe .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.9,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*26px));
}
/* (f) deriva para baixo. faixa 2, ecoando a concha que desce */
.desce .w{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);
  opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-24px));
}
/* (c) desfoque para nitido. faixa 3, ecoando o vapor clareando */
.nitida{position:relative}
.nitida .macia{
  position:absolute;inset:0;
  filter:blur(11px);
  opacity:calc(1 - var(--k,0));
  pointer-events:none;
}
.nitida .duro{opacity:var(--k,0)}

/* as chegadas em etapas da faixa de assentamento */
.assenta .sub{
  --ks:clamp(0,(var(--k,0) - .58)*3.4,1);
  opacity:var(--ks);
  transform:translateY(calc((1 - var(--ks))*14px));
}
.assenta .fila{
  --kb:clamp(0,(var(--k,0) - .76)*4.6,1);
  opacity:var(--kb);
  transform:translateY(calc((1 - var(--kb))*16px));
}

/* camada 4: o chip para texto pequeno sobre filmagem */
.chip{
  position:absolute;right:clamp(1rem,3vw,2rem);top:calc(66px + 1.2rem);
  display:flex;align-items:center;gap:.5rem;
  background:rgba(8,8,15,.55);
  border:1px solid rgba(96,96,126,.34);
  border-radius:11px;padding:.42rem .72rem;
  backdrop-filter:blur(10px);
  font-family:var(--mono);font-size:.63rem;
  letter-spacing:.11em;text-transform:uppercase;color:#D2D2DB;
  text-shadow:0 1px 3px rgba(5,5,10,.85);
}
.chip i{
  width:6px;height:6px;border-radius:50%;background:var(--brasa);
  animation:pisca 3.6s ease-in-out -1.1s infinite;
}
@keyframes pisca{0%,100%{opacity:.35}50%{opacity:1}}

/* ---------- o hero estatico: os cinco portoes ----------
   Estas cinco consultas tem que bater caractere por caractere
   com o array GATES do JavaScript. */
.estatico{display:none}

@media (max-width:720px),
       (orientation: portrait) and (max-width:1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height:560px),
       (prefers-reduced-motion: reduce){
  .heroi{height:auto}
  .palco{position:relative;height:auto;min-height:0}
  #hero,.anel,.seta,.faixas,.chip{display:none !important}
  .estatico{display:block;position:relative}
  .estatico .foto-fixa{
    position:absolute;inset:0;
    background:url('hero-final.jpg') center/cover no-repeat;
  }
}

.estatico{position:relative;isolation:isolate}
.estatico .foto-fixa{z-index:-2}
.estatico .cobre{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom,
    rgba(10,10,14,.62) 0%, rgba(10,10,14,.78) 55%, rgba(10,10,14,.94) 100%);
}
.estatico-in{padding:clamp(4rem,16vw,7rem) 0 clamp(3.4rem,12vw,5rem)}
.estatico .kick{
  display:block;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--acao);margin-bottom:.95rem;
}
.estatico h1{
  margin:0;font-family:var(--display);font-weight:300;
  font-size:clamp(2.15rem,1.4rem + 5vw,3.4rem);
  line-height:1.04;letter-spacing:-.022em;color:#F7F7F9;
  text-shadow:var(--tshadow);
}
.estatico .saud{
  margin:.85rem 0 0;font-size:1.06rem;color:#E4E4EC;
  text-shadow:var(--tshadow);
}
.estatico .lede{
  margin:1.15rem 0 0;font-size:1rem;line-height:1.6;
  color:#C6C6D0;max-width:44ch;text-shadow:var(--tshadow);
}
.estatico .fila{display:flex;gap:.66rem;flex-wrap:wrap;margin-top:1.7rem}

/* ============================================================
   O SITE DE VERDADE, ABAIXO DO HERO
   ============================================================ */
main{position:relative;z-index:1}

.sec{position:relative;padding:clamp(3.6rem,9vw,6.4rem) 0;border-top:1px solid var(--linha)}
.sec:first-of-type{border-top:0}

/* O marcador de secao. O quadradinho ambar e a marca de assinatura que
   repete por toda a pagina, sempre do mesmo tamanho. */
.rot{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:.64rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-3);
}
.rot::before{
  content:"";flex:0 0 auto;width:5px;height:5px;
  background:var(--brasa);transform:rotate(45deg);
}
.rot::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--brasa-fio) 0%,var(--linha) 22%,var(--linha) 100%);
}

h2.tit{
  margin:1.35rem 0 0;
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.85rem,1.2rem + 2.4vw,3rem);
  line-height:1.1;letter-spacing:-.02em;
}
h3.sub2{
  margin:1.9rem 0 .5rem;
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.25rem,1.05rem + .9vw,1.6rem);
  line-height:1.22;letter-spacing:-.012em;
}
.medida{max-width:64ch;color:var(--tinta-2)}
.medida.forte{color:var(--tinta);font-size:1.08rem}

/* ---------- as tres portas ---------- */
.portas{
  display:grid;gap:.9rem;margin-top:2.2rem;
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
}
.porta{
  display:flex;flex-direction:column;
  padding:1.5rem 1.4rem;border-radius:13px;
  background:var(--panel);border:1px solid var(--linha);
  text-decoration:none;
  transition:border-color .24s var(--suave),transform .24s var(--suave),
             background .24s var(--suave);
}
.porta:hover{border-color:var(--acao);transform:translateY(-3px);background:var(--panel-2)}
.porta .pk{
  font-family:var(--mono);font-size:.6rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--brasa-forte);
}
.porta h3{
  margin:.75rem 0 .5rem;
  font-family:var(--display);font-weight:400;font-size:1.34rem;
  line-height:1.2;letter-spacing:-.012em;
}
.porta p{margin:0;font-size:.95rem;color:var(--tinta-2);flex:1}
.porta .ir{
  margin-top:1.2rem;font-size:.88rem;font-weight:600;color:var(--acao);
  display:inline-flex;align-items:center;gap:.4rem;
}
.porta .ir svg{width:13px;height:13px;transition:transform .24s var(--suave)}
.porta:hover .ir svg{transform:translateX(4px)}

/* ---------- galeria ---------- */
.galeria{
  display:grid;gap:.7rem;margin-top:2.2rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.foto{margin:0;border-radius:12px;overflow:hidden;background:var(--panel);border:1px solid var(--linha)}
/* Foto nao se corta. A imagem aparece inteira, na proporcao dela.
   O unico lugar com corte e a galeria, porque e o corte que deixa a
   grade simetrica, e essa voce aprovou vendo. */
.foto img{width:100%;height:auto}
.galeria .foto img{aspect-ratio:4/3;object-fit:cover}
.foto.livre img{aspect-ratio:auto}
.foto figcaption{
  padding:.62rem .8rem;
  font-family:var(--mono);font-size:.61rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-3);
}

/* ---------- o momento interativo: encher uma marmita ---------- */
.encher{
  margin-top:2.4rem;padding:clamp(1.6rem,4vw,2.8rem);
  border-radius:15px;background:var(--panel);
  border:1px solid var(--linha);border-top:2px solid var(--brasa);
  display:grid;gap:clamp(1.6rem,4vw,2.6rem);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
}
.encher-txt h3{
  margin:.9rem 0 .6rem;
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.3rem,1.1rem + 1vw,1.75rem);letter-spacing:-.014em;
}
.encher-txt p{margin:0 0 1rem;color:var(--tinta-2);font-size:.98rem}
.segurar{
  -webkit-user-select:none;user-select:none;touch-action:none;
  font-family:var(--texto);font-weight:600;font-size:.93rem;
  padding:.7rem 1.2rem;border-radius:9px;
  background:transparent;color:var(--tinta);
  border:1px solid var(--linha-forte);cursor:pointer;
  transition:border-color .2s var(--suave),color .2s var(--suave);
}
.segurar:hover{border-color:var(--acao);color:var(--acao)}
.segurar[data-cheia="1"]{border-color:var(--brasa);color:var(--brasa)}

.pote{width:100%;max-width:340px;margin-inline:auto;display:block}
.pote .arroz{opacity:calc(.25 + .75*var(--p,0))}
.pote .molho{transform:scaleY(var(--p,0));transform-origin:50% 100%}
.pote .vapor path{
  opacity:calc(var(--p,0)*.85);
  animation:sobe-vapor 5.2s ease-in-out infinite;
}
.pote .vapor path:nth-child(2){animation-delay:-1.7s}
.pote .vapor path:nth-child(3){animation-delay:-3.4s}
@keyframes sobe-vapor{
  0%,100%{transform:translateY(0) scaleX(1)}
  50%{transform:translateY(-7px) scaleX(1.11)}
}

.contas{display:grid;gap:.7rem;margin-top:1.5rem}
.conta{
  display:flex;align-items:baseline;gap:.85rem;
  opacity:0;transform:translateY(9px);
  transition:opacity .5s var(--entra),transform .5s var(--entra);
}
.encher[data-completo="1"] .conta{opacity:1;transform:none}
.encher[data-completo="1"] .conta:nth-child(2){transition-delay:.13s}
.encher[data-completo="1"] .conta:nth-child(3){transition-delay:.26s}
.conta b{
  font-family:var(--display);font-weight:400;font-size:1.9rem;
  line-height:1;letter-spacing:-.02em;color:var(--tinta);
}
.conta span{font-size:.92rem;color:var(--tinta-2)}

/* ---------- frutos ---------- */
.frutos{
  display:grid;gap:.9rem;margin-top:2.2rem;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
}
.fruto{
  position:relative;overflow:hidden;
  padding:1.7rem 1.4rem;border-radius:13px;
  background:var(--panel);border:1px solid var(--linha);
}
.fruto::after{
  content:"";position:absolute;left:-30%;top:-70%;
  width:160%;height:160%;pointer-events:none;
  background:radial-gradient(ellipse 42% 38% at 30% 74%, rgba(200,118,58,.15), transparent 70%);
  animation:brilha 11s ease-in-out -3s infinite alternate;
}
.fruto b{
  display:block;position:relative;
  font-family:var(--display);font-weight:300;
  font-size:clamp(2.5rem,2rem + 2.2vw,3.5rem);
  line-height:1;letter-spacing:-.03em;
}
.fruto span{display:block;position:relative;margin-top:.6rem;font-size:.95rem;color:var(--tinta-2)}
@keyframes brilha{from{opacity:.55}to{opacity:1}}

/* ---------- linha do tempo, com o fio que se traca ---------- */
.tempo{position:relative;margin-top:2.4rem;padding-left:2.4rem;list-style:none}
/* O fio da linha do tempo. Coluna simples com escala, nao SVG:
   vector-effect non-scaling-stroke junto com pathLength quebra o calculo
   do tracejado e o fio saia como um toco de dois pixels.
   Ambar porque o fio E a linha do tempo, e tempo e ambar pela regra. */
.fio{
  position:absolute;left:11px;top:6px;bottom:6px;width:2px;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(200,118,58,.62) 0%, rgba(200,118,58,.42) 60%, rgba(200,118,58,.16) 100%);
  transform-origin:50% 0;
  transform:scaleY(var(--traco,0));
}
html[data-theme="light"] .fio{
  background:linear-gradient(180deg,
    rgba(168,92,36,.66) 0%, rgba(168,92,36,.46) 60%, rgba(168,92,36,.2) 100%);
}
.tempo li{position:relative;padding-bottom:1.9rem}
.tempo li:last-child{padding-bottom:0}
.tempo li::before{
  content:"";position:absolute;left:-2.4rem;top:.5rem;
  width:11px;height:11px;border-radius:50%;
  background:var(--canvas);border:2px solid var(--linha-forte);
  transform:translateX(6px);
}
.tempo li.virada::before{border-color:var(--brasa);background:var(--brasa)}
.tempo .ano{
  display:block;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.14em;color:var(--brasa-forte);
}
.tempo h4{
  margin:.42rem 0 .3rem;
  font-family:var(--display);font-weight:400;font-size:1.16rem;letter-spacing:-.01em;
}
.tempo p{margin:0;font-size:.95rem;color:var(--tinta-2);max-width:58ch}

/* ---------- o acrostico ---------- */
.acro{display:grid;gap:0;margin-top:1.4rem;border-top:1px solid var(--linha)}
.acro div{
  display:grid;gap:.3rem 1.6rem;
  grid-template-columns:minmax(105px,auto) 1fr;
  padding:1.05rem 0;border-bottom:1px solid var(--linha);
  align-items:baseline;
}
.acro dt{
  font-family:var(--display);font-weight:400;font-size:1.28rem;
  letter-spacing:-.012em;color:var(--tinta);
}
.acro dd{margin:0;font-size:.97rem;color:var(--tinta-2)}

.pilares{margin:1rem 0 0;padding:0;list-style:none;display:grid;gap:.6rem}
.pilares li{
  position:relative;padding-left:1.4rem;font-size:.98rem;color:var(--tinta-2);
}
.pilares li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;background:var(--brasa);transform:rotate(45deg);opacity:.8;
}

.fichas{display:flex;flex-wrap:wrap;gap:.42rem;margin-top:1.1rem}
.fichas span{
  font-size:.84rem;padding:.36rem .72rem;border-radius:99px;
  background:var(--panel);border:1px solid var(--linha);color:var(--tinta-2);
}

/* ---------- duas colunas ---------- */
.duas{
  display:grid;gap:clamp(1.8rem,5vw,3.4rem);margin-top:2.2rem;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:start;
}

.frentes{
  display:grid;gap:.9rem;margin-top:2.2rem;
  grid-template-columns:repeat(auto-fit,minmax(285px,1fr));
}
.frente{
  display:flex;flex-direction:column;
  padding:1.6rem 1.45rem;border-radius:13px;
  background:var(--panel);border:1px solid var(--linha);
}
.frente .desde{
  font-family:var(--mono);font-size:.6rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--brasa-forte);
}
.frente h3{
  margin:.75rem 0 .55rem;
  font-family:var(--display);font-weight:400;font-size:1.22rem;
  line-height:1.24;letter-spacing:-.012em;
}
.frente p{margin:0 0 .8rem;font-size:.95rem;color:var(--tinta-2)}
.frente ul{margin:0;padding-left:1.05rem;display:grid;gap:.55rem}
.frente li{font-size:.94rem;color:var(--tinta-2)}
.frente li b{color:var(--tinta)}
.frente .pe-cartao{margin-top:auto;padding-top:1.1rem}
.aviso-futuro{
  margin-top:.9rem;padding:.6rem .8rem;border-radius:8px;
  background:var(--panel-2);border:1px solid var(--linha);
  font-family:var(--mono);font-size:.62rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3);
}

/* ---------- cultos e endereco ---------- */
.cultos{display:grid;gap:.6rem;margin-top:1rem}
.culto{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.95rem 1.1rem;border-radius:10px;
  background:var(--panel);border:1px solid var(--linha);
}
.culto .dia{font-weight:600;font-size:.98rem}
.culto .hora{font-family:var(--display);font-size:1.5rem;font-weight:300;letter-spacing:-.02em}
.endereco{margin:1.1rem 0 0;font-size:.96rem;color:var(--tinta-2);line-height:1.7}
.endereco b{color:var(--tinta)}

/* ---------- passagem biblica ---------- */
.passagem{
  padding:clamp(3.4rem,9vw,6rem) 0;
  border-top:1px solid var(--brasa-fio);
  background:var(--panel-2);
}
.passagem blockquote{margin:0}
.passagem .fala{
  margin:0 0 .85rem;
  font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(1.06rem,1rem + .5vw,1.32rem);
  line-height:1.55;color:var(--tinta);
}
.passagem .v{
  font-family:var(--mono);font-style:normal;
  font-size:.6rem;color:var(--brasa-forte);
  vertical-align:.5em;margin-right:.42rem;letter-spacing:.06em;
}
.passagem cite{
  display:block;margin-top:1.4rem;font-style:normal;
  font-family:var(--mono);font-size:.65rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brasa-forte);
}

.versiculo{text-align:center;background:var(--panel-2);border-top-color:var(--brasa-fio)}
.versiculo blockquote{
  margin:0;font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(1.35rem,1.1rem + 1.7vw,2.3rem);
  line-height:1.32;letter-spacing:-.015em;max-width:30ch;margin-inline:auto;
}
.versiculo cite{
  display:block;margin-top:1.3rem;font-style:normal;
  font-family:var(--mono);font-size:.65rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brasa-forte);
}

/* ---------- parceria ---------- */
.parceria{
  display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem;
  margin-top:2.2rem;padding:1.5rem;
  border-radius:13px;background:var(--panel);border:1px solid var(--linha);
}
.parceria img{width:126px;flex:0 0 auto}
.parceria-txt{flex:1 1 260px}
.parceria-txt p{margin:.5rem 0 0;font-size:.96rem;color:var(--tinta-2)}
.parceria-txt strong{color:var(--tinta)}
.parceria-txt a{color:var(--acao);text-decoration:none;font-weight:600}
.parceria-txt a:hover{text-decoration:underline}

/* ---------- doar, com o fio de brasa ---------- */
.doar{
  position:relative;margin-top:2.2rem;padding:clamp(1.6rem,4vw,2.4rem);
  border-radius:13px;background:var(--panel);
  border:1px solid var(--linha);border-top:2px solid var(--brasa);
}
.doar h3{
  margin:.5rem 0 .6rem;
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.3rem,1.1rem + 1vw,1.7rem);letter-spacing:-.014em;
}
.doar>p{margin:0 0 1.3rem;color:var(--tinta-2);max-width:60ch}
.pix{
  display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
  padding:1rem 1.15rem;border-radius:10px;
  background:var(--canvas);border:1px solid var(--linha);
}
.pix-k{flex:1 1 200px}
.pix-k p{
  margin:0 0 .3rem;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-3);
}
.pix-k code{font-family:var(--mono);font-size:1rem;color:var(--tinta);letter-spacing:.01em}
.copiar{
  font-family:var(--texto);font-weight:600;font-size:.88rem;
  padding:.6rem 1rem;border-radius:8px;
  background:transparent;color:var(--tinta);
  border:1px solid var(--linha-forte);cursor:pointer;
  transition:border-color .2s var(--suave),color .2s var(--suave);
}
.copiar:hover{border-color:var(--acao);color:var(--acao)}
.copiar[data-ok="1"]{border-color:var(--brasa);color:var(--brasa)}

/* ---------- videos ---------- */
.videos{
  display:grid;gap:1rem;margin-top:2.2rem;
  grid-template-columns:repeat(auto-fit,minmax(275px,1fr));
}
.video .moldura{
  position:relative;aspect-ratio:16/9;border-radius:11px;overflow:hidden;
  background:var(--panel);border:1px solid var(--linha);
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video h3{margin:.75rem 0 0;font-size:.98rem;font-weight:600;line-height:1.35}
.video h3 a{color:var(--tinta);text-decoration:none}
.video h3 a:hover{color:var(--acao)}

/* ---------- lideranca ---------- */
.lider{display:grid;gap:.9rem;margin-top:1.6rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.pessoa{padding:1.3rem 1.3rem;border-radius:12px;background:var(--panel);border:1px solid var(--linha)}
.pessoa .papel{
  font-family:var(--mono);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brasa-forte);
}
.pessoa .nome{
  display:block;margin:.5rem 0 .5rem;
  font-family:var(--display);font-weight:400;font-size:1.24rem;letter-spacing:-.012em;
}
.pessoa a{font-size:.9rem;color:var(--acao);text-decoration:none}
.pessoa a:hover{text-decoration:underline}

.separados{
  margin:2.2rem 0 0;padding:1.6rem 1.7rem;
  border-radius:13px;background:var(--panel-2);
  border:1px solid var(--linha);border-left:2px solid var(--brasa-fio);
}
.separados p{margin:0 0 .85rem;color:var(--tinta-2);font-size:.98rem}
.separados p:last-child{margin-bottom:0}
.separados .grifo{
  font-family:var(--display);font-weight:300;font-style:italic;
  font-size:1.2rem;line-height:1.45;color:var(--tinta);
}

/* ---------- FAQ ---------- */
.faq{margin-top:2.2rem;border-top:1px solid var(--linha)}
.faq details{border-bottom:1px solid var(--linha)}
.faq summary{
  display:flex;align-items:flex-start;gap:1rem;
  padding:1.15rem .2rem;cursor:pointer;list-style:none;
  font-weight:600;font-size:1.01rem;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";margin-left:auto;flex:0 0 auto;
  font-family:var(--mono);font-size:1.15rem;color:var(--acao);
  transition:transform .26s var(--suave);
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .resp{padding:0 .2rem 1.25rem;margin:0;color:var(--tinta-2);max-width:62ch}
.faq .resp a{color:var(--acao);font-weight:600;text-decoration:none}
.faq .resp a:hover{text-decoration:underline}
.aconferir{
  display:inline-block;padding:.14rem .5rem;border-radius:6px;
  background:var(--acao-sussurro);color:var(--tinta);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;
}

/* ---------- a chamada final ---------- */
.final{
  margin-top:0;padding:clamp(3.4rem,9vw,5.6rem) 0;
  border-top:1px solid var(--linha);text-align:center;
}
.final h2{
  margin:1.3rem auto 0;max-width:24ch;
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.9rem,1.3rem + 2.6vw,3.1rem);
  line-height:1.08;letter-spacing:-.022em;
}
.final p{margin:1.1rem auto 0;max-width:52ch;color:var(--tinta-2)}
.final .fila{display:flex;gap:.66rem;flex-wrap:wrap;justify-content:center;margin-top:1.8rem}

/* ---------- rodape ---------- */
.pe{border-top:1px solid var(--linha);background:var(--panel-2);padding:clamp(2.8rem,7vw,4.4rem) 0 1.8rem}
.pe-grade{display:grid;gap:2.2rem;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.pe h4{
  margin:0 0 .95rem;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--tinta-3);font-weight:500;
}
.pe address{font-style:normal;font-size:.94rem;color:var(--tinta-2);line-height:1.75}
.pe ul{margin:0;padding:0;list-style:none;display:grid;gap:.55rem}
.pe li a{font-size:.94rem;color:var(--tinta-2);text-decoration:none}
.pe li a:hover{color:var(--acao)}
.pe .marca{margin-bottom:1.1rem}
.legal{
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;
  margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--linha);
  font-family:var(--mono);font-size:.62rem;
  letter-spacing:.07em;color:var(--tinta-3);
}

/* ---------- entradas por scroll ---------- */
.vem{opacity:0;transform:translateY(20px);transition:opacity .68s var(--entra),transform .68s var(--entra)}
.vem.in{opacity:1;transform:none}
.vem.in .filho{opacity:1;transform:none}
.vem .filho{opacity:0;transform:translateY(14px);transition:opacity .58s var(--entra),transform .58s var(--entra)}
.vem.in .filho:nth-child(2){transition-delay:.07s}
.vem.in .filho:nth-child(3){transition-delay:.14s}
.vem.in .filho:nth-child(4){transition-delay:.21s}
.vem.in .filho:nth-child(5){transition-delay:.28s}
.vem.in .filho:nth-child(6){transition-delay:.35s}
/* aposenta o escalonamento depois da entrada, com especificidade que vence
   as regras nth-child acima */
.vem.in.pronta .filho:nth-child(n){transition-delay:0s !important}

/* pausa tudo em aba escondida. animation-play-state nao e herdada */
body.pausado *,body.pausado *::before,body.pausado *::after{animation-play-state:paused !important}

/* ============================================================
   MEDIA QUERIES
   ============================================================ */
@media (max-width:900px){
  .duas,.encher{grid-template-columns:1fr}
  .menu{display:none}
}
@media (max-width:720px){
  body{font-size:16px}
  .marca-txt span{display:none}
}
@media (max-height:560px){
  .chip,.seta{display:none}
}

/* ============================================================
   MOVIMENTO REDUZIDO, honrado por completo
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
  }
  .vem,.vem .filho{opacity:1 !important;transform:none !important}
  .conta{opacity:1 !important;transform:none !important}
  .band{opacity:1}
  .ambiente{animation:none}
  .fio{transform:scaleY(1)}
  .pote .molho{transform:scaleY(1)}
  .pote .arroz{opacity:1}
}


/* ==========================================================================
   PÁGINAS INTERNAS
   Veio do antigo estilo-paginas.css, que deixou de existir. Só entraram as
   regras cujas classes o bloco acima não define. As cores foram renomeadas
   para as variáveis deste arquivo: são as mesmas cores, outro nome.
   ========================================================================== */
.rotulo{
  font-family:"Archivo",system-ui,sans-serif; font-weight:600;
  font-size:.72rem; letter-spacing:.17em; text-transform:uppercase; color:var(--tinta-2);
}
/* Logotipo oficial (Logo Infinito Amor.png, 3000x3000) recortado só no símbolo e
   convertido em máscara: o brilho virou canal alfa. A cor vem de currentColor,
   então o logo acompanha o tema sozinho, sem filtro nem blend. Razão 520/468. */
.mk-real{
  --h:40px;
  flex:none; display:block;
  width:calc(var(--h) * 1.1111); height:var(--h);
  background:currentColor;
  -webkit-mask:url('logo.png') center/contain no-repeat;
  mask:url('logo.png') center/contain no-repeat;
}
.btn-vazio{background:transparent; color:var(--tinta)}
.btn-vazio:hover{background:var(--tinta); color:var(--canvas)}
.pincel{position:absolute; right:-4%; top:-8%; width:min(26%,290px); opacity:.3; z-index:0; color:var(--acao-hover); pointer-events:none}
@media(max-width:760px){
.pincel{width:44%; right:-12%; top:-4%; opacity:.24}
}
.heroi-in{position:relative; z-index:1}
.sec-cab{display:flex; flex-direction:column; gap:.7rem; margin-bottom:clamp(1.8rem,4vw,2.8rem)}
.marcador{display:flex; align-items:baseline; gap:.8rem}
.marcador b{font-family:"Archivo",sans-serif; font-weight:700; font-size:.76rem; letter-spacing:.2em; color:var(--brasa-forte); text-transform:uppercase}
.marcador hr{flex:1; border:0; border-top:1px solid var(--linha); margin:0}
/* propósito: lista numerada que é de fato uma sequência */
.proposito{display:grid; gap:1.4rem; counter-reset:p}
@media(min-width:820px){
.proposito{grid-template-columns:repeat(3,1fr); gap:2rem}
}
.proposito li{list-style:none; counter-increment:p; padding-top:1.1rem; border-top:2px solid var(--brasa-forte); font-size:clamp(1.05rem,1rem + .35vw,1.28rem); line-height:1.42}
.proposito li::before{content:counter(p); display:block; font-family:"Archivo",sans-serif; font-weight:700; font-size:.78rem; color:var(--brasa-forte); margin-bottom:.5rem}
.proposito{padding:0; margin:0}
.historia{margin-top:clamp(1.6rem,3.5vw,2.4rem)}
.parceria-marca{background:#FAF7DC; border-radius:8px; padding:.75rem 1.1rem; flex:none}
.parceria-marca img{width:150px; height:auto; display:block}
.link-parceiro{font-family:"Archivo",sans-serif; font-size:.86rem; font-weight:600; color:var(--acao)}
.visao{display:grid; gap:1px; background:var(--linha); border:1px solid var(--linha); border-radius:var(--grade); overflow:hidden; margin-top:1.4rem}
@media(min-width:760px){
.visao{grid-template-columns:repeat(2,1fr)}
}
.visao div{background:var(--panel); padding:1.25rem 1.4rem}
.visao dt{font-family:"Archivo",sans-serif; font-weight:700; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brasa-forte); margin-bottom:.4rem}
.visao dd{margin:0; font-size:.96rem; color:var(--tinta-2); line-height:1.5}
.oramos{display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.3rem}
.oramos span{font-family:"Archivo",sans-serif; font-size:.87rem; font-weight:500; padding:.44rem .95rem; border-radius:999px; background:var(--panel); border:1px solid var(--linha)}
.porque{display:grid; gap:1.15rem; margin-top:1.8rem}
@media(min-width:640px){
.porque{grid-template-columns:1fr 1fr}
}
.porque div{border-top:2px solid var(--brasa-forte); padding-top:1rem}
.porque dt{font-family:"Archivo",sans-serif; font-weight:700; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brasa-forte); margin-bottom:.45rem}
.porque dd{margin:0; font-size:1.05rem; line-height:1.5}
/* caminhada / conversão */
/* bloco de esclarecimento: calmo, nao alarmante, mas impossivel de nao ler */
/* bloco de urgencia: visivel sem ser alarmista */
.urgente{margin-top:1.2rem; padding:1rem 1.1rem; border-radius:8px;
  background:transparent; border:1px solid var(--linha); max-width:66ch}
.urgente p{font-size:.92rem; line-height:1.55; color:var(--tinta-2)}
.urgente a{color:var(--tinta-2); text-decoration:underline}
.urgente strong{color:var(--tinta)}
.indo{margin-top:2rem; padding:clamp(1.2rem,2.6vw,1.7rem); border-radius:var(--grade);
  background:var(--panel-2); border:1px solid var(--linha)}
.indo[hidden]{display:none}
.enquanto{margin-top:2.6rem; text-align:left; max-width:520px; margin-left:auto; margin-right:auto}
.presente{margin-top:2.2rem; padding:clamp(1.5rem,3vw,2.2rem); border-radius:var(--grade);
  background:var(--panel); border:1.5px solid var(--brasa-forte); max-width:60ch}
.cobertura{margin-top:2.6rem; padding-top:1.8rem; border-top:1px solid var(--linha)}
.chamado{margin-top:2.2rem; padding:clamp(1.6rem,3.4vw,2.4rem); border-radius:var(--grade);
  background:var(--panel-2); border:1.5px solid var(--acao); max-width:66ch}
.chamado h2{font-size:clamp(1.5rem,1.2rem + 1.5vw,2.1rem); line-height:1.2}
.chamado p{margin-top:.9rem; font-size:1.05rem; line-height:1.6; color:var(--tinta-2)}
.chamado .acoes{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.4rem}
.nota{margin-top:2rem; padding:clamp(1.2rem,2.6vw,1.7rem); border-radius:var(--grade);
  background:var(--panel-2); border:1px solid var(--linha); max-width:66ch}
.nota p{font-size:1rem; line-height:1.6}
.nota strong{color:var(--tinta)}
.caminhada .lema{font-size:clamp(1.35rem,1.1rem + 1.2vw,2rem); line-height:1.28; letter-spacing:-.012em; text-wrap:balance; margin-bottom:1.6rem}
.caminhada .escritura{margin:0 0 1.6rem; padding-left:1.2rem; border-left:2px solid var(--acao); font-style:italic; font-size:1.1rem; line-height:1.55}
.caminhada .escritura cite{display:block; margin-top:.6rem; font-family:"Archivo",sans-serif; font-style:normal; font-size:.72rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--acao)}
.caminhada .destaque{font-size:1.22rem; line-height:1.45; margin-bottom:1.6rem; color:var(--tinta)}
.caminhada .corpo{font-size:1.05rem; line-height:1.66; color:var(--tinta-2); max-width:66ch}
.caminhada .fecho{margin-top:1.5rem; font-size:1.22rem; line-height:1.4}
/* voluntário */
.vol{background:var(--panel-2)}
.vol-corpo{display:flex; flex-direction:column; gap:1.15rem; font-size:1.05rem; line-height:1.6; max-width:64ch}
.vol-corpo .grito{font-size:clamp(1.3rem,1.1rem + 1vw,1.8rem); line-height:1.3; letter-spacing:-.01em}
.vol-corpo .credo{padding-left:1.2rem; border-left:2px solid var(--acao); color:var(--tinta)}
.vol-noite{background:var(--panel); border:1px solid var(--linha); border-radius:var(--grade); padding:clamp(1.25rem,2.6vw,1.7rem); margin:.4rem 0}
.vol-noite .rotulo{color:var(--acao)}
.vol-corpo .somos{font-family:"Archivo",sans-serif; font-weight:700; letter-spacing:.04em; font-size:1.02rem}
.agir{display:grid; gap:1.15rem}
@media(min-width:700px){
.agir{grid-template-columns:1fr 1fr}
}
.acao{border:1px solid var(--linha); border-radius:var(--grade); background:var(--panel); padding:clamp(1.35rem,2.8vw,1.9rem); display:flex; flex-direction:column; gap:.7rem}
.acao.destaque{border-color:var(--acao); border-width:1.5px}
.acao h3{font-size:1.28rem}
.acao p{font-size:.95rem; color:var(--tinta-2); line-height:1.55}
.acao .rodape{margin-top:auto; padding-top:.4rem}
.historia{background:var(--panel-2); border:1px solid var(--linha); border-radius:var(--grade); padding:clamp(1.4rem,3vw,2rem); margin-top:1.8rem; max-width:66ch}
.linha-tempo{list-style:none; margin:1.8rem 0 0; padding:0; display:flex; flex-direction:column}
.linha-tempo li{display:grid; grid-template-columns:auto 1fr; gap:0 1.3rem; padding-bottom:1.6rem; position:relative}
.linha-tempo li:last-child{padding-bottom:0}
/* fio que liga os marcos: para no penultimo */
.linha-tempo li:not(:last-child)::before{content:""; position:absolute; left:6px; top:1.5rem; bottom:0; width:2px; background:var(--linha)}
.linha-tempo li::after{content:""; position:absolute; left:0; top:.62rem; width:14px; height:14px; border-radius:50%; background:var(--panel-2); border:2.5px solid var(--brasa-forte); box-sizing:border-box}
.linha-tempo .ano{grid-column:2; font-family:"Archivo",sans-serif; font-weight:700; font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; color:var(--brasa-forte); font-variant-numeric:tabular-nums}
.linha-tempo li > div{grid-column:2; margin-top:.35rem}
.linha-tempo h4{font-size:1.14rem; line-height:1.3; margin-bottom:.35rem}
.linha-tempo p{font-size:.98rem; line-height:1.55; color:var(--tinta-2); max-width:58ch}
/* o marco de 2021 é o que muda tudo: ganha peso */
.linha-tempo li.virada::after{background:var(--acao); border-color:var(--acao); width:18px; height:18px; left:-2px; top:.5rem}
.linha-tempo li.virada h4{font-size:1.3rem}
.linha-tempo li.virada p{color:var(--tinta)}
.tira{display:grid; gap:1.15rem}
@media(min-width:520px) and (max-width:919px){
.tira{grid-template-columns:1fr 1fr}
}
.consagracao{display:grid; gap:1.15rem; margin-top:1.6rem}
@media(min-width:640px){
.consagracao{grid-template-columns:1fr 1fr}
}

/* Hero das paginas internas. Nome proprio porque .heroi, na home,
   e o palco de 600vh do video. */
.heroi-pag{padding:clamp(3.2rem,8vw,6.4rem) 0 clamp(2.4rem,5vw,3.8rem); position:relative; overflow:hidden}
.heroi-pag h1{margin:1.1rem 0 0; max-width:19ch}
.heroi-pag .saud{font-size:clamp(1.15rem,1rem + .8vw,1.5rem); font-style:italic; color:var(--tinta-2); margin-top:1.1rem; max-width:32ch}

/* O item do menu da pagina em que o visitante esta. */
.menu a[aria-current="page"]{color:var(--tinta);background:var(--panel)}

/* Referencia biblica no meio de um paragrafo. */
cite.ref{font-family:var(--texto); font-style:normal; font-size:.78rem; letter-spacing:.06em; color:var(--brasa-forte); white-space:nowrap}

/* Seis portas em duas fileiras de tres, na /contato. */
@media(min-width:900px){
.portas-3{grid-template-columns:repeat(3,1fr)}
}

/* A linha do tempo com a coluna de fotos ao lado. As fotos esticam para
   cobrir a altura da linha, em vez de sobrar preto. */
.tempo-duas{align-items:stretch}
.tempo-fotos{display:grid; gap:.9rem; grid-auto-rows:1fr; min-height:100%}
.tempo-fotos .foto{display:flex; flex-direction:column; margin:0}
.tempo-fotos .foto img{flex:1; width:100%; height:100%; object-fit:cover}
@media(max-width:820px){
.tempo-fotos{grid-auto-rows:auto}
}

/* Legenda de foto que merece ser lida, nao so etiquetada. */
.foto figcaption.grande{font-family:var(--texto); font-size:.86rem; letter-spacing:.01em; text-transform:none; color:var(--tinta-2); padding:.8rem 1rem}

/* Os nomes ao lado do retrato, um embaixo do outro. */
.lider-col{grid-template-columns:1fr; align-content:center; margin-top:0}

/* Estes dois blocos aguentam duas colunas em tela menor que 900px,
   entao voltam a ficar lado a lado antes do resto. */
@media(min-width:700px){
.tempo-duas,.duas-cedo{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.lider-col{grid-template-columns:1fr}
}

/* O selo do reconhecimento oficial. Foto pequena do diploma ao lado do texto. */
.selo{display:grid; gap:1.4rem; align-items:center; padding:clamp(1.2rem,3vw,1.8rem); border:1px solid var(--linha); border-radius:var(--grade); background:var(--panel)}
@media(min-width:620px){.selo{grid-template-columns:150px 1fr}}
.selo img{width:150px; height:auto; border-radius:6px; border:1px solid var(--linha)}
.selo p{font-size:.96rem; color:var(--tinta-2); max-width:56ch}

/* O bloco PIX quando ele e a acao principal da pagina. Azul, porque azul
   marca o que o visitante pode FAZER. A chave cresce e o botao fica cheio. */
.pix.destaque{
  padding:clamp(1.3rem,3vw,1.9rem);
  border:1.5px solid var(--acao);
  background:var(--acao-sussurro);
  border-radius:var(--grade);
  gap:1.2rem;
}
.pix.destaque .pix-k p,.pix.destaque > div > p{color:var(--acao)}
.pix.destaque code{font-size:clamp(1.1rem,1rem + .7vw,1.5rem); font-weight:600}
.pix.destaque .copiar{
  background:var(--acao); color:#0A0A0C; border-color:var(--acao);
  font-size:.95rem; padding:.72rem 1.3rem;
}
.pix.destaque .copiar:hover{background:var(--acao-hover); border-color:var(--acao-hover); color:#0A0A0C}
.pix.destaque .copiar[data-ok="1"]{background:var(--brasa); border-color:var(--brasa); color:#0A0A0C}

/* Galeria travada em tres colunas, para fechar duas fileiras de tres. */
@media(min-width:760px){
.galeria-3{grid-template-columns:repeat(3,1fr)}
}

/* Grades travadas para nao sobrar item solto na ultima fileira. */
@media(min-width:760px){
.frentes-2{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:960px){
.proposito-4{grid-template-columns:repeat(4,1fr); gap:1.6rem}
}

/* A coluna ao lado da linha do tempo: duas fotos e o texto embaixo delas.
   As fotos param de esticar, para sobrar altura para o texto. */
.tempo-texto{display:flex; flex-direction:column; gap:.9rem; margin-top:2rem; max-width:62ch}
.tempo-texto p{font-size:.98rem; line-height:1.6; color:var(--tinta-2)}
.tempo-texto .grifo{color:var(--tinta); font-family:var(--display); font-style:italic; font-size:1.06rem}

/* Videos em pe, do celular. Tres por fileira, moldura 9:16. */
@media(min-width:760px){
  .videos-pe{grid-template-columns:repeat(3,1fr)}
}
.videos-pe .moldura{aspect-ratio:9/16}
.videos-pe .video h3{font-size:.98rem; line-height:1.35}

/* Galeria de fotos em pe: 3:4, a proporcao original das fotos de celular. */
.galeria-pe .foto img{aspect-ratio:3/4}