/* ============================================================
   FONTES NO PRÓPRIO DOMÍNIO (19/09/2026)

   Antes vinham do fonts.googleapis.com, e aquele <link> era uma
   folha de estilo EXTERNA e bloqueante: o navegador não pintava
   nada antes de resolver DNS, TLS e a resposta de dois domínios
   de terceiros. Medido: 858 ms parados, só nisso, no celular.

   As duas famílias são VARIÁVEIS, então um arquivo cobre todos
   os pesos da faixa. São seis arquivos, 120 KB no total, e cada
   navegador baixa só o subset que a página usa: em português,
   na prática, os dois 'latin'.

   font-display:swap mantém o texto visível desde o primeiro
   quadro, com a fonte do sistema, e troca quando a nossa chega.
   É o mesmo comportamento que o Google Fonts entregava.
   ============================================================ */
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 400;font-display:swap;src:url('/assets/fontes/instrument-sans-italico-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 400;font-display:swap;src:url('/assets/fontes/instrument-sans-italico-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fontes/instrument-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fontes/instrument-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Outfit';font-style:normal;font-weight:200 900;font-display:swap;src:url('/assets/fontes/outfit-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Outfit';font-style:normal;font-weight:200 900;font-display:swap;src:url('/assets/fontes/outfit-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* =============================================================
   NEW HOPE CHURCH ORLANDO, SISTEMA VISUAL
   Tudo que vale para o site inteiro: tokens, tipografia, marca,
   navegação, botões, cartões, seções e rodapé.
   O que é exclusivo de uma página fica na própria página.
   ============================================================= */


/* ============================================================
   NEW HOPE CHURCH ORLANDO, HOME
   Protótipo da Fase 3. Consome design-tokens.css (inline aqui
   para o mockup rodar sem build).
   ============================================================ */

:root{
  /* PRIMITIVE · cor amostrada dos vetores da Fase 0 */
  --nh-green-900:#00381f; --nh-green-700:#006837; --nh-green-500:#62b256; --nh-green-100:#e6f0ea;
  --nh-amber-500:#ffb95c; --nh-amber-100:#fff4e7;
  --nh-wine-700:#6e324b;  --nh-wine-100:#fbeef3;--nh-wine-500:#8b3b5c;
  --nh-rose-300:#ffa4ab;
  --nh-ink-950:#000000;   --nh-ink-900:#121212; --nh-ink-700:#3d3d3d; --nh-ink-500:#6b6b6b;
  --nh-paper-100:#f4f4f4; --nh-paper-000:#ffffff;

  /* SEMANTIC */
  --bg:var(--nh-paper-000); --bg-muted:var(--nh-paper-100); --bg-invert:var(--nh-ink-950);
  --fg:var(--nh-ink-900); --fg-muted:var(--nh-ink-500); --fg-invert:var(--nh-paper-000);
  --action:var(--nh-green-700); --action-hover:var(--nh-green-900); --action-fg:#fff;
  --accent:var(--nh-amber-500); --accent-fg:var(--nh-ink-900);
  --border:#e2e2e2; --border-strong:#c9c9c9; --border-invert:rgb(255 255 255 / .16);
  --critical:#a3201b; --critical-bg:#fdecea;
  --focus:var(--nh-amber-500);

  /* TIPO */
  --font-display:"Outfit",system-ui,sans-serif;
  --font-sans:"Instrument Sans",system-ui,sans-serif;

  /* FORMA, a folha da marca: dois cantos opostos arredondados */
  --leaf:0 3rem 0 3rem;
  --leaf-lg:0 6rem 0 6rem;
  --leaf-sm:0 1.25rem 0 1.25rem;

  --page:78rem;
  --pad-y:clamp(4.5rem,8vw,8rem);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:var(--font-sans);font-size:1.0625rem;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{display:block;max-width:100%;height:auto}
/* O vídeo decorativo chega sem pôster: o midia.js põe os dois juntos quando
   a pessoa se aproxima, para o MP4 e o WEBP não disputarem banda com o hero.
   Todo contêiner de vídeo já declara aspect-ratio, então a caixa nunca muda
   de tamanho (CLS zero). Este cinza só evita um buraco branco no intervalo,
   que na prática ninguém vê: o carregamento começa 600px antes. */
video[data-quando-visivel]:not([poster]){background:#e8e8e6}
/* height:auto é obrigatório: os atributos width/height do HTML (que existem
   para reservar espaço e segurar o CLS) viram altura fixa e anulam o
   aspect-ratio do CSS. Quem precisa de altura cheia redeclara abaixo. */
a{color:inherit}

:where(a,button,summary,[tabindex]):focus-visible{
  outline:3px solid var(--focus);outline-offset:3px;border-radius:.25rem;
}

.wrap{width:min(100% - 2.5rem,var(--page));margin-inline:auto}
@media (max-width:640px){.wrap{width:min(100% - 1.75rem,var(--page))}}

/* ---------- TIPOGRAFIA DE MARCA -------------------------------
   O par das peças da Fase 0: caixa alta, Light contra ExtraBold.
   O peso alterna DENTRO da mesma frase. É a voz da marca.       */
/* Nenhuma palavra sozinha numa linha. `balance` equilibra o
   comprimento das linhas de um título curto em vez de empurrar o
   resto para baixo, que é o que gera a palavra órfã. */
.display{
  font-family:var(--font-display);text-transform:uppercase;
  line-height:.98;letter-spacing:-.035em;font-weight:200;margin:0;
  text-wrap:balance;
}
/* O trecho em destaque nunca se parte no meio: ou cabe na linha,
   ou desce inteiro para a linha de baixo. */
.display b{white-space:nowrap}
/* No ingles o trecho em destaque sai mais longo que no portugues ("the
   consultation?", "and send through your bank"), e sem quebra ele empurrava
   a pagina para o lado: medido em 25/09/2026, 130px a mais em /en/give/ a
   1100px e 5px em /en/visit/ a 320px. Ali ele pode quebrar; o &nbsp; antes
   da ultima palavra continua segurando o par final junto. O portugues fica
   exatamente como era. */
html[lang^="en"] .display b{white-space:normal}
/* Em telas muito estreitas uma palavra inglesa sozinha ("CONSULTATION?"
   no titulo grande) e maior que a tela. Ali o ingles hifeniza. */
@media (max-width:380px){
  html[lang^="en"] .display,html[lang^="en"] .btn{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
  html[lang^="en"] .btn{white-space:normal;text-align:center}
}
@media (max-width:520px){
  /* em tela estreita, título muito longo precisa poder quebrar */
  .display b{white-space:normal}
}
.display b{font-weight:800;letter-spacing:-.045em}
.eyebrow{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:.75rem;font-weight:600;letter-spacing:.16em;margin:0 0 1.25rem;
}
h2.display{font-size:clamp(2rem,1.3rem + 3.2vw,3.5rem)}
.lede{font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:1.6;max-width:60ch;margin:0;
  text-wrap:pretty}
.muted{color:var(--fg-muted)}

/* ---------- A FOLHA ------------------------------------------- */
.leaf{border-radius:var(--leaf);overflow:hidden}
.leaf-lg{border-radius:var(--leaf-lg);overflow:hidden}
.leaf-sm{border-radius:var(--leaf-sm);overflow:hidden}

/* ---------- BOTÕES -------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-display);font-weight:700;font-size:1rem;
  letter-spacing:.02em;text-transform:uppercase;text-decoration:none;
  padding:.95rem 1.5rem;border-radius:var(--leaf-sm);border:2px solid transparent;
  background:transparent;color:inherit;
  cursor:pointer;transition:background var(--ease) .24s,color var(--ease) .24s,
    border-color var(--ease) .24s,transform var(--ease) .24s;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgb(0 0 0/.18)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn svg{transition:transform var(--ease) .28s}
.btn:hover svg{transform:translateX(4px)}
.btn-primary{background:var(--action);color:var(--action-fg)}
.btn-primary:hover{background:var(--action-hover)}
.btn-accent{background:var(--accent);color:var(--accent-fg)}
.btn-accent:hover{background:#ffa733}
.btn-ghost-light{border-color:rgb(255 255 255 / .55);color:#fff}
.btn-ghost-light:hover{border-color:#fff;background:rgb(255 255 255 / .1)}
.btn-ghost-dark{border-color:var(--fg);color:var(--fg)}
.btn-ghost-dark:hover{background:var(--fg);color:#fff}
.btn svg{width:1.05em;height:1.05em;flex:none}

/* ---------- MARCA · lockup horizontal -------------------------
   ATENÇÃO: são TRÊS folhas, não quatro. O "N" de NEW ocupa o
   quadrante inferior direito e completa o símbolo. Essa é a marca
   real do cliente e não se altera.

   As medidas saem todas de --mark, então o lockup escala inteiro
   sem perder o encaixe do N no vão do símbolo.
   ------------------------------------------------------------- */
.brand{
  --mark:2.5rem;
  display:inline-flex;align-items:flex-start;text-decoration:none;color:inherit;
}
.brand-mark{width:var(--mark);height:var(--mark);flex:none;color:inherit}
.brand-type{
  display:grid;line-height:1;
  margin-left:calc(var(--mark) * -0.382);
  margin-top:calc(var(--mark) * 0.433);
}
.brand-row{
  font-family:var(--font-display);text-transform:uppercase;white-space:nowrap;
  font-size:calc(var(--mark) * 0.578);letter-spacing:-.02em;font-weight:200;
}
.brand-row b{font-weight:800}
.brand-sub{
  font-family:var(--font-display);text-transform:uppercase;font-weight:400;
  font-size:calc(var(--mark) * 0.178);letter-spacing:.35em;
  margin-top:calc(var(--mark) * 0.067);
}

/* ---------- NAV ------------------------------------------------ */
.nav{
  position:fixed;inset-inline:0;top:0;z-index:60;color:#fff;
  transition:background var(--ease) .3s,backdrop-filter var(--ease) .3s;
}
.nav-inner{display:flex;align-items:center;gap:2rem;height:4.75rem}
.nav-links{display:flex;gap:1.6rem;margin-left:auto;list-style:none;padding:0;margin-block:0}
.nav-links a{
  font-family:var(--font-display);text-transform:uppercase;font-size:.75rem;
  font-weight:600;letter-spacing:.1em;text-decoration:none;padding-block:.5rem;
  position:relative;white-space:nowrap;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:.1rem;height:2px;
  background:var(--accent);transition:right var(--ease) .3s;
}
.nav-links a:hover::after{right:0}
.nav .btn{padding:.7rem 1.15rem;font-size:.75rem}
.nav.is-stuck{background:rgb(0 0 0 / .92);backdrop-filter:blur(10px)}
.nav-toggle{display:none}
@media (max-width:1080px){
  .nav-links{display:none}
  .nav-toggle{
    display:inline-flex;margin-left:auto;background:none;border:2px solid rgb(255 255 255/.4);
    color:#fff;border-radius:var(--leaf-sm);padding:.6rem .9rem;font-family:var(--font-display);
    font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  }
  .nav .btn-accent{display:none}
}

/* ---------- FAIXA DE HORÁRIOS, a resposta antes da pergunta --- */
.bar{background:var(--nh-green-700);color:#fff}
.bar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgb(255 255 255/.22)}
.bar-cell{background:var(--nh-green-700);padding:1.6rem 1.75rem;display:flex;gap:1rem;align-items:flex-start}
.bar-cell svg{width:1.35rem;height:1.35rem;flex:none;margin-top:.15rem;color:var(--nh-amber-500)}
.bar-k{font-family:var(--font-display);text-transform:uppercase;font-size:.75rem;
  letter-spacing:.16em;font-weight:600;color:rgb(255 255 255/.72);margin:0 0 .3rem}
.bar-v{margin:0;font-size:1.0625rem;font-weight:600;line-height:1.4}
.bar-v small{display:block;font-weight:400;font-size:1rem;color:rgb(255 255 255/.75)}
.bar-v a{color:inherit}
/* Rota direta no Maps: quem já decidiu ir não precisa ler a página.
   Sem chave de API e sem iframe, no celular abre o app nativo. */
.bar-route{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:.7rem;
  font-family:var(--font-display);text-transform:uppercase;font-size:.75rem;
  font-weight:800;letter-spacing:.1em;text-decoration:none;
  color:var(--nh-amber-500);border-bottom:2px solid transparent;padding-bottom:.15rem;
  transition:border-color var(--ease) .25s;
}
.bar-route svg{width:.85rem;height:.85rem;transition:transform var(--ease) .25s}
.bar-route:hover{border-color:var(--nh-amber-500)}
.bar-route:hover svg{transform:translate(2px,-2px)}
@media (max-width:820px){.bar-grid{grid-template-columns:1fr}}

/* ---------- SEÇÃO ---------------------------------------------- */
.section{padding-block:var(--pad-y)}
.section-muted{background:var(--bg-muted)}
.section-dark{background:var(--nh-ink-950);color:#fff}
.section-dark .muted{color:rgb(255 255 255/.65)}
.head{max-width:56ch;margin-bottom:clamp(2.5rem,4vw,3.5rem)}
.head .eyebrow{color:var(--action)}
.section-dark .head .eyebrow{color:var(--nh-green-500)}
.head p{margin:1.5rem 0 0}

/* Resposta direta, o bloco de 40 a 60 palavras que a IA cita */
/* `pretty` impede que a última linha do parágrafo fique com uma
   palavra sozinha, que é o defeito mais visível de texto corrido. */
.answer{
  border-left:4px solid var(--accent);padding-left:1.5rem;
  font-size:clamp(1.125rem,1rem + .5vw,1.375rem);line-height:1.55;max-width:56ch;margin:0;
  text-wrap:pretty;
}

/* ---------- FACT LAYER ----------------------------------------- */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:3rem}
/* Cada cartão é um ladrilho do mosaico, não uma caixa branca: sobre
   fundo branco a folha só existe se tiver cor. Os três pares passam
   em contraste, verde 6.9:1, âmbar 10:1, tinta 18:1. */
.fact{border:0;border-radius:var(--leaf);padding:1.75rem 1.75rem 2.25rem;position:relative;overflow:hidden;
  transition:box-shadow var(--ease) .3s,transform var(--ease) .3s,border-radius var(--ease) .4s}
.fact-a{background:var(--action);color:#fff}
.fact-b{background:var(--accent);color:var(--nh-ink-900)}
.fact-c{background:var(--nh-wine-700);color:#fff}
/* Sem opacidade no texto. A hierarquia vem de tamanho, peso e
   entreletra, não de apagar a cor, que era o que matava a leitura.
   Contraste medido: branco sobre verde 6.92:1, tinta sobre âmbar
   10.02:1, branco sobre tinta 18.1:1. Todos passam em AA. */
.fact-a dt,.fact-c dt,
.fact-a dd,.fact-c dd,
.fact-a dd small,.fact-c dd small{color:#fff}
.fact-b dt,.fact-b dd,.fact-b dd small{color:var(--nh-ink-900)}
.fact::before{content:"";position:absolute;right:-3rem;bottom:-3rem;z-index:0;
  width:9rem;height:9rem;border-radius:var(--leaf-lg);background:currentColor;opacity:.09;
  pointer-events:none;transition:transform var(--ease) .5s}
.fact > *{position:relative;z-index:1}
.fact:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgb(0 0 0/.20);
  border-radius:var(--leaf-lg)}
.fact:hover::before{transform:scale(1.35) rotate(-12deg)}
/* O cartão sem variante clareia em seção cinza. As variantes coloridas
   mantêm a própria cor, senão o texto branco sumia no fundo branco. */
.section-muted .fact{background:#fff}
.section-muted .fact-a{background:var(--action);color:#fff}
.section-muted .fact-b{background:var(--accent);color:var(--nh-ink-900)}
.section-muted .fact-c{background:var(--nh-wine-700);color:#fff}
.fact dt{font-family:var(--font-display);text-transform:uppercase;font-size:.75rem;
  letter-spacing:.16em;font-weight:700;margin-bottom:.6rem}
.fact dd{margin:0;font-size:1.25rem;font-weight:600;font-family:var(--font-display);line-height:1.3}
.fact dd small{display:block;font-family:var(--font-sans);font-size:1rem;font-weight:400;
  margin-top:.5rem;line-height:1.55}
@media (max-width:820px){.facts{grid-template-columns:1fr}}

/* ============================================================
   ASSINATURA, o bloco bilíngue.
   A frase em português vem sólida; a mesma frase em inglês vem
   vazada, deslocada, atrás. O layout É a tradução simultânea.
   ============================================================ */
.bilingual{position:relative;background:var(--nh-ink-950);color:#fff;overflow:hidden}
.bilingual-grid{
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center;
}
.bi-type{position:relative;padding-block:1rem}
/* As duas línguas ficam EMPILHADAS, não sobrepostas. Sobrepor
   confundia a leitura das duas, que é o oposto do que a seção diz. */
.bi-pt{
  font-family:var(--font-display);text-transform:uppercase;font-weight:800;
  font-size:clamp(2.25rem,1.2rem + 4.6vw,4.25rem);line-height:.94;letter-spacing:-.04em;
  margin:0;
}
.bi-en{
  font-family:var(--font-display);text-transform:uppercase;font-weight:500;
  font-size:clamp(1.125rem,.9rem + 1.5vw,1.875rem);line-height:1.05;letter-spacing:-.01em;
  margin:1.25rem 0 0;padding-top:1.25rem;
  border-top:1px solid rgb(255 255 255/.18);
  color:rgb(255 255 255/.55);
}
.bi-legend{
  display:flex;gap:1.5rem;margin-top:clamp(3.5rem,7vw,5.5rem);
  font-family:var(--font-display);text-transform:uppercase;font-size:.75rem;
  letter-spacing:.16em;font-weight:600;color:rgb(255 255 255/.55);
}
.bi-legend b{color:#fff;font-weight:600}
.bi-body{margin:2rem 0 0;color:rgb(255 255 255/.82);max-width:46ch;position:relative;z-index:2}
.bi-media video{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--leaf-lg);
  background:#111;display:block}
.bi-cap{margin:1rem 0 0;font-size:.9375rem;color:rgb(255 255 255/.55);max-width:34ch}
@media (max-width:900px){
  .bilingual-grid{grid-template-columns:1fr}
  .bi-en{transform:translate(.35em,.36em)}
  .bi-media video{aspect-ratio:16/11}
}

/* ---------- PASSOS (sequência real, por isso numerada) --------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}
/* SIMETRIA: três passos cabem em três colunas, mas quatro deixariam um
   cartão sozinho na segunda linha. Com quatro, a grade vira 2x2 e os
   cartões crescem, em vez de sobrar um órfão embaixo. */
.steps:has(> :last-child:nth-child(4)){grid-template-columns:repeat(2,1fr);gap:2.25rem}
.step{display:flex;flex-direction:column}
.step .step-media{transition:box-shadow var(--ease) .3s}
.step:hover .step-media{box-shadow:0 18px 44px rgb(0 0 0/.18)}
.step:hover .step-n{color:var(--nh-wine-700)}
.step:hover .step-n::after{background:var(--accent)}
.step-n,.step-n::after{transition:color var(--ease) .28s,background var(--ease) .28s}
.step-media{aspect-ratio:3/4;overflow:hidden;border-radius:var(--leaf);margin-bottom:1.5rem;
  background:#111;position:relative}
.step-media video,.step-media img{width:100%;height:100%;object-fit:cover;display:block;
  aspect-ratio:auto;transition:transform var(--ease) .6s}
.step:hover .step-media video,.step:hover .step-media img{transform:scale(1.04)}
/* SIMETRIA: na grade de quatro, em duas colunas, o retrato 3/4 deixaria
   os cartoes altos demais. A moldura abre para 4/3 e as quatro imagens
   passam a ter exatamente a mesma altura. */
.steps:has(> :last-child:nth-child(4)) .step-media{aspect-ratio:4/3}
.step-n{
  font-family:var(--font-display);font-weight:800;font-size:1rem;letter-spacing:.08em;
  color:var(--action);margin-bottom:.75rem;display:flex;align-items:center;gap:.6rem;
}
.step-n::after{content:"";height:2px;flex:1;background:var(--border)}
.step h3{font-family:var(--font-display);text-transform:uppercase;font-weight:700;
  font-size:1.25rem;letter-spacing:-.02em;margin:0 0 .6rem;line-height:1.15}
.step p{margin:0;color:var(--fg-muted);font-size:1rem}
@media (max-width:900px){.steps{grid-template-columns:1fr;gap:2.5rem}}

/* ---------- FILHOS: as portas coloridas ------------------------ */
.doors{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3rem}
.door{
  border-radius:var(--leaf-sm);padding:1.5rem 1.25rem;min-height:8.5rem;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:transform var(--ease) .3s,box-shadow var(--ease) .3s,border-radius var(--ease) .35s;
}
/* No hover a porta assume o raio de folha cheio: a forma da marca
   é a recompensa da interação, não um enfeite parado. */
.door:hover{transform:translateY(-6px);border-radius:var(--leaf);
  box-shadow:0 16px 40px rgb(0 0 0/.18)}
.door b{font-family:var(--font-display);text-transform:uppercase;font-weight:800;
  font-size:1.0625rem;letter-spacing:-.01em;line-height:1.15}
.door span{font-size:.9375rem;line-height:1.45;opacity:.85}
.door-1{background:var(--nh-rose-300);color:var(--nh-ink-900)}
.door-2{background:#8fb8dd;color:var(--nh-ink-900)}
.door-3{background:var(--nh-green-500);color:var(--nh-ink-900)}
.door-4{background:var(--nh-amber-500);color:var(--nh-ink-900)}
@media (max-width:900px){.doors{grid-template-columns:repeat(2,1fr)}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.split-media img,.split-media video{width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--leaf-lg);background:#111;display:block}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* ============================================================
   MOSAICO DE MINISTÉRIOS
   A textura da marca vira navegação. Cada ladrilho é um link,
   e as cores seguem a ordem da "textura igreja.ai".
   ============================================================ */
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.tile{
  position:relative;overflow:hidden;text-decoration:none;color:#fff;
  border-radius:var(--leaf);min-height:16rem;display:flex;flex-direction:column;
  justify-content:flex-end;padding:1.75rem;isolation:isolate;
  transition:transform var(--ease) .4s;
}
.tile{transition:transform var(--ease) .4s,box-shadow var(--ease) .4s}
.tile:hover{transform:translateY(-8px);box-shadow:0 22px 50px rgb(0 0 0/.45)}
.tile h3{transition:color var(--ease) .28s}
.tile:hover h3{color:var(--nh-amber-500)}
/* a seta aparece no hover, sinalizando que o ladrilho é um caminho */
.tile::after{content:"";position:absolute;top:1.5rem;right:1.5rem;width:2.25rem;height:2.25rem;
  border-radius:var(--leaf-sm);background:var(--accent);opacity:0;transform:translate(-6px,6px);
  transition:opacity var(--ease) .3s,transform var(--ease) .3s;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2.5'><path d='M7 17L17 7M9 7h8v8'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:1.1rem}
.tile:hover::after{opacity:1;transform:none}
.tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform var(--ease) .7s,opacity var(--ease) .4s;opacity:.74;
}
.tile:hover img{transform:scale(1.06);opacity:.88}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgb(0 0 0/.12) 22%,rgb(0 0 0/.80) 100%)}
.tile-1{background:var(--nh-green-700)}
.tile-2{background:var(--nh-wine-700)}
.tile-3{background:var(--nh-green-900)}
.tile-4{background:var(--nh-ink-900)}
.tile-5{background:var(--nh-wine-500)}
.tile-6{background:var(--nh-ink-900)}
.tile-wide{grid-column:span 2}
/* Ladrilho de marca: usado enquanto não há foto verdadeira do escritório
   do New Hope Office of Immigration Services. */
.tile-marca{background:var(--nh-ink-900)}
.tile-mark{position:absolute;right:-2rem;top:50%;transform:translateY(-50%);
  width:14rem;height:14rem;color:rgb(255 255 255/.18);z-index:-1;
  transition:transform var(--ease) .5s,color var(--ease) .4s}
.tile-marca:hover .tile-mark{transform:translateY(-50%) scale(1.06);color:rgb(255 255 255/.26)}
.tile h3{font-family:var(--font-display);text-transform:uppercase;font-weight:800;
  font-size:1.375rem;letter-spacing:-.02em;margin:0 0 .4rem;line-height:1.05}
.tile p{margin:0;font-size:1rem;color:rgb(255 255 255/.82);max-width:30ch}
.tile-age{
  align-self:flex-start;margin-bottom:auto;background:rgb(255 255 255/.16);
  backdrop-filter:blur(4px);border-radius:999px;padding:.3rem .75rem;
  font-family:var(--font-display);font-size:.75rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
}
@media (max-width:1000px){.mosaic{grid-template-columns:repeat(2,1fr)}.tile-wide{grid-column:span 2}}
@media (max-width:560px){.mosaic{grid-template-columns:1fr}.tile-wide{grid-column:span 1}}

/* ---------- SERMÃO --------------------------------------------- */
.sermon{display:grid;grid-template-columns:1.4fr 1fr;gap:2.5rem;align-items:start}
.sermon-feature{position:relative;border-radius:var(--leaf-lg);overflow:hidden;isolation:isolate}
.sermon-feature img{width:100%;aspect-ratio:16/9;object-fit:cover}
.sermon-feature::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgb(0 0 0/.1),rgb(0 0 0/.72))}
.sermon-body{position:absolute;inset-inline:2rem;bottom:2rem;z-index:2;color:#fff}
.sermon-body h3{font-family:var(--font-display);text-transform:uppercase;font-weight:800;
  font-size:clamp(1.375rem,1rem + 1.4vw,2rem);letter-spacing:-.025em;margin:.75rem 0 .5rem;line-height:1.05}
.sermon-body p{margin:0;color:rgb(255 255 255/.8);font-size:1rem}
.play{text-decoration:none;
  position:absolute;inset:0;margin:auto;width:4.5rem;height:4.5rem;z-index:3;
  border:none;border-radius:999px;background:var(--accent);color:var(--nh-ink-900);
  display:grid;place-items:center;cursor:pointer;
  transition:transform var(--ease) .3s,background var(--ease) .3s;
}
.play:hover{transform:scale(1.09);background:#fff}
.play svg{width:1.6rem;height:1.6rem;margin-left:.15rem}
.sermon-list{display:flex;flex-direction:column;gap:1rem}
.sermon-item{
  display:grid;grid-template-columns:6.5rem 1fr;gap:1.1rem;align-items:center;
  text-decoration:none;padding:1rem;border:1px solid var(--border);
  border-radius:var(--leaf-sm);background:#fff;
  transition:border-color var(--ease) .25s,transform var(--ease) .25s;
}
.sermon-item:hover{border-color:var(--action);transform:translateX(6px);
  box-shadow:0 10px 28px rgb(0 0 0/.08)}
.sermon-item:hover b{color:var(--action)}
.sermon-item b{transition:color var(--ease) .28s}
.sermon-item img{transition:transform var(--ease) .5s}
.sermon-item:hover img{transform:scale(1.06)}
.sermon-item img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:.5rem}
.sermon-item b{font-family:var(--font-display);text-transform:uppercase;font-size:1rem;
  font-weight:700;line-height:1.2;display:block;letter-spacing:-.01em}
.sermon-item small{color:var(--fg-muted);font-size:.9375rem}
@media (max-width:900px){.sermon{grid-template-columns:1fr}}

/* ---------- CASA · as quatro regiões ---------------------------- */
.regions{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:2.5rem}
.region{
  border:1px solid var(--border-invert);border-radius:var(--leaf-sm);padding:1.5rem;
  display:flex;flex-direction:column;gap:.4rem;text-decoration:none;
  transition:background var(--ease) .3s,border-color var(--ease) .3s;
}
.region:hover{background:rgb(255 255 255/.08);border-color:var(--nh-amber-500);
  transform:translateY(-4px)}
.region:hover b{color:var(--nh-amber-500)}
.region b{transition:color var(--ease) .28s}
.region{transition:background var(--ease) .3s,border-color var(--ease) .3s,transform var(--ease) .3s}
.region b{font-family:var(--font-display);text-transform:uppercase;font-weight:800;
  font-size:1.0625rem;letter-spacing:.01em;line-height:1.15}
.region span{font-size:.9375rem;color:rgb(255 255 255/.6)}
@media (max-width:520px){.regions{grid-template-columns:1fr}}

/* ---------- EVENTOS -------------------------------------------- */
/* ---------- CARTÕES DE EVENTO -------------------------------
   A agenda é a única parte da página que muda sozinha, então ela
   merece o único elemento vivo: a contagem regressiva, calculada
   no cliente a partir da data real do evento.
   ------------------------------------------------------------ */
/* align-items:start: sem isto, um cartaz em pé (o Summit) vira a linha mais
   alta da grade e o CSS Grid estica o cartão vizinho para a mesma altura,
   sobrando uma faixa em branco dentro dele, empurrada pelo margin-top:auto
   do .event-count. Cada cartão passa a ter só a altura do seu próprio
   conteúdo. */
.events{display:grid;grid-template-columns:repeat(2,1fr);gap:1.75rem;align-items:start}
/* nenhum cartão fica sozinho numa linha pela metade */
.events .event:last-child:nth-child(odd){grid-column:1/-1}
.events .event:last-child:nth-child(odd) .event-media{aspect-ratio:21/9}
.event{
  display:flex;flex-direction:column;border-radius:var(--leaf);overflow:hidden;
  background:#fff;text-decoration:none;position:relative;box-shadow:0 2px 10px rgb(0 0 0/.05);
  transition:transform var(--ease) .35s,box-shadow var(--ease) .35s;
}
.event:has(.event-cta):hover,.event:has(.event-go):hover{
  transform:translateY(-8px);box-shadow:0 26px 56px rgb(0 0 0/.18)}

.event-media{position:relative;aspect-ratio:10/7;overflow:hidden;background:#111}
.event-media img{width:100%;height:100%;object-fit:cover;
  transition:transform var(--ease) .7s}
.event:hover .event-media img{transform:scale(1.06)}
/* Arte de evento em pé ou quadrada: aparece inteira, nunca cortada. O fundo
   é a própria arte ampliada e desfocada, então cada card ganha a cor da arte
   dele sem que nenhuma letra do cartaz saia da tela. */
.event-media.is-arte{background:var(--nh-ink-900);aspect-ratio:var(--ar,1)}
/* No card largo, que ocupa a linha inteira, a proporção da caixa deixaria a
   arte gigante. Ali ela vai por altura fixa, centrada. */
.events .event:last-child:nth-child(odd) .event-media.is-arte{
  aspect-ratio:auto;height:min(64vh,520px)}
.event-media.is-arte::before{content:"";position:absolute;inset:-10%;
  background-image:var(--arte);background-size:cover;background-position:center;
  filter:blur(22px) saturate(1.15) brightness(.68);transform:scale(1.05)}
.event-media.is-arte img{position:relative;object-fit:contain}
.event:hover .event-media.is-arte img{transform:none}
@media (prefers-reduced-motion:reduce){.event-media img{transition:none}}
/* a faixa de cor é o que tira o cartão do fundo branco */
.event-band{position:absolute;inset-inline:0;bottom:0;height:.5rem}
.event-a .event-band{background:var(--action)}
.event-b .event-band{background:var(--accent)}
.event-c .event-band{background:var(--nh-wine-700)}

.event-date{
  position:absolute;left:1rem;top:1rem;z-index:2;text-align:center;
  padding:.6rem .8rem;border-radius:var(--leaf-sm);min-width:3.5rem;
  transition:transform var(--ease) .35s;
}
.event:hover .event-date{transform:scale(1.06)}
.event-a .event-date{background:var(--action);color:#fff}
.event-b .event-date{background:var(--accent);color:var(--nh-ink-900)}
.event-c .event-date{background:var(--nh-wine-700);color:#fff}
/* corpo do cartao tonalizado: o branco puro com contador cinza ficava
   chapado e confuso de ler. Cada variante herda a cor da sua faixa. */
.event-a{background:var(--nh-green-100)}
.event-b{background:var(--nh-amber-100)}
.event-c{background:var(--nh-wine-100)}
.event-date b{display:block;font-family:var(--font-display);font-size:1.5rem;
  font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.event-date span{font-family:var(--font-display);font-size:.75rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;opacity:.85}

.event-body{padding:1.5rem;display:flex;flex-direction:column;gap:.9rem;flex:1}
.event h3{font-family:var(--font-display);text-transform:uppercase;font-weight:800;
  font-size:1.1875rem;margin:0;line-height:1.15;letter-spacing:-.02em;
  transition:color var(--ease) .28s}
.event-a:hover h3{color:var(--action)}
.event-b:hover h3{color:var(--nh-green-900)}
.event-c:hover h3{color:var(--nh-wine-700)}
.event p{margin:0;font-size:1rem;color:var(--fg-muted);line-height:1.5}
.event-meta{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin:0;
  font-family:var(--font-display);text-transform:uppercase;font-size:.75rem;
  font-weight:700;letter-spacing:.1em;color:var(--fg-muted)}
.event-meta span{display:inline-flex;align-items:center;gap:.35rem}
.event-meta svg{width:.9rem;height:.9rem;color:var(--action)}

/* contagem regressiva */
.event-count{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:auto}
.event-count div{background:var(--nh-paper-000);border-radius:var(--leaf-sm);
  padding:.6rem .3rem;text-align:center}
.event-count b{display:block;font-family:var(--font-display);font-weight:800;
  font-size:1.25rem;line-height:1;font-variant-numeric:tabular-nums;color:var(--fg)}
.event-count span{font-family:var(--font-display);font-size:.75rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted)}
.event-count .is-now{background:var(--action);color:#fff}
.event-count .is-now b,.event-count .is-now span{color:#fff}

/* O rodapé do cartão é a ÚNICA parte clicável dele, e o rótulo diz para
   onde vai. Até 23/09/2026 o cartão inteiro era um <a> escrito "Ver
   detalhes" que caía em /contato/ ou na própria /eventos/: prometia um
   detalhe que não existia e entregava um formulário. Agora são dois
   rótulos, e cada um é verdade.
     .event-cta  inscrição de verdade, endereço de fora, botão cheio
     .event-go   o discreto: falar com a igreja, ou ver a agenda */
.event-go{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-family:var(--font-display);text-transform:uppercase;font-size:.75rem;
  font-weight:800;letter-spacing:.08em;color:var(--action);align-self:flex-start}
.event-go svg{width:1rem;height:1rem;transition:transform var(--ease) .28s}
.event-go:hover svg{transform:translateX(5px)}
.event-go:hover{text-decoration:underline;text-underline-offset:.3em}

.event-cta{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  align-self:flex-start;padding:.7rem 1.15rem;border-radius:var(--leaf-sm);
  font-family:var(--font-display);text-transform:uppercase;font-size:.75rem;
  font-weight:800;letter-spacing:.08em;background:var(--action);color:#fff;
  transition:transform var(--ease) .28s,filter var(--ease) .28s}
.event-cta svg{width:1rem;height:1rem}
.event-cta:hover{filter:brightness(1.08);transform:translateY(-2px)}
.event-b .event-cta{background:var(--nh-wine-700)}
.event-c .event-cta{background:var(--nh-wine-700)}
/* O cartão não é mais um link, então o realce de passagem só vale onde há
   um alvo de verdade. Sem isto o cartão sobe ao passar o mouse e não
   acontece nada quando se clica. */
.event:focus-within{transform:translateY(-8px);box-shadow:0 26px 56px rgb(0 0 0/.18)}
@media (max-width:900px){.events{grid-template-columns:1fr}}

/* ---------- CTA FINAL ------------------------------------------ */
.cta{background:var(--accent);color:var(--nh-ink-900)}
.cta-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.cta h2{font-size:clamp(2.25rem,1.4rem + 4vw,4rem)}
.cta-map img{
  width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:var(--leaf-lg);background:var(--nh-ink-900);
}
/* O cartão de NAP fica ABAIXO da foto: a foto é a prova de que a igreja
   tem gente, e tapar as pessoas com uma caixa branca anula a prova. */
.cta-nap{
  background:#fff;border-radius:var(--leaf-sm);padding:1.25rem 1.4rem;margin-top:1rem;
}
.cta-nap b{display:block;font-family:var(--font-display);text-transform:uppercase;
  font-weight:800;font-size:1rem;letter-spacing:-.01em}
.cta-nap span{display:block;font-size:1rem;color:var(--fg-muted);margin-top:.25rem}
.cta-route{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;
  background:var(--action);color:#fff;text-decoration:none;
  font-family:var(--font-display);text-transform:uppercase;font-size:.75rem;
  font-weight:800;letter-spacing:.06em;padding:.7rem 1.1rem;border-radius:var(--leaf-sm);
  transition:background var(--ease) .25s,transform var(--ease) .25s;
}
.cta-route svg{width:1rem;height:1rem}
.cta-route:hover{background:var(--action-hover);transform:translateY(-2px)}
@media (max-width:900px){.cta-grid{grid-template-columns:1fr}}

/* ---------- MOSAICO DE MARCA (faixa) --------------------------- */
.strip{display:grid;grid-template-columns:repeat(12,1fr);height:clamp(3.5rem,6vw,5.5rem)}
.strip i{display:block}
.s1{background:var(--nh-green-700)}
.s2{background:var(--nh-amber-500)}
.s3{background:var(--nh-green-500)}
.s4{background:var(--nh-wine-700)}
.s5{background:var(--nh-rose-300)}
.s6{background:var(--nh-paper-100)}
.r{border-radius:0 100% 0 100%}
.r2{border-radius:100% 0 100% 0}
@media (max-width:700px){.strip{grid-template-columns:repeat(6,1fr)}}

/* ---------- RODAPÉ --------------------------------------------- */
.foot{background:var(--nh-ink-950);color:#fff;padding-block:clamp(3.5rem,6vw,5rem) 2.5rem}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:2.5rem}
.foot h4,.foot .foot-titulo{font-family:var(--font-display);text-transform:uppercase;font-size:.75rem;
  letter-spacing:.16em;font-weight:600;color:rgb(255 255 255/.5);margin:0 0 1.1rem}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.foot a{text-decoration:none;font-size:1rem;color:rgb(255 255 255/.82)}
.foot a:hover{color:var(--nh-amber-500)}
.foot p{margin:0;font-size:1rem;color:rgb(255 255 255/.72);line-height:1.6}
.foot-bar{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  border-top:1px solid var(--border-invert);margin-top:3rem;padding-top:1.75rem;
  font-size:.9375rem;color:rgb(255 255 255/.5);
}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}

/* ---------- REVELAÇÃO AO ROLAR (discreta) ---------------------- */
.rise{opacity:0;transform:translateY(22px) scale(.985);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rise.in{opacity:1;transform:none}
/* filhos escalonados: a seção entra em cascata, não em bloco */
.steps .rise:nth-child(2){transition-delay:.10s}
.steps .rise:nth-child(3){transition-delay:.20s}
.facts.rise .fact{transition:none}

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


/* =============================================================
   COMPONENTES DE PÁGINA INTERNA
   O marquee diagonal é exclusivo da home. As páginas internas
   abrem com este cabeçalho: faixa preta, pergunta em caixa alta
   e uma mídia em folha à direita.
   ============================================================= */
.phero{background:var(--nh-ink-950);color:#fff;padding-block:9.5rem 4.5rem;position:relative;overflow:hidden}
.phero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.phero .eyebrow{color:var(--nh-green-500)}
.phero h1{font-size:clamp(2.25rem,1.3rem + 4.2vw,4.25rem);color:#fff}
.phero-lede{margin:1.75rem 0 0;font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);
  line-height:1.55;color:rgb(255 255 255/.84);max-width:44ch}
.phero-lede strong{color:#fff;font-weight:600}
.phero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.25rem}
.phero-media{position:relative}
.phero-media img,.phero-media video{width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--leaf-lg);display:block;background:#111}
/* ladrilhos encostados nos cantos retos da folha, como no mosaico */
.phero-media::before{content:"";position:absolute;left:-2rem;top:-2rem;
  width:7rem;height:7rem;background:var(--accent);z-index:-1}
.phero-media::after{content:"";position:absolute;right:-2rem;bottom:-2rem;
  width:5.5rem;height:5.5rem;background:var(--nh-green-700);z-index:-1}
.phero-grid > *{position:relative;z-index:1}
@media (max-width:900px){
  .phero{padding-block:7.5rem 3.5rem}
  .phero-grid{grid-template-columns:1fr;gap:2.75rem}
  .phero-media{max-width:24rem}
}

/* ---------- MIGALHA ---------------------------------------- */
.crumb{display:flex;gap:.5rem;align-items:center;margin:0 0 1.5rem;
  font-family:var(--font-display);text-transform:uppercase;font-size:.75rem;
  font-weight:700;letter-spacing:.14em;color:rgb(255 255 255/.5)}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--nh-amber-500)}

/* =============================================================
   PERGUNTAS ABERTAS (accordion)
   <details> nativo: sem JavaScript, indexável pelo Google já
   aberto no HTML, e teclado funciona de graça.
   ============================================================= */
.qa{display:grid;gap:1rem;max-width:52rem}
.qa details{background:#fff;border:1px solid var(--border);border-radius:var(--leaf);
  overflow:hidden;transition:border-color var(--ease) .28s,box-shadow var(--ease) .28s}
.qa details[open]{border-color:var(--action);box-shadow:0 12px 32px rgb(0 0 0/.07)}
.qa summary{
  cursor:pointer;list-style:none;padding:1.4rem 3.5rem 1.4rem 1.6rem;position:relative;
  font-family:var(--font-display);text-transform:uppercase;font-weight:700;
  font-size:clamp(.9375rem,.9rem + .3vw,1.0625rem);letter-spacing:-.01em;line-height:1.3;
  transition:color var(--ease) .25s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--action)}
.qa summary::after{
  content:"";position:absolute;right:1.4rem;top:50%;width:1.5rem;height:1.5rem;
  margin-top:-.75rem;border-radius:var(--leaf-sm);background:var(--bg-muted);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='3'><path d='M12 5v14M5 12h14'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:.8rem;
  transition:background-color var(--ease) .3s;
}
.qa details[open] summary::after{
  background-color:var(--accent);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='3'><path d='M5 12h14'/></svg>");
}
.qa .qa-body{padding:0 1.6rem 1.6rem;max-width:62ch}
.qa .qa-body p{margin:0 0 .9rem}
.qa .qa-body p:last-child{margin-bottom:0}
.qa .qa-body strong{font-weight:600}

/* ---------- BLOCO DE ROTA ----------------------------------- */
.rota{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);
  align-items:center}
.rota-card{background:var(--nh-ink-900);color:#fff;border-radius:var(--leaf);padding:2rem}
.rota-card h3{font-family:var(--font-display);text-transform:uppercase;font-weight:800;
  font-size:1.375rem;margin:0 0 1rem;letter-spacing:-.02em}
.rota-card p{margin:0 0 .4rem;color:rgb(255 255 255/.82);font-size:1.0625rem}
.rota-card .rota-sub{color:rgb(255 255 255/.6);font-size:1rem}
.rota-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--leaf-lg)}
@media (max-width:900px){.rota{grid-template-columns:1fr}}


/* =============================================================
   HERO DE EXPANSÃO  (.xhero)
   Porte vanilla do "Scroll Expansion Hero" (21st.dev), adaptado.
   Padrão de abertura de TODA página interna.

   O que mudou em relação ao original, de propósito:
   o componente original chama preventDefault() na roda do mouse e
   força window.scrollTo(0,0) até a mídia terminar de abrir. Isso
   PRENDE a pessoa no topo: quem rola rápido trava, teclado quebra,
   e o botão voltar do navegador perde a posição. Aqui a expansão é
   lida da posição natural de scroll, mesmo efeito, sem armadilha.
   ============================================================= */
.xhero{position:relative;background:var(--nh-ink-950);height:190svh}
.xhero-stage{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;place-items:center;isolation:isolate}
/* dissolve para o preto do bloco seguinte, sem corte seco */
.xhero-stage::after{content:"";position:absolute;inset-inline:0;bottom:0;height:22%;
  z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgb(0 0 0/0),var(--nh-ink-950))}
/* Véu no topo: quando a mídia abre por inteiro, a migalha e o eyebrow
   caem sobre o céu e somem. Este gradiente garante a leitura sempre. */
.xhero-stage::before{content:"";position:absolute;inset-inline:0;top:0;height:26%;
  z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgb(0 0 0/.72),rgb(0 0 0/0))}

/* fundo que se apaga conforme a mídia toma a tela */
.xhero-bg{position:absolute;inset:0;z-index:0;background-size:cover;
  background-position:center;will-change:opacity}
.xhero-bg::after{content:"";position:absolute;inset:0;background:rgb(0 0 0/.55)}

/* a mídia cresce do centro até ocupar a tela inteira */
.xhero-media{
  position:relative;z-index:1;overflow:hidden;
  border-radius:var(--leaf-lg);box-shadow:0 30px 90px rgb(0 0 0/.55);
  will-change:width,height,border-radius;
}
.xhero-media video,.xhero-media img{width:100%;height:100%;object-fit:cover;display:block;
  /* Âncora acima do centro. Todo vídeo de hero aqui é gente em pé, e no fim
     da expansão o `cover` corta justamente pelo topo, ou seja, pela cabeça.
     Cada página ajusta o seu com style inline quando precisa de outro ponto. */
  object-position:center 30%}
.xhero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgb(0 0 0 / var(--veu, .28));will-change:background}

/* o título abre para os lados conforme a mídia cresce */
.xhero-title{
  position:absolute;inset:0;z-index:2;display:grid;place-content:center;
  pointer-events:none;text-align:center;gap:.1em;
}
.xhero-title span{
  display:block;font-family:var(--font-display);text-transform:uppercase;
  line-height:.95;letter-spacing:-.035em;color:#fff;
  font-size:clamp(2.5rem,1.2rem + 5.6vw,5.5rem);
  text-shadow:0 2px 40px rgb(0 0 0/.55);will-change:transform;
}
.xhero-title .w1{font-weight:200}
.xhero-title .w2{font-weight:800;letter-spacing:-.045em}

.xhero-hint{
  position:absolute;left:50%;bottom:2.25rem;z-index:3;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.55rem;margin:0;
  font-family:var(--font-display);text-transform:uppercase;font-size:.75rem;
  font-weight:700;letter-spacing:.2em;color:rgb(255 255 255/.75);pointer-events:none;
}
.xhero-hint i{display:block;width:1px;height:2.25rem;background:linear-gradient(#fff,transparent)}

/* a migalha e o eyebrow ficam colados no topo, fora da área da mídia */
.xhero-top{position:absolute;top:6.5rem;left:0;right:0;z-index:3;pointer-events:none}
.xhero-top .wrap > *{pointer-events:auto}
.xhero-top .crumb{margin:0 0 .5rem}
.xhero-top .eyebrow{color:var(--nh-green-500);margin:0}

@media (max-width:900px){
  .xhero{height:170svh}
  .xhero-top{top:5.5rem}
  /* Na tela estreita o título ocupa quase toda a largura, então ele
     precisa quebrar sozinho em vez de escapar pela borda. */
  .xhero-title span{font-size:clamp(2.125rem,1.1rem + 5vw,3rem)}
  .xhero-hint{bottom:1.5rem}
}

/* Sem movimento: a mídia já nasce cheia e a página não fica alta. */
@media (prefers-reduced-motion:reduce){
  .xhero{height:auto}
  .xhero-stage{position:relative;height:100svh}
  .xhero-media{width:100%!important;height:100%!important;border-radius:0!important}
  .xhero-bg{opacity:0}
  .xhero-hint{display:none}
}

/* ---------- bloco de chamada logo abaixo do hero ------------- */
.xhero-lede{background:var(--nh-ink-950);color:#fff;padding-block:0 5rem}
.xhero-lede-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);
  align-items:end}
.xhero-lede p{margin:0;font-size:clamp(1.0625rem,1rem + .45vw,1.375rem);line-height:1.55;
  color:rgb(255 255 255/.86);max-width:44ch}
.xhero-lede strong{color:#fff;font-weight:600}
@media (max-width:900px){.xhero-lede-grid{grid-template-columns:1fr;align-items:start}}


/* =============================================================
   FORMULÁRIO
   Um só componente para oração e contato. Muda o destino, não o
   desenho. Rótulo sempre visível: placeholder como rótulo some
   quando a pessoa começa a digitar e ela perde a referência.
   ============================================================= */
.form{display:grid;gap:1.25rem;max-width:34rem}
.campo{display:grid;gap:.5rem}
.campo label{font-family:var(--font-display);text-transform:uppercase;font-size:.8125rem;
  font-weight:700;letter-spacing:.14em;color:var(--fg)}
.campo label .op{font-weight:400;letter-spacing:.06em;color:var(--fg-muted);
  text-transform:none;font-family:var(--font-sans);font-size:.9375rem}
.campo input,.campo textarea{
  width:100%;font:inherit;font-size:1.0625rem;color:var(--fg);background:#fff;
  border:1px solid var(--border-strong);border-radius:var(--leaf-sm);
  padding:.9rem 1rem;transition:border-color var(--ease) .2s,box-shadow var(--ease) .2s;
}
.campo textarea{min-height:9rem;resize:vertical;line-height:1.55}
.campo input:hover,.campo textarea:hover{border-color:var(--fg-muted)}
.campo input:focus,.campo textarea:focus{
  outline:none;border-color:var(--action);box-shadow:0 0 0 3px rgb(0 104 55 / .16);
}
.campo .erro{font-size:.9375rem;color:var(--critical);display:none}
.campo.tem-erro input,.campo.tem-erro textarea{border-color:var(--critical)}
.campo.tem-erro .erro{display:block}

.marcar{display:flex;gap:.75rem;align-items:flex-start;font-size:1rem;
  line-height:1.5;cursor:pointer}
.marcar input{
  appearance:none;-webkit-appearance:none;flex:none;width:1.35rem;height:1.35rem;margin-top:.1rem;
  border:2px solid var(--border-strong);border-radius:.3rem;background:#fff;
  cursor:pointer;transition:background var(--ease) .2s,border-color var(--ease) .2s;
}
.marcar input:checked{background:var(--action);border-color:var(--action);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4'><path d='M20 6L9 17l-5-5'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:.85rem}
.marcar input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

.form .btn{justify-content:center;width:100%}
.form-nota{margin:0;font-size:.9375rem;color:var(--fg-muted);line-height:1.5}
.form-nota strong{color:var(--fg);font-weight:600}

/* ---------- confirmação ------------------------------------- */
.feito{display:none;background:var(--nh-green-100);border-radius:var(--leaf);
  padding:2.25rem;max-width:34rem}
.feito.on{display:block}
.feito-selo{width:3.25rem;height:3.25rem;border-radius:var(--leaf-sm);
  background:var(--action);display:grid;place-items:center;margin-bottom:1.25rem}
.feito-selo svg{width:1.6rem;height:1.6rem;color:#fff}
.feito h2{font-family:var(--font-display);text-transform:uppercase;font-weight:800;
  font-size:1.5rem;letter-spacing:-.02em;margin:0 0 .75rem;line-height:1.15}
.feito p{margin:0 0 1.5rem;color:var(--fg);line-height:1.6}
.feito p[role="alert"]{color:var(--critical);font-weight:600}
.zap{background:#25D366;color:#0b2b16}
.zap:hover{background:#1fbb59}
.zap svg{width:1.15rem;height:1.15rem}

/* ---------- canais de contato ------------------------------- */
.canais{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.canal{display:flex;flex-direction:column;gap:.6rem;padding:1.75rem;
  border-radius:var(--leaf);text-decoration:none;
  /* serve para <a> e para <button>: o cartão que abre o popup é botão */
  width:100%;text-align:left;border:0;font:inherit;color:inherit;cursor:pointer;
  transition:transform var(--ease) .3s,box-shadow var(--ease) .3s,border-radius var(--ease) .4s}
.canal:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgb(0 0 0/.2);
  border-radius:var(--leaf-lg)}
.canal-a{background:var(--action);color:#fff}
.canal-b{background:var(--accent);color:var(--nh-ink-900)}
.canal-c{background:var(--nh-wine-700);color:#fff}
.canal svg{width:1.6rem;height:1.6rem}
.canal b{font-family:var(--font-display);text-transform:uppercase;font-weight:800;
  font-size:1.125rem;letter-spacing:-.01em}
.canal span{font-size:1rem;line-height:1.5}
@media (max-width:900px){.canais{grid-template-columns:1fr}}


/* =============================================================
   SERMÕES
   ============================================================= */

/* Fachada do vídeo: pôster + botão. O iframe do YouTube só entra
   quando a pessoa clica. Carregar o player em toda visita custa
   cerca de 1 MB de JavaScript de terceiro e derruba o INP, que é
   critério de portão. A fachada preserva o LCP e o clique. */
.tv{position:relative;border-radius:var(--leaf-lg);overflow:hidden;background:#111;
  display:block;cursor:pointer;isolation:isolate}
.tv img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  transition:transform var(--ease) .6s,opacity var(--ease) .4s;opacity:.82}
.tv:hover img{transform:scale(1.03);opacity:.95}
.tv::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgb(0 0 0/.05) 40%,rgb(0 0 0/.65))}
.tv-play{position:absolute;inset:0;margin:auto;width:4.75rem;height:4.75rem;z-index:2;
  border:none;border-radius:999px;background:var(--accent);color:var(--nh-ink-900);
  display:grid;place-items:center;cursor:pointer;
  transition:transform var(--ease) .3s,background var(--ease) .3s}
.tv:hover .tv-play{transform:scale(1.09);background:#fff}
.tv-play svg{width:1.7rem;height:1.7rem;margin-left:.18rem}
.tv-dur{position:absolute;right:1rem;bottom:1rem;z-index:2;
  background:rgb(0 0 0/.75);color:#fff;border-radius:var(--leaf-sm);
  padding:.35rem .7rem;font-family:var(--font-display);font-size:.75rem;
  font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.tv iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}

.item-acoes{display:flex;flex-wrap:wrap;gap:1.1rem;align-items:center;margin-top:.85rem}
.item-acoes .item-link{margin-top:0}
.item-ler{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  background:var(--accent);color:var(--nh-ink-900);border-radius:999px;
  padding:.55rem 1.05rem;font-family:var(--font-display);font-size:.75rem;
  font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  transition:background var(--ease) .24s,transform var(--ease) .24s}
.item-ler svg{width:.85rem;height:.85rem}
.item-ler:hover{background:var(--nh-ink-900);color:#fff;transform:translateY(-2px)}
/* grade sempre simétrica: com número ímpar em 2 colunas, o último ocupa a linha */
.lista-semana{list-style:none;padding:0;margin:1.75rem 0 0;display:grid;gap:1rem}
.lista-semana li{position:relative;padding-left:1.6rem;font-size:1.0625rem;line-height:1.6;color:var(--nh-ink-700)}
.lista-semana li::before{content:"";position:absolute;left:0;top:.5em;width:.7rem;height:.7rem;
  background:var(--nh-green-500);border-radius:0 100% 0 100%}
.crumbs{font-family:var(--font-display);font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;color:var(--nh-ink-500)}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:var(--action)}
.item-link{display:inline-flex;align-items:center;gap:.4rem;margin-top:.85rem;
  text-decoration:none;color:var(--action);font-family:var(--font-display);
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.item-link svg{width:.8rem;height:.8rem}
.item-link:hover{text-decoration:underline}

/* faixa de séries */
.series{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.serie{display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  font-family:var(--font-display);text-transform:uppercase;font-size:.75rem;
  font-weight:700;letter-spacing:.12em;padding:.6rem 1rem;
  border-radius:var(--leaf-sm);border:1.5px solid var(--border-strong);color:var(--fg);
  transition:background var(--ease) .25s,border-color var(--ease) .25s,color var(--ease) .25s}
.serie:hover{border-color:var(--action);color:var(--action)}
.serie[aria-pressed="true"]{background:var(--nh-ink-900);border-color:var(--nh-ink-900);color:#fff}
.serie b{font-weight:700;opacity:.55}

/* lista de sermões */
.acervo{display:grid;grid-template-columns:repeat(2,1fr);gap:1.75rem;margin-top:3rem}
.acervo .item:last-child:nth-child(odd){grid-column:1/-1}
.item{display:flex;flex-direction:column;text-decoration:none;
  transition:transform var(--ease) .35s}
.item:hover{transform:translateY(-6px)}
.item .tv{border-radius:var(--leaf)}
.item-corpo{padding-top:1.25rem;display:grid;gap:.5rem}
.item-meta{font-family:var(--font-display);text-transform:uppercase;font-size:.75rem;
  font-weight:700;letter-spacing:.12em;color:var(--fg-muted);margin:0}
.item h3{font-family:var(--font-display);text-transform:uppercase;font-weight:800;
  font-size:1.125rem;letter-spacing:-.02em;line-height:1.2;margin:0;
  transition:color var(--ease) .25s}
.item:hover h3{color:var(--action)}
.item p{margin:0;font-size:1rem;color:var(--fg-muted);line-height:1.5}
@media (max-width:1000px){.acervo{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.acervo{grid-template-columns:1fr}}

/* =============================================================
   PÁGINA DE UM SERMÃO
   ============================================================= */
.leitura{max-width:44rem;margin-inline:auto}
.leitura h2{font-family:var(--font-display);text-transform:uppercase;font-weight:800;
  font-size:clamp(1.375rem,1.1rem + 1.2vw,1.875rem);letter-spacing:-.025em;
  margin:3rem 0 1rem;line-height:1.15}
.leitura p{margin:0 0 1.1rem;font-size:1.0625rem;line-height:1.7}
.leitura .abre{font-size:1.1875rem;line-height:1.6;
  border-left:4px solid var(--accent);padding-left:1.5rem;margin-bottom:2rem}
.leitura ul{margin:0 0 1.1rem;padding-left:1.25rem}
.leitura li{margin-bottom:.6rem;line-height:1.6}

.passagens{display:flex;flex-wrap:wrap;gap:.5rem;margin:0}
.passagens span{display:inline-block;background:var(--nh-green-100);color:var(--nh-green-900);
  border-radius:var(--leaf-sm);padding:.5rem .9rem;font-size:1rem;font-weight:600}

.desafios{list-style:none;padding:0;margin:0;counter-reset:d;display:grid;gap:.9rem}
.desafios li{position:relative;padding:1.35rem 1.5rem 1.35rem 4rem;background:#fff;
  border:1px solid var(--border);border-radius:var(--leaf);line-height:1.55;
  transition:border-color var(--ease) .25s,transform var(--ease) .25s}
.desafios li:hover{border-color:var(--action);transform:translateX(4px)}
.desafios li::before{counter-increment:d;content:counter(d,decimal-leading-zero);
  position:absolute;left:1.4rem;top:1.35rem;font-family:var(--font-display);
  font-weight:800;font-size:1rem;color:var(--action);letter-spacing:.04em}

.ficha{display:flex;flex-wrap:wrap;gap:.75rem 2rem;margin:1.75rem 0 0;padding:0;
  font-family:var(--font-display);text-transform:uppercase;font-size:.75rem;
  font-weight:700;letter-spacing:.1em;color:rgb(255 255 255/.66);list-style:none}
.ficha b{color:#fff;font-weight:700}


/* =============================================================
   POPUP DA NEWSLETTER
   Abre por cima da página, nunca leva ninguém para outra URL.
   Três campos e pronto: formulário longo em popup é o jeito mais
   rápido de perder a inscrição.
   Usa <dialog> nativo, então o foco fica preso dentro dele, o Esc
   fecha e o leitor de tela anuncia sem uma linha de JavaScript.
   ============================================================= */
.pop{
  border:0;padding:0;background:transparent;max-width:min(94vw,34rem);width:100%;
  overflow:visible;
  /* limite de altura do dialogo: sem isto o navegador deixa a caixa crescer
     do tamanho do conteudo, e no celular ela nasce maior que a tela, com o
     rodape (erro, botao) fora da area visivel e sem como rolar ate la. */
  max-height:92vh;max-height:92dvh;
}
.pop::backdrop{background:rgb(0 0 0 / .72);backdrop-filter:blur(4px)}
.pop-caixa{
  position:relative;background:var(--bg);border-radius:var(--leaf-lg);overflow:hidden;
  box-shadow:0 40px 90px rgb(0 0 0 / .45);
  /* coluna com altura travada no .pop acima: a faixa fica fixa no topo, o
     botao de fechar tambem (posicionado em relacao a esta caixa, nao ao
     miolo que rola), e so o .pop-corpo ganha barra de rolagem propria. */
  max-height:inherit;display:flex;flex-direction:column;
}
/* faixa do mosaico no topo, para o popup nascer com a cara da marca */
.pop-faixa{display:grid;grid-template-columns:repeat(8,1fr);height:.75rem;flex:none}
.pop-faixa i{display:block}

.pop-corpo{
  padding:clamp(1.75rem,4vw,2.5rem);
  overflow-y:auto;flex:1 1 auto;min-height:0;-webkit-overflow-scrolling:touch;
}
.pop-fechar{
  position:absolute;top:2.1rem;right:1.4rem;z-index:2;width:2.4rem;height:2.4rem;
  border:0;border-radius:var(--leaf-sm);background:var(--bg-muted);color:var(--fg);
  display:grid;place-items:center;cursor:pointer;
  transition:background var(--ease) .2s,transform var(--ease) .2s;
}
.pop-fechar:hover{background:var(--fg);color:#fff;transform:rotate(90deg)}
.pop-fechar svg{width:1.1rem;height:1.1rem}

.pop-selo{width:3rem;height:3rem;color:var(--action);margin-bottom:1.1rem}
.pop h2{
  font-family:var(--font-display);text-transform:uppercase;font-weight:200;
  font-size:clamp(1.75rem,1.4rem + 1.8vw,2.5rem);letter-spacing:-.03em;
  line-height:1.02;margin:0 0 .9rem;
}
.pop h2 b{font-weight:800;letter-spacing:-.04em}
.pop-lede{margin:0 0 1.75rem;color:var(--fg-muted);line-height:1.55;max-width:38ch}

.pop .form{gap:1rem;max-width:none}
.pop-dupla{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:520px){.pop-dupla{grid-template-columns:1fr}}

/* escolha de idioma como par de botões, não como menu suspenso:
   dois cliques a menos e o estado fica visível */
.idiomas{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.idioma{position:relative}
.idioma input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.idioma span{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  border:2px solid var(--border-strong);border-radius:var(--leaf-sm);
  padding:.85rem 1rem;font-family:var(--font-display);text-transform:uppercase;
  font-size:.9375rem;font-weight:700;letter-spacing:.08em;
  transition:border-color var(--ease) .2s,background var(--ease) .2s,color var(--ease) .2s;
}
.idioma input:checked + span{background:var(--action);border-color:var(--action);color:#fff}
.idioma input:focus-visible + span{outline:3px solid var(--focus);outline-offset:2px}

.pop-nota{margin:1.1rem 0 0;font-size:.75rem;color:var(--fg-muted);line-height:1.5}

/* linha extra na confirmação do pedido de oração, só quando a pessoa
   marcou a caixa dos sermões: some quando ela nao marcou. */
.pop-nota-assinatura{margin:0 0 1.75rem;font-size:.9375rem;line-height:1.6;color:var(--fg-muted)}
.pop-nota-assinatura[role="alert"]{color:var(--critical)}

/* confirmação dentro do próprio popup */
.pop-feito{display:none;text-align:center;padding:1rem 0}
.pop-feito.on{display:block}
.pop-feito .feito-selo{margin:0 auto 1.25rem}
.pop-feito h2{margin-bottom:.75rem}
.pop-feito p{color:var(--fg-muted);line-height:1.6;margin:0 0 1.75rem}

/* âncora fixa: acompanha a pessoa por toda a página */
.news-fixo{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:50;
  box-shadow:0 14px 40px rgb(0 0 0 / .3);
}
@media (max-width:640px){
  .news-fixo{right:.9rem;bottom:.9rem;padding:.8rem 1.1rem;font-size:.75rem}
}
@media (prefers-reduced-motion:reduce){
  .pop-fechar:hover{transform:none}
}


/* =============================================================
   BLOCO DE ENQUADRAMENTO
   Usado no topo de /imigracao. A igreja faz a ponte, quem presta
   o serviço é o escritório parceiro. Isso precisa aparecer antes
   de qualquer outra informação da página, não no rodapé.
   ============================================================= */
.aviso{
  border-radius:var(--leaf);padding:1.75rem 2rem;display:flex;gap:1.25rem;
  align-items:flex-start;max-width:58rem;
}
.aviso-marca{background:var(--nh-green-100);border-left:5px solid var(--action)}
.aviso-legal{background:var(--bg-muted);border-left:5px solid var(--fg-muted)}
.aviso svg{width:1.6rem;height:1.6rem;flex:none;margin-top:.15rem;color:var(--action)}
.aviso-legal svg{color:var(--fg-muted)}
.aviso b{display:block;font-family:var(--font-display);text-transform:uppercase;
  font-weight:800;font-size:1rem;letter-spacing:-.01em;margin-bottom:.5rem}
.aviso p{margin:0;font-size:1rem;line-height:1.6}
.aviso p + p{margin-top:.6rem}

/* ---------- SUBMENU -------------------------------------------
   Ministérios e Contato abrem as páginas filhas sem obrigar a
   passar pela página-mãe. Abre no hover e também no foco pelo
   teclado, e no toque o primeiro toque abre em vez de navegar.
   --------------------------------------------------------------- */
.nav-links li{position:relative}
.sub{position:absolute;top:100%;left:-1rem;min-width:15rem;z-index:60;
  background:var(--nh-ink-900);border-radius:var(--leaf-sm);padding:.6rem;
  display:grid;gap:.15rem;opacity:0;visibility:hidden;transform:translateY(-.35rem);
  transition:opacity var(--ease) .2s,transform var(--ease) .2s,visibility 0s .2s;
  box-shadow:0 22px 48px rgb(0 0 0/.45)}
.nav-links li:hover > .sub,
.nav-links li:focus-within > .sub{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.sub a{display:block;padding:.6rem .8rem;border-radius:.4rem;font-size:.9375rem;
  letter-spacing:.04em;color:rgb(255 255 255/.82);white-space:nowrap}
.sub a:hover,.sub a:focus-visible{background:rgb(255 255 255/.10);color:#fff}
/* ponte invisível: o mouse atravessa o vão sem o menu fechar */
.nav-links li:has(> .sub)::after{content:"";position:absolute;left:0;right:0;top:100%;height:.75rem}
.tem-sub > a::after{content:"";display:inline-block;width:.34rem;height:.34rem;margin-left:.4rem;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-.12rem) rotate(45deg);opacity:.7}

/* ---------- AÇÕES DO CABEÇALHO --------------------------------- */
.nav-acoes{display:flex;align-items:center;gap:.5rem}

/* ---------- INSTAGRAM -----------------------------------------
   O Instagram da igreja e o canal vivo dela, entao ganha lugar
   fixo no cabecalho e no rodape. No cabecalho e so o simbolo, do
   tamanho do botao de rota, para nao competir com "Peca uma
   oracao", que e a acao principal. No rodape vem com o @, onde
   ha espaco para nomear.
   O desenho e o simbolo do proprio Instagram, tracado com a mesma
   espessura dos outros icones do site. */
.nav-social{display:inline-flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;flex:none;border-radius:var(--leaf-sm);
  border:2px solid rgb(255 255 255/.32);color:#fff;text-decoration:none;
  transition:border-color var(--ease) .24s,background var(--ease) .24s}
.nav-social:hover{border-color:#fff;background:rgb(255 255 255/.1)}
.nav-social svg{width:1.15rem;height:1.15rem}

/* ---------- TROCA DE IDIOMA -------------------------------------
   A bandeira leva para a MESMA pagina no outro idioma, nunca para a
   home dele: quem esta lendo a Visita quer a Visita. O endereco nao
   e escrito a mao: o preparar-producao.py o preenche a partir de
   site/idiomas.json, que e o mesmo mapa do hreflang.
   Mesmo formato do botao do Instagram ao lado, e fica visivel em
   qualquer largura, porque no celular a faixa de acoes continua na
   tela (so o botao de oracao e o de rota saem). */
.nav-idioma{display:inline-flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;flex:none;border-radius:var(--leaf-sm);
  border:2px solid rgb(255 255 255/.32);color:#fff;text-decoration:none;
  transition:border-color var(--ease) .24s,background var(--ease) .24s}
.nav-idioma:hover{border-color:#fff;background:rgb(255 255 255/.1)}
.nav-idioma svg{width:1.4rem;height:auto;flex:none;border-radius:2px}
/* A sigla existe para leitor de tela e para quem copia o texto; na
   tela, a bandeira sozinha ja diz o idioma, e cabe ate em 320px. */
.nav-idioma span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nav .btn-accent{white-space:nowrap}
/* Entre 1081 e 1280px o menu inteiro, a bandeira e o botao de oracao
   dividem a mesma linha: o espacamento encolhe para o botao nao sair
   da tela nem quebrar em tres linhas. */
@media (min-width:1081px) and (max-width:1280px){
  .nav-inner{gap:1.1rem}
  .nav-links{gap:1.05rem}
  .nav-links a{letter-spacing:.07em}
}
@media (min-width:1081px) and (max-width:1180px){
  .nav-inner{gap:.8rem}
  .nav-links{gap:.75rem}
  .nav-links a{letter-spacing:.05em}
}
@media (max-width:1080px){
  .nav-inner{gap:.75rem}
  /* No celular o Instagram entra no painel do menu, escrito (menu.js).
     O simbolo aqui ficava cortado para fora da tela em 320px. */
  .nav-acoes .nav-social{display:none}
}

/* Nota de copyright que a Biblica exige nas paginas em ingles, que
   citam a NIV. */
.foot-niv{font-size:12px;opacity:.55;margin-top:1rem;max-width:60rem;line-height:1.5}

/* Os quatro caminhos de contato, um por linha, no mesmo formato.
   Ficam juntos de proposito: quem chega no rodape esta procurando como
   falar, e ter WhatsApp, telefone, ficha do Google e Instagram lado a
   lado evita a cacada pelo site. Sao tambem os quatro enderecos que o
   sameAs do schema declara, entao o que a pessoa ve e o que o Google le. */
.foot-contatos{display:grid;justify-items:start;gap:.55rem;margin-top:1.35rem}
.foot-contatos .foot-social{margin-top:0}

.foot-social{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.25rem;
  color:rgb(255 255 255/.82);text-decoration:none;
  transition:color var(--ease) .24s}
.foot-social:hover{color:#fff}
.foot-social svg{width:1.25rem;height:1.25rem;flex:none}
.btn-rota{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  height:2.6rem;padding-inline:.95rem;border-radius:var(--leaf-sm);
  border:2px solid rgb(255 255 255/.32);color:#fff;flex:none;
  text-decoration:none;
  transition:border-color var(--ease) .24s,background var(--ease) .24s}
.btn-rota svg{width:1.05rem;height:1.05rem;flex:none}
.btn-rota span{font-family:var(--font-display);font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}
@media (max-width:1560px){.btn-rota span{display:none}.btn-rota{width:2.9rem;padding-inline:0}}
.btn-rota:hover{border-color:#fff;background:rgb(255 255 255/.12)}
@media (max-width:1180px){.btn-rota{display:none}}

/* =============================================================
   VERSÍCULO
   A Escritura aparece no corpo do texto, não como enfeite. Fica
   numa folha da marca, com a referência logo abaixo.
   ============================================================= */
.versiculo{margin:2rem 0 0;padding:clamp(1.5rem,3vw,2rem) clamp(1.5rem,3vw,2.25rem);
  border-radius:var(--leaf);background:var(--nh-green-100);color:var(--nh-green-900)}
.versiculo p{margin:0;font-family:var(--font-display);font-weight:300;
  font-size:clamp(1.125rem,1rem + .6vw,1.4375rem);line-height:1.45;letter-spacing:-.01em}
.versiculo cite{display:block;margin-top:.9rem;font-style:normal;
  font-family:var(--font-display);font-weight:800;font-size:.75rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--nh-green-700)}
.section-dark .versiculo{background:rgb(255 255 255/.07);color:#fff}
.section-dark .versiculo cite{color:var(--nh-green-500)}

/* Sem o texto literal da NIV (a busca falhou, ou a passagem nao coube), a
   pagina em ingles troca o blockquote acima por uma linha simples, so com a
   referencia. Ela herda as classes "lede muted", que zeram a margem
   superior: sem esta regra a linha nasce colada no paragrafo anterior. Aqui
   ela recebe a mesma moldura do blockquote que substitui: mesma folha da
   marca, mesmo respiro, so sem o corpo do versiculo. */
.versiculo-ref-only{margin-top:2rem;padding:clamp(1rem,2vw,1.375rem) clamp(1.25rem,2.5vw,1.75rem);
  border-radius:var(--leaf);background:var(--nh-green-100);color:var(--nh-green-900)}
.section-dark .versiculo-ref-only{background:rgb(255 255 255/.07);color:#fff}

/* =============================================================
   LISTA DE SERVIÇOS
   Cada item responde "quando eu preciso disso", que é como a
   pessoa realmente pesquisa.
   ============================================================= */
.servicos{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-top:2.5rem}
.servico{border:0;border-radius:var(--leaf);padding:1.75rem;position:relative;overflow:hidden;
  background:var(--nh-green-100);color:var(--nh-green-900);
  transition:transform var(--ease) .28s,box-shadow var(--ease) .28s,border-radius var(--ease) .28s}

/* A cor gira de três em três. Numa grade de duas colunas isso garante que
   a mesma cor nunca caia lado a lado nem uma embaixo da outra. */
/* a grade tem 2 colunas: o ciclo precisa ser de 4 para o padrao fechar
   a cada duas linhas. Com ciclo de 3 a cor caia em diagonal e nunca alinhava. */
.servico:nth-child(4n+2){background:var(--nh-amber-100);color:#6d4200}
.servico:nth-child(4n+3){background:var(--nh-wine-100);color:var(--nh-wine-700)}

/* A folha da marca, meio escondida no canto, como nos cartões de horário. */
.servico::before{content:"";position:absolute;right:-2.5rem;bottom:-2.5rem;z-index:0;
  width:7.5rem;height:7.5rem;border-radius:var(--leaf-lg);background:currentColor;opacity:.10;
  pointer-events:none;transition:transform var(--ease) .5s}
.servico > *{position:relative;z-index:1}
.servico:hover{transform:translateY(-4px);box-shadow:0 14px 36px rgb(0 0 0/.10);
  border-radius:var(--leaf-lg)}
.servico:hover::before{transform:scale(1.3) rotate(-12deg)}

.servico h3{font-family:var(--font-display);text-transform:uppercase;font-weight:800;
  font-size:1.0625rem;letter-spacing:-.01em;margin:0 0 .6rem;line-height:1.2;color:inherit}
.servico p{margin:0;font-size:1rem;color:var(--nh-ink-700);line-height:1.55}
.servico .quando{display:block;margin-top:.7rem;font-size:1rem;color:var(--nh-ink-900)}
.servico .quando b{font-weight:600}
/* Em seção escura o cartão vira vidro fosco e o texto clareia. Sem isto,
   a cor clara do cartão brigaria com o fundo preto e o texto sumiria. */
.section-dark .servico{background:rgb(255 255 255/.07);border:1px solid rgb(255 255 255/.16)}
.section-dark .servico h3{color:#fff}
.section-dark .servico p{color:rgb(255 255 255/.86)}
/* Cada cartão recebe uma cor cheia da paleta. Sólido, e não translúcido:
   por cima do preto o véu lavava a cor e os três cartões ficavam quase
   iguais. No âmbar a tinta vira escura, senão o texto branco some. */
.section-dark .servico:nth-child(3n+1){background:var(--nh-green-700);border-color:transparent}
.section-dark .servico:nth-child(3n+2){background:var(--nh-wine-700);border-color:transparent}
.section-dark .servico:nth-child(3n+3){background:var(--nh-amber-500);border-color:transparent}
.section-dark .servico:nth-child(3n+3) h3{color:var(--nh-ink-900)}
.section-dark .servico:nth-child(3n+3) p{color:rgb(18 18 18/.88)}
.section-dark .servico:nth-child(3n+3) .quando,
.section-dark .servico:nth-child(3n+3) a{color:var(--nh-ink-900)}

@media (max-width:820px){.servicos{grid-template-columns:1fr}}

/* =============================================================
   CARTÕES DE REGIÃO (New Hope Casa)
   Card com mapa esquemático, não lista de texto.
   ============================================================= */
.regioes{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:3rem}
.reg{
  position:relative;border-radius:var(--leaf);overflow:hidden;padding:2rem;
  display:flex;flex-direction:column;gap:.5rem;min-height:15rem;color:#fff;
  transition:transform var(--ease) .35s,box-shadow var(--ease) .35s,border-radius var(--ease) .4s;
}
.reg:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgb(0 0 0/.28);
  border-radius:var(--leaf-lg)}
.reg-1{background:var(--action)}
.reg-2{background:var(--nh-wine-700)}
.reg-3{background:var(--nh-wine-500)}
.reg-4{background:var(--nh-green-900)}
/* folha grande de marca d'água, virando o mapa esquemático */
.reg::after{content:"";position:absolute;right:-3rem;bottom:-3rem;width:12rem;height:12rem;
  border-radius:var(--leaf-lg);background:currentColor;opacity:.10;
  transition:transform var(--ease) .5s}
.reg:hover::after{transform:scale(1.2) rotate(-10deg)}
.reg > *{position:relative;z-index:1}
.reg-dia{font-family:var(--font-display);text-transform:uppercase;font-size:.75rem;
  font-weight:700;letter-spacing:.16em;color:rgb(255 255 255/.75);margin:0}
.reg h3{font-family:var(--font-display);text-transform:uppercase;font-weight:800;
  font-size:clamp(1.375rem,1.2rem + 1vw,1.75rem);letter-spacing:-.02em;margin:0;line-height:1.1}
.reg-hora{font-family:var(--font-display);font-weight:800;font-size:1.75rem;margin:.4rem 0 0}
.reg-lider{margin:auto 0 0;font-size:1rem;color:rgb(255 255 255/.82)}
.reg-lider b{color:#fff;font-weight:600}
@media (max-width:820px){.regioes{grid-template-columns:1fr}}

/* linha do tempo de um encontro */
.encontro{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2.5rem;
  counter-reset:e}
.etapa{position:relative;padding-top:2.25rem}
.etapa::before{counter-increment:e;content:"";position:absolute;left:0;top:0;
  width:100%;height:4px;background:var(--border)}
.etapa::after{content:"";position:absolute;left:0;top:0;width:2.5rem;height:4px;
  background:var(--accent)}
.etapa b{display:block;font-family:var(--font-display);text-transform:uppercase;
  font-weight:800;font-size:1rem;letter-spacing:-.01em;margin-bottom:.5rem}
.etapa p{margin:0;font-size:1rem;color:var(--fg-muted);line-height:1.55}
@media (max-width:820px){.encontro{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.encontro{grid-template-columns:1fr}}


/* ---------- PENDÊNCIA DE CONTEÚDO -----------------------------
   Bloco visível no mockup, para a igreja saber onde o texto dela
   entra. Não vai para produção. Melhor um espaço marcado do que
   texto inventado.                                              */
.pendente{border:2px dashed var(--nh-wine-500);border-radius:var(--leaf);
  padding:1.75rem 2rem;background:var(--nh-wine-100);max-width:58rem}
.pendente b{display:block;font-family:var(--font-display);text-transform:uppercase;
  font-weight:800;font-size:.9375rem;letter-spacing:.1em;color:var(--nh-wine-700);
  margin-bottom:.6rem}
.pendente p{margin:0;font-size:1rem;line-height:1.6;color:var(--nh-wine-700)}

/* ---------- LINHA DO TEMPO ------------------------------------ */
.tempo{display:grid;gap:0;margin-top:3rem}
.marco{display:grid;grid-template-columns:9rem 1fr;gap:2rem;padding:2rem 0;
  border-top:1px solid var(--border);align-items:start}
.marco:last-child{border-bottom:1px solid var(--border)}
.marco-ano{font-family:var(--font-display);font-weight:800;
  font-size:clamp(2rem,1.6rem + 1.6vw,2.75rem);line-height:1;color:var(--action);
  font-variant-numeric:tabular-nums}
.marco h3{font-family:var(--font-display);text-transform:uppercase;font-weight:800;
  font-size:1.125rem;letter-spacing:-.01em;margin:0 0 .6rem;line-height:1.2}
.marco p{margin:0;line-height:1.65;max-width:56ch}
@media (max-width:760px){.marco{grid-template-columns:1fr;gap:.75rem}}

/* ---------- DOAÇÃO -------------------------------------------- */
.doar{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
.canal-doar{border-radius:var(--leaf);padding:2rem;display:flex;flex-direction:column;gap:.75rem}
.canal-doar-a{background:var(--nh-green-700);color:#fff}
.canal-doar-b{background:var(--nh-wine-700);color:#fff}
/* O terceiro canal ficava sem cor de fundo, e o texto branco sumia.
   Agora tem a cor âmbar da marca, com tinta escura por cima. */
.canal-doar-c{background:var(--nh-amber-500);color:var(--nh-ink-900)}
@media (max-width:900px){.doar{grid-template-columns:1fr}}
.canal-doar b.rotulo{font-family:var(--font-display);text-transform:uppercase;
  font-size:.75rem;font-weight:700;letter-spacing:.16em;color:rgb(255 255 255/.72)}
.canal-doar h3{font-family:var(--font-display);text-transform:uppercase;font-weight:800;
  font-size:1.5rem;letter-spacing:-.02em;margin:0}
.canal-doar p{margin:0;color:rgb(255 255 255/.84);line-height:1.6;font-size:1rem}
.copiar{display:inline-flex;align-items:center;justify-content:space-between;gap:1rem;
  background:rgb(255 255 255/.14);border:1.5px solid rgb(255 255 255/.3);
  border-radius:var(--leaf-sm);padding:.9rem 1.1rem;margin-top:.5rem;
  font-family:var(--font-display);font-weight:700;font-size:1rem;color:#fff;
  cursor:pointer;width:100%;transition:background var(--ease) .25s,border-color var(--ease) .25s}
.copiar:hover{background:rgb(255 255 255/.24);border-color:#fff}
.copiar svg{width:1.1rem;height:1.1rem;flex:none}
.copiar[data-copiado="1"]{background:#fff;color:var(--action);border-color:#fff}
/* o canal âmbar é claro, então a tinta dele é escura */
.canal-doar-c b.rotulo{color:rgb(18 18 18/.68)}
.canal-doar-c p{color:rgb(18 18 18/.88)}
.canal-doar-c h3{color:var(--nh-ink-900)}
.slot-futuro{grid-column:1/-1;border:2px dashed var(--border-strong);border-radius:var(--leaf);
  padding:1.5rem 2rem;color:var(--fg-muted);font-size:1rem;line-height:1.6}
@media (max-width:820px){.doar{grid-template-columns:1fr}}


/* =============================================================
   STORY SCROLL DAS REGIÕES  (.hist)
   Porte vanilla do "Story Scroll" (21st.dev / FlowArt).

   O original usa GSAP com ScrollTrigger e pin. Aqui a mesma ideia
   sai de position:sticky mais uma leitura de scroll por frame:
   cada painel entra girado 30 graus a partir do canto inferior
   esquerdo e se endireita conforme sobe, empilhando sobre o
   anterior. Sem GSAP, sem pin, e sem prender a rolagem.
   ============================================================= */
.hist{position:relative;background:var(--nh-ink-950)}
.hist-painel{position:sticky;top:0;height:100svh;overflow:hidden;display:grid}
.hist-inner{
  position:relative;height:100%;width:100%;
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  gap:clamp(2rem,5vw,4.5rem);padding:clamp(5rem,9vw,7rem) 4vw clamp(3rem,6vw,5rem);
  transform-origin:bottom left;will-change:transform;
}
.hist-p1 .hist-inner{background:var(--action)}
.hist-p2 .hist-inner{background:var(--nh-wine-700)}
.hist-p3 .hist-inner{background:var(--nh-wine-500)}
.hist-p4 .hist-inner{background:var(--nh-green-900)}
.hist-inner > *{position:relative;z-index:1}

.hist-num{font-family:var(--font-display);text-transform:uppercase;font-size:.75rem;
  font-weight:700;letter-spacing:.2em;color:rgb(255 255 255/.7);margin:0}
.hist-regra{border:none;border-top:1px solid rgb(255 255 255/.28);margin:1.5rem 0}
.hist h3{
  font-family:var(--font-display);text-transform:uppercase;font-weight:800;color:#fff;
  font-size:clamp(2.25rem,1.2rem + 5vw,5rem);line-height:.9;letter-spacing:-.04em;margin:0;
}
.hist-dia{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin:1.5rem 0 0;
  font-family:var(--font-display);text-transform:uppercase;font-size:.9375rem;
  font-weight:700;letter-spacing:.12em;color:rgb(255 255 255/.72)}
.hist-dia b{color:var(--nh-amber-500)}
.hist p.hist-txt{margin:1.5rem 0 0;color:rgb(255 255 255/.86);line-height:1.6;
  max-width:38ch;font-size:clamp(1rem,.95rem + .3vw,1.125rem)}
.hist-lider{margin:auto 0 0;color:rgb(255 255 255/.72);font-size:1rem}
.hist-lider b{color:#fff;font-weight:600}

/* o mapa: Flórida Central em cinza, só a região em cor */
.hist-mapa{position:relative;display:grid;place-items:center}
.hist-mapa svg{width:100%;max-width:30rem;height:auto}
.mapa-base{fill:rgb(255 255 255/.10);stroke:rgb(255 255 255/.22);stroke-width:1.5}
.mapa-agua{fill:rgb(255 255 255/.05)}
.mapa-via{stroke:rgb(255 255 255/.16);stroke-width:1.2;fill:none}
.mapa-regiao{fill:var(--nh-amber-500);opacity:.9}
/* o ponto da igreja, que é a referência de onde as regiões ficam */
.mapa-ponto{fill:#fff}
.mapa-ponto-anel{fill:none;stroke:rgb(255 255 255/.5);stroke-width:1.2}
.mapa-rotulo{font-family:var(--font-display);font-size:9px;font-weight:700;
  letter-spacing:.1em;fill:rgb(255 255 255/.45);text-transform:uppercase}
.mapa-rotulo-ativo{fill:var(--nh-amber-500)}
.mapa-legenda{margin:1rem 0 0;font-family:var(--font-display);text-transform:uppercase;
  font-size:.75rem;font-weight:700;letter-spacing:.14em;color:rgb(255 255 255/.5);
  text-align:center}

@media (max-width:900px){
  .hist-inner{grid-template-columns:1fr;align-content:center;gap:2rem;
    padding:clamp(4.5rem,12vw,6rem) 6vw 3rem}
  .hist-mapa svg{max-width:18rem}
  .hist-lider{margin-top:1.5rem}
}

/* Sem movimento: os painéis viram blocos comuns, um embaixo do outro. */
@media (prefers-reduced-motion:reduce){
  .hist-painel{position:relative;height:auto}
  .hist-inner{transform:none!important;min-height:36rem}
}


/* =============================================================
   AVALIAÇÕES DO GOOGLE  (.aval)
   Porte vanilla do "Stagger Testimonials" (21st.dev).

   Diferenças do original, todas de marca:
   o original recorta os cantos com clip-path em polígono, o que
   dá um chanfro reto. Aqui o cartão usa a FOLHA da New Hope, dois
   cantos opostos arredondados e dois retos, como todo o resto do
   site. E a foto do avaliador vira um ladrilho com as iniciais:
   evita imagem de terceiro, que a política de conteúdo do Google
   não deixa reaproveitar livremente.
   ============================================================= */
.aval{position:relative;width:100%;overflow:hidden;height:38rem;
  background:var(--bg-muted)}
.aval-pista{position:absolute;inset:0}
.aval-card{
  position:absolute;left:50%;top:50%;width:22rem;height:22rem;padding:2rem;
  cursor:pointer;border:2px solid var(--border);background:#fff;color:var(--fg);
  border-radius:var(--leaf);
  transition:transform .5s var(--ease),background .5s var(--ease),
             border-color .5s var(--ease),box-shadow .5s var(--ease);
  will-change:transform;
}
.aval-card:hover{border-color:var(--action)}
.aval-card.centro{
  z-index:10;background:var(--action);color:#fff;border-color:var(--action);
  box-shadow:0 18px 0 4px var(--nh-green-900);
}
.aval-card.centro:hover{border-color:var(--action)}

.aval-topo{display:flex;align-items:center;gap:.9rem;margin-bottom:1.25rem}
.aval-sigla{
  flex:none;width:3.25rem;height:3.25rem;border-radius:var(--leaf-sm);
  display:grid;place-items:center;font-family:var(--font-display);
  font-weight:800;font-size:1.125rem;letter-spacing:.02em;
  background:var(--nh-green-100);color:var(--nh-green-900);
}
.aval-card.centro .aval-sigla{background:rgb(255 255 255/.18);color:#fff}
.aval-estrelas{display:flex;gap:.15rem}
.aval-estrelas svg{width:1.05rem;height:1.05rem;color:var(--nh-amber-500)}
.aval-nome{font-family:var(--font-display);text-transform:uppercase;font-weight:800;
  font-size:1rem;letter-spacing:-.01em;margin:.35rem 0 0;line-height:1.1}

.aval-texto{margin:0;font-size:1.0625rem;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.aval-quando{position:absolute;left:2rem;right:2rem;bottom:2rem;margin:0;
  font-size:.9375rem;color:var(--fg-muted)}
.aval-card.centro .aval-quando{color:rgb(255 255 255/.78)}

.aval-setas{position:absolute;left:50%;bottom:1.25rem;transform:translateX(-50%);
  display:flex;gap:.6rem;z-index:20}
.aval-seta{
  width:3.25rem;height:3.25rem;display:grid;place-items:center;cursor:pointer;
  background:#fff;border:2px solid var(--border-strong);border-radius:var(--leaf-sm);
  color:var(--fg);transition:background var(--ease) .25s,color var(--ease) .25s,
  border-color var(--ease) .25s;
}
.aval-seta:hover{background:var(--action);border-color:var(--action);color:#fff}
.aval-seta svg{width:1.35rem;height:1.35rem}

/* resumo da nota, acima do carrossel */
.aval-nota{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin:1.75rem 0 0}
.aval-nota-num{font-family:var(--font-display);font-weight:800;
  font-size:clamp(2.5rem,2rem + 2vw,3.5rem);line-height:1;color:var(--fg)}
.aval-nota .aval-estrelas svg{width:1.35rem;height:1.35rem}
.aval-nota-txt{font-size:1rem;color:var(--fg-muted)}
.aval-nota-txt a{color:var(--action);font-weight:600}

@media (max-width:900px){
  .aval{height:32rem}
  .aval-card{width:17.5rem;height:20rem;padding:1.5rem}
  .aval-quando{left:1.5rem;right:1.5rem;bottom:1.5rem}
  .aval-texto{-webkit-line-clamp:6;font-size:1rem}
}
@media (prefers-reduced-motion:reduce){
  .aval-card{transition:none}
}


/* ---------- QUEBRA DE LINHA, REGRA GERAL ----------------------
   Vale para todo texto corrido do site. Palavra órfã no fim do
   parágrafo é o defeito que mais tira a sensação de acabamento.  */
.head p, .phero-lede, .xhero-lede p, .bi-body, .hist-txt,
.servico p, .step p, .item p, .event p, .qa-body p, .leitura p,
.marco p, .canal span, .aval-texto, .pop-lede, .form-nota{
  text-wrap:pretty;
}
h1.display, h2.display, .bi-pt, .xhero-title, .hist h3{text-wrap:balance}


/* ---------- ESTRELAS COM FRAÇÃO -------------------------------
   4,9 não são cinco estrelas cheias. Duas camadas: a cinza por
   baixo, a âmbar por cima recortada na proporção exata da nota.
   Arredondar para cima seria inflar a avaliação da igreja.       */
.estrelas-nota{position:relative;display:inline-flex;line-height:0}
.estrelas-nota .fundo{display:flex;gap:.15rem;color:var(--border-strong)}
.estrelas-nota .frente{display:flex;gap:.15rem;color:var(--nh-amber-500);
  position:absolute;inset:0;overflow:hidden;white-space:nowrap}
.estrelas-nota svg{width:1.35rem;height:1.35rem;flex:none}


/* =============================================================
   TOUR VIRTUAL 360  (.tour)
   Fachada, igual à do vídeo do YouTube. Um visualizador 360 é
   iframe mais WebGL: se carregar em toda visita, come o LCP e o
   INP, que são os dois critérios do portão da Fase 3. Aqui ele
   só nasce quando a pessoa clica.
   ============================================================= */
.tour{position:relative;border-radius:var(--leaf-lg);overflow:hidden;
  background:var(--nh-ink-900);isolation:isolate}
.tour-capa{display:block;width:100%;border:0;padding:0;background:none;
  cursor:pointer;position:relative;text-align:left}
.tour-capa img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  opacity:.8;transition:transform var(--ease) .7s,opacity var(--ease) .4s}
.tour-capa:hover img{transform:scale(1.04);opacity:.95}
.tour-capa::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgb(0 0 0/.15) 30%,rgb(0 0 0/.72))}

/* o selo redondo com a seta em círculo, que é como se lê "360" */
.tour-selo{position:absolute;inset:0;margin:auto;width:6rem;height:6rem;z-index:2;
  border-radius:999px;background:var(--accent);color:var(--nh-ink-900);
  display:grid;place-items:center;font-family:var(--font-display);font-weight:800;
  font-size:1.25rem;letter-spacing:-.02em;
  transition:transform var(--ease) .35s,background var(--ease) .35s}
.tour-capa:hover .tour-selo{transform:scale(1.08);background:#fff}
.tour-legenda{display:block;position:absolute;left:1.5rem;right:1.5rem;bottom:1.5rem;z-index:2;
  color:#fff;margin:0}
.tour-legenda b{display:block;font-family:var(--font-display);text-transform:uppercase;
  font-weight:800;font-size:1.125rem;letter-spacing:-.01em;margin-bottom:.25rem}
.tour-legenda span{font-size:1rem;color:rgb(255 255 255/.82)}

.tour iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.tour.aberto{aspect-ratio:16/10}
.tour.aberto .tour-capa{display:none}

/* Sem movimento: nada de carregar visualizador que gira sozinho. */
@media (prefers-reduced-motion:reduce){
  .tour-capa:hover img{transform:none}
  .tour-capa:hover .tour-selo{transform:none}
}

.tour-fora{margin:.875rem 0 0;font-size:1rem}

/* No celular a capa é baixa e a legenda de duas linhas corta em cima do selo.
   Aqui ela sai de cima da imagem e passa a correr embaixo, dentro da moldura
   escura do tour, onde cabe inteira. */
@media (max-width:640px){
  .tour-legenda{position:static;padding:1rem 1.125rem 1.125rem}
  .tour-legenda b{font-size:1rem;margin-bottom:.35rem}
  .tour-legenda span{display:block;font-size:.9375rem;line-height:1.45}
  /* o véu e o selo cobrem só a imagem, não a faixa de texto abaixo dela */
  .tour-capa::after{bottom:auto;aspect-ratio:16/10;
    background:linear-gradient(180deg,rgb(0 0 0/.15) 40%,rgb(0 0 0/.45))}
  .tour-selo{inset:0 0 auto 0;margin:0;width:100%;height:auto;aspect-ratio:16/10;
    font-size:1.125rem}
}
.tour-fora a{color:var(--fg-muted);text-decoration:none;border-bottom:1px solid var(--border-strong);
  padding-bottom:1px;transition:color var(--ease) .2s,border-color var(--ease) .2s}
.tour-fora a:hover{color:var(--fg);border-color:var(--fg)}

/* ---------- DECLARAÇÃO DE FÉ (.credo) ------------------------
   O texto oficial da igreja, palavra por palavra. Fica antes do
   acordeão, que é comentário, para não competirem por autoridade. */
.credo{border-radius:var(--leaf-lg);background:var(--bg);
  border:1px solid var(--border);padding:clamp(2rem,5vw,3.5rem)}
.credo-selo{font-family:var(--font-display);text-transform:uppercase;
  font-weight:800;font-size:.75rem;letter-spacing:.22em;color:var(--action);
  margin:0 0 2rem}
.credo p{margin:0 0 1.5rem;font-size:1.125rem;line-height:1.7;text-wrap:pretty}
.credo p:first-of-type{font-size:1.3125rem}
.credo p:last-of-type{margin-bottom:0}
.credo b{font-weight:600}
.credo-fim{margin-top:2.5rem !important;padding-top:2rem;
  border-top:1px solid var(--border);font-family:var(--font-display);
  text-transform:uppercase;font-weight:800;letter-spacing:-.01em;
  font-size:1.25rem !important;color:var(--action)}

/* terceiro canal de contribuição: o cartão, com recorrência.
   A cor dele é definida uma única vez, junto com os outros dois
   canais, mais acima. Duas regras para o mesmo cartão foi o que
   deixou este cartão sem contraste antes. */

/* ---------- MENU MOBILE ----------------------------------------
   O botao existia desde o inicio e nao abria nada: nao havia nem
   estado aberto no CSS nem JavaScript. No celular os links ficavam
   escondidos e o site inteiro so era navegavel pelo rodape.
   A partir daqui o painel abre abaixo do cabecalho, com os
   submenus expandidos, porque no toque nao existe hover.
   --------------------------------------------------------------- */
@media (max-width:1080px){
  .nav.menu-aberto{background:#000}
  .nav.menu-aberto .nav-links{
    display:flex;flex-direction:column;gap:0;
    position:absolute;left:0;right:0;top:4.75rem;
    max-height:calc(100dvh - 4.75rem);overflow-y:auto;
    background:#000;
    padding:.5rem 1.25rem 1.5rem;margin:0;
    border-top:1px solid rgb(255 255 255/.12);
    box-shadow:0 24px 48px rgb(0 0 0/.5);
  }
  .nav.menu-aberto .nav-links > li{border-bottom:1px solid rgb(255 255 255/.08)}
  .nav.menu-aberto .nav-links > li > a{
    display:block;padding:1rem 0;font-size:.875rem;white-space:normal;
  }
  .nav.menu-aberto .nav-links a::after{display:none}
  /* No toque nao ha hover: o submenu ja nasce visivel e recuado. */
  .nav.menu-aberto .sub{
    position:static;opacity:1;visibility:visible;transform:none;
    background:none;box-shadow:none;padding:0 0 .75rem .9rem;
    min-width:0;transition:none;
  }
  .nav.menu-aberto .sub a{white-space:normal;padding:.55rem 0;color:rgb(255 255 255/.72)}
  .nav.menu-aberto .tem-sub > a::after{display:none}
  /* NAO trazer o botao de oracao de volta ao cabecalho: ele
     estoura para fora da tela. O menu ja tem o item proprio. */
  .nav-toggle[aria-expanded="true"]{background:rgb(255 255 255/.14);border-color:rgb(255 255 255/.7)}
  body.menu-travado{overflow:hidden}
}

/* ---------- GRADES POR CLASSE, NAO POR style= -------------------
   Estas larguras viviam em style="" no HTML, e atributo inline
   vence qualquer media query. Resultado no celular: cards de 102px
   com uma palavra por linha, e em /contato/ a pagina ainda rolava
   de lado. Agora a contagem de colunas e classe, e o celular manda.
   --------------------------------------------------------------- */
.servicos.cols-3{grid-template-columns:repeat(3,1fr)}
.servicos.cols-2{grid-template-columns:repeat(2,1fr)}
.regions.cols-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1080px){
  .servicos.cols-3{grid-template-columns:repeat(2,1fr)}
  /* SIMETRIA: ao cair de tres para duas colunas, uma quantidade impar
     de cartoes deixa um sozinho na ultima linha. Aqui o ultimo ocupa
     a linha inteira, e a grade fecha certa em qualquer contagem. */
  .servicos.cols-3 > :last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:820px){
  /* O !important existe por um motivo especifico: as paginas ainda
     no ar trazem grid-template-columns em style=, e atributo inline
     so perde para !important. Sem isto, o celular continua com
     cards de 102px la, mesmo com o CSS novo. */
  .servicos,.servicos.cols-3,.servicos.cols-2{grid-template-columns:1fr !important}
}
@media (max-width:520px){
  .regions,.regions.cols-2{grid-template-columns:1fr !important}
}

/* =============================================================
   27 ANOS  (.jubileu)
   O selo de aniversário é branco vazado sobre a folha verde, e
   só existe em arquivo com fundo transparente. Por isso as duas
   seções nascem escuras: é a única base em que a marca aparece
   inteira, sem contorno falso e sem caixa branca em volta.
   ============================================================= */
.jubileu{position:relative;background:var(--nh-ink-950);color:#fff;overflow:hidden;
  padding-block:clamp(3.5rem,6vw,6rem)}

/* a folha grande de fundo, o mesmo gesto do resto do site */
.jubileu::before{content:"";position:absolute;z-index:0;pointer-events:none;
  width:min(52rem,86vw);aspect-ratio:1;right:-16%;top:-42%;
  border-radius:0 62% 0 62%;
  background:radial-gradient(circle at 34% 34%,rgb(0 104 55/.55),rgb(0 104 55/0) 68%)}
.jubileu > .wrap{position:relative;z-index:1}

.jubileu-grid{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}

/* O selo JÁ é uma folha verde. Pôr outra folha verde atrás dele some
   com a marca e faz duas folhas brigando. Aqui ele fica solto sobre o
   preto, com um halo suave por trás só para não flutuar no vazio. */
.jubileu-selo{position:relative;display:grid;place-items:center}
.jubileu-selo img{width:100%;height:auto;display:block;position:relative;z-index:1}
.jubileu-selo::before{content:"";position:absolute;z-index:0;
  width:130%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgb(98 178 86/.22),rgb(98 178 86/0) 62%)}

.jubileu .eyebrow{color:var(--nh-amber-500)}
.jubileu h2{margin:1rem 0 0}
.jubileu-lede{margin:1.5rem 0 0;max-width:52ch;font-size:1.125rem;line-height:1.7;
  color:rgb(255 255 255/.86)}
.jubileu-versiculo{margin:1.5rem 0 0;max-width:46ch;
  font-family:var(--font-display);font-weight:300;font-size:1.25rem;line-height:1.45;
  color:var(--nh-green-500);font-style:italic}
.jubileu-versiculo b{display:block;font-style:normal;font-weight:800;font-size:.8125rem;
  letter-spacing:.14em;text-transform:uppercase;margin-top:.5rem;color:rgb(255 255 255/.5)}
.jubileu .phero-actions,.jubileu .dm-actions{margin-top:2rem}

@media (max-width:860px){
  .jubileu-grid{grid-template-columns:1fr;gap:2.25rem;justify-items:start}
  .jubileu-selo{width:min(15rem,52vw)}
  .jubileu::before{right:-30%;top:auto;bottom:-28%}
}

/* ---- o destaque da linha do tempo, em /quem-somos/ ----------- */
.jubileu-tempo{text-align:center;scroll-margin-top:7rem}
.jubileu-tempo .jubileu-selo{width:min(17rem,54vw);margin:0 auto}
.jubileu-tempo h2{max-width:20ch;margin-inline:auto}
.jubileu-tempo .jubileu-lede{margin-inline:auto;text-align:center;max-width:56ch}

.jubileu-arco{display:flex;align-items:center;justify-content:center;gap:1.25rem;
  margin-top:2.5rem;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.5rem,1.1rem + 1.8vw,2.25rem);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.jubileu-arco span{color:rgb(255 255 255/.55)}
.jubileu-arco i{flex:1;max-width:9rem;height:2px;font-style:normal;
  background:linear-gradient(90deg,rgb(98 178 86/.15),var(--nh-green-500),rgb(255 185 92/.9))}
.jubileu-arco b{color:var(--nh-amber-500)}

/* a linha do tempo no escuro, com o marcador na folha */
.jubileu-tempo .tempo{text-align:left;margin-top:3.5rem}
.jubileu-tempo .marco{grid-template-columns:10rem 1fr;
  border-top-color:rgb(255 255 255/.14);padding-block:2.25rem}
.jubileu-tempo .marco:last-child{border-bottom-color:rgb(255 255 255/.14)}
.jubileu-tempo .marco .marco-ano{color:var(--nh-green-500)}
.jubileu-tempo .marco h3{color:#fff}
.jubileu-tempo .marco p{color:rgb(255 255 255/.78)}
@media (max-width:760px){.jubileu-tempo .marco{grid-template-columns:1fr}}

/* o versículo dentro da área de conclusão âmbar */
.cta-versiculo{margin:1.75rem 0 0;padding:0 0 0 1.125rem;max-width:44ch;
  border-left:3px solid var(--nh-green-700)}
.cta-versiculo p{margin:0;font-family:var(--font-display);font-weight:300;
  font-size:1.1875rem;line-height:1.45;letter-spacing:-.01em;color:var(--nh-ink-900)}
.cta-versiculo cite{display:block;margin-top:.5rem;font-style:normal;
  font-family:var(--font-display);font-weight:800;font-size:.75rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--nh-green-700)}

/* Retrato ao lado do texto, em bloco de biografia. A foto vertical
   sozinha fica muito mais alta que o texto e abre um vão estranho;
   aqui ela entra numa proporção mais próxima da altura do texto. */
/* O Renan, em 25/09/2026: "o texto podia ser mais embaixo, junto a foto do lado
   esquerdo". O retrato e 4/5, bem mais alto que o texto; com align-items:start o
   bloco de texto ficava colado no topo e sobrava um vao embaixo. Centralizado, ele
   acompanha a foto. No celular a grade empilha e isto nao tem efeito. */
.split-retrato{align-items:center}
.split-retrato img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center top;
  border-radius:var(--leaf);display:block}
@media (max-width:900px){.split-retrato img{aspect-ratio:4/3}}

/* =============================================================
   SIMETRIA DE TEXTO: nada de palavra sozinha na última linha
   Duas camadas. O text-wrap resolve nos navegadores que já o
   entendem; o &nbsp; entre as duas últimas palavras, aplicado no
   HTML, garante o resto. Títulos usam balance, que reparte as
   linhas por igual; corpo de texto usa pretty, que evita a órfã.
   ============================================================= */
p,li,dd,summary,figcaption,blockquote p,.lede,.answer,.jubileu-lede,
.event-body p,.servico p,.step p,.marco p,.tile p,.fact dd,.hist-txt{
  text-wrap:pretty}
h1,h2,h3,h4,.display,.eyebrow,.step h3,.servico h3,.event-body h3,
.marco h3,.door b,.region b,summary{text-wrap:balance}

/* =============================================================
   CORRECOES DE CELULAR, 19/09/2026 (migracao para o dominio principal)

   1. Item de grade nao encolhe sozinho: o padrao e min-width:auto, e
      com ele a coluna nunca fica menor que o conteudo. Em /ministerios/
      a foto media 446px numa tela de 390 e empurrava a pagina de lado.
   2. .junto guarda duas palavras na mesma linha, para nenhuma sobrar
      sozinha no fim do paragrafo. Em tela estreita isso vira um bloco
      maior que a tela, entao no celular ele cede.
   ============================================================= */
.split-media,.split-texto{min-width:0}
.split-media img,.split-media video{max-width:100%}
.junto{white-space:nowrap}
@media (max-width:760px){
  .junto{white-space:normal}
}

/* =============================================================
   ESQUEMA DE COR DECLARADO (19/09/2026)

   Sem esta linha o navegador nao sabe que a pagina foi desenhada
   para fundo claro, e o Chrome fica livre para escurecer o site
   por conta propria. Foi o que aconteceu: o site aparecia com um
   veu cinza por cima, enquanto os outros sites da mesma janela
   continuavam claros, porque esses declaram o proprio esquema.
   ============================================================= */
:root{color-scheme:light}

/* =============================================================
   NUNCA DECEPAR CABECA (19/09/2026)

   Toda midia com object-fit:cover dentro de um quadro de outra
   proporcao perde parte da imagem. Com a ancora no centro, o que
   sai e metade em cima e metade embaixo, e em foto de gente o que
   esta em cima e a cabeca.

   Quatro fotos estavam cortando cabeca e foram ancoradas uma a
   uma, por style inline na propria tag, porque a altura certa
   depende de onde esta a cabeca mais alta de CADA foto:
     visita/       boas-vindas.webp   center 24%
     ministerios/  kids-palco.webp    center 25%
     home          casa-tile.webp     center top
     home          kids.webp          center 25%

   Ao trocar qualquer foto de pessoa, conferir de novo. A conta e:
   excedente = 1 - (altura do quadro / altura da imagem escalada);
   corte no topo = ancora x excedente. Se a cabeca mais alta estiver
   acima desse corte, ela vai ser decepada.
   ============================================================= */

/* =============================================================
   DOACAO EM TELA ESTREITA (19/09/2026)

   Em 360px a pagina rolava de lado. Duas causas somadas, as duas
   do mesmo tipo: o cartao e item de grade, e item de grade nasce
   com min-width:auto, ou seja, nunca fica menor que o conteudo;
   e o conteudo mais largo e o endereco "give@ineorlando.org",
   que e uma palavra so e nao quebra em lugar nenhum.

   Sem isso o cartao media 349px dentro de uma coluna de 312px,
   e empurrava a pagina inteira para o lado.
   ============================================================= */
.canal-doar{min-width:0}
.canal-doar .copiar{min-width:0}
.canal-doar .copiar span,
.canal-doar .copiar{overflow-wrap:anywhere}

/* =============================================================
   PASSOS DA VISITA NO CELULAR (19/09/2026)

   Quando a secao tem QUATRO passos, a regra `.steps:has(> :last-child:
   nth-child(4))` manda duas colunas. Ela tem especificidade maior que o
   `.steps{grid-template-columns:1fr}` da media query do celular, e
   especificidade vence ordem: o telefone ficava com duas colunas de 153px,
   cartoes de 153x115, e em 320px ainda empurrava a pagina para o lado.

   Aqui a mesma forma do seletor e repetida dentro da media query, para
   empatar em especificidade e ganhar por vir depois.
   ============================================================= */
@media (max-width:760px){
  .steps,
  .steps:has(> :last-child:nth-child(4)){grid-template-columns:1fr;gap:2.5rem}
}

/* Origem do resumo do culto. O Google recomenda contar como o conteudo
   foi criado (F28); aqui isso e texto de apoio, no tom do resto da pagina,
   e nunca disputa a leitura com o resumo. */
.resumo-fonte{color:var(--fg-muted);font-size:.95rem;line-height:1.6;
  margin-top:1.6rem;max-width:46rem}

/* Texto corrido na medida de leitura, mas alinhado a esquerda com o
   titulo da secao, em vez de centrado no bloco. */
.leitura.leitura-esq{margin-inline:0}

/* A lista de todos os cultos publicados, dentro do acervo.
   Ela existe para que cada pagina de sermao tenha um link de verdade
   apontando para ela: dado estruturado nao e link, e sermao novo nunca tem
   um mais novo para linka-lo. O sermoes.js troca este bloco pelos cartoes
   quando o JavaScript roda, entao na pratica quem le isto e quem nao executa
   script, rastreador incluido. */
.acervo-todos{grid-column:1/-1;margin-top:1rem}
.acervo-todos h3{font-size:1rem;margin:0 0 .6rem}
.acervo-todos ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.acervo-todos a{text-decoration:underline;text-underline-offset:.2em}
.acervo-todos span{font-size:.85em}

/* =============================================================
   PÍLULA FIXA DA NEWSLETTER x FORMULÁRIOS (rodada 4)

   A .news-fixo é fixa no canto inferior direito e cobria o botão de
   tentar de novo de um formulário que acabou de falhar, bem na hora em
   que a pessoa mais precisa dele. Enquanto qualquer formulário da
   página está em uso (foco dentro dele) ou existe um aviso de falha
   visível, a pílula some: ela volta assim que a pessoa termina.
   ============================================================= */
body:has(.form:focus-within) .news-fixo,
body:has(.aviso-falha) .news-fixo{
  display:none;
}
/* Reforço sem :has(), ver rodada 5 mais abaixo: body.sem-pilula. */

/* O botão de enviar/tentar de novo e o próprio aviso de falha ganham
   uma folga da dobra da tela ao rolar até eles: sem isto, o
   scrollIntoView({block:'end'}) podia encostar a borda do botão bem em
   cima da dobra (ou um ou dois pixels abaixo dela). */
.form .btn[type="submit"],
.aviso-falha{
  scroll-margin-bottom:6rem;
}

/* =============================================================
   MARCADOR "OPCIONAL" DENTRO DOS POPUPS (rodada 4)

   O rótulo herda o texto em caixa alta e o letter-spacing largo do
   .campo label; o .opc precisa da mesma leitura discreta que o
   "(opcional)" das páginas tem fora dos popups: minúsculo, sem
   espaçamento de letra exagerado, e em tom mais claro que o resto do
   rótulo.
   ============================================================= */
.campo label .opc{
  text-transform:none;font-weight:400;letter-spacing:.02em;
  font-family:var(--font-sans);font-size:.875rem;color:var(--fg-muted);
}

/* =============================================================
   PÍLULA FIXA x QUALQUER ESTADO DE FORMULÁRIO (rodada 5)

   O :has() da rodada 4 não cobria todo estado que precisa da pílula
   fora do caminho (o painel de sucesso com o botão do WhatsApp, a nota
   de falha da assinatura escondida por [hidden] em vez de classe) e
   não existe em todo navegador. O assets/newsletter.js agora decide
   isto em JavaScript, cobrindo qualquer <dialog> aberto, foco dentro
   de um formulário, aviso de falha, painel de sucesso e nota de
   assinatura, e alterna a classe "sem-pilula" no body. O !important
   garante que esta regra vale mesmo se alguma outra folha de estilo
   tentar forçar a pílula visível. */
body.sem-pilula .news-fixo{
  display:none!important;
}

/* =============================================================
   POPUP DA NEWSLETTER EM TELA BAIXA (rodada 5)

   Em 320×640 (e telas com pouca altura em geral) o botão de assinar
   nascia abaixo da dobra, dentro do próprio popup: a pessoa precisava
   rolar a caixa para achar o botão que ela acabou de abrir a caixa
   para apertar. O espaçamento aperta só quando a altura da tela é
   pequena; a cadência ("toda terça, um e-mail") e a escolha de
   idioma continuam ali, só que mais compactas.
   ============================================================= */
@media (max-height:700px){
  .pop-corpo{padding:1.1rem 1.35rem}
  .pop-selo{width:2rem;height:2rem;margin-bottom:.6rem}
  .pop h2{font-size:1.3rem;margin-bottom:.5rem;line-height:1.05}
  .pop-lede{margin-bottom:.85rem;font-size:.9rem}
  .pop .form{gap:.65rem}
  .pop-dupla{gap:.65rem}
  .idiomas{gap:.4rem}
  .idioma span{padding:.6rem .75rem;font-size:.8125rem}
  .pop-nota{margin-top:.5rem;font-size:.6875rem}
  .pop-nota-assinatura{margin-bottom:.9rem}
}

/* ---------- EVENTOS · AGENDA VAZIA ------------------------------
   Até 25/09/2026 uma agenda sem nenhum encontro virava uma frase cinza
   sozinha (.lede.muted), a única parte das duas páginas de eventos sem
   nenhum desenho. Agora é um cartão com a mesma moldura, o mesmo ícone
   de calendário dos cartões de verdade e um botão que leva a algo real
   (a agenda completa, na home; os horários de culto, na própria agenda,
   onde já não há mais agenda para mostrar). Tokens reaproveitados do
   resto do sistema, nenhum valor novo inventado aqui. */
.event-empty{
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;
  text-align:center;padding:3.5rem 2rem;border-radius:var(--leaf);
  background:var(--bg-muted);border:1px dashed var(--border-strong);
}
.event-empty-icone{
  width:3.25rem;height:3.25rem;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--nh-green-100);color:var(--action);
}
.event-empty-icone svg{width:1.5rem;height:1.5rem}
.event-empty p{margin:0;max-width:46ch;color:var(--fg-muted);
  font-size:1.0625rem;line-height:1.6}
.event-empty .event-go{align-self:center}

/* Maneiras de contribuir (/doacao/ e /en/give/): quem recebe cada contribuição e por onde.
   Dízimo e oferta ficam juntos sob a igreja; o apoio ao escritório fica sob o escritório. */
.formas{display:grid;grid-template-columns:2fr 1fr;gap:1.5rem;margin-top:1.25rem}
.formas-rotulo{margin:3rem 0 0}
.forma-grupo{border-radius:var(--leaf);padding:1.75rem 1.75rem 2rem;display:flex;flex-direction:column;
  gap:1.25rem;min-width:0}
.forma-igreja{background:var(--nh-green-100)}
.forma-escritorio{background:var(--nh-amber-100)}
.forma-destino{margin:0;font-family:var(--font-display);text-transform:uppercase;font-weight:700;
  font-size:.8125rem;letter-spacing:.14em;color:var(--nh-ink-700)}
.forma-destino b{display:block;margin-top:.35rem;font-size:1.125rem;letter-spacing:-.01em;
  font-weight:800;color:var(--nh-ink-900);text-transform:none}
.forma-itens{display:grid;grid-template-columns:1fr 1fr;gap:1rem;flex:1}
.forma{background:var(--nh-paper-000);border-radius:var(--leaf-sm);padding:1.25rem 1.25rem 1.5rem;
  position:relative;min-width:0}
.forma::before{content:"";position:absolute;left:1.25rem;top:0;width:2.5rem;height:4px}
.forma-igreja .forma::before{background:var(--nh-green-700)}
.forma-escritorio .forma::before{background:var(--nh-amber-500)}
.forma-n{display:block;font-family:var(--font-display);font-weight:300;font-size:2rem;line-height:1;
  color:var(--nh-ink-500);margin:.5rem 0 .75rem}
.forma h3{margin:0 0 .5rem;font-family:var(--font-display);text-transform:uppercase;font-weight:800;
  font-size:1.125rem;letter-spacing:-.01em;color:var(--nh-ink-900)}
.forma p{margin:0;font-size:1rem;line-height:1.55;color:var(--fg-muted)}
.forma-ir{align-self:flex-start;font-family:var(--font-display);text-transform:uppercase;font-weight:700;
  font-size:.875rem;letter-spacing:.06em;color:var(--nh-ink-900);text-decoration:underline;
  text-underline-offset:.3em}
.escritorio-doar{margin-top:3rem;max-width:760px}
.escritorio-doar .lede{margin-top:1rem}
.escritorio-doar .btn{margin-top:1.75rem}
@media (max-width:900px){.formas{grid-template-columns:1fr}}
@media (max-width:520px){.forma-itens{grid-template-columns:1fr}}