/* ==========================================================================
   Vem Igreja — "Não só ouvir. Viver."
   Marca: laranja da onda. Tipografia com contraste extremo (Outfit 200 vs 700),
   cenas presas ao scroll (--p), movimento que muda a cena — nunca véu sobre conteúdo.
   ========================================================================== */

@font-face { font-family: 'Outfit'; src: url('/shared/fonts/outfit-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('/shared/fonts/figtree-var.woff2') format('woff2'); font-weight: 300 600; font-display: swap; }
@font-face { font-family: 'Marcellus'; src: url('/shared/fonts/marcellus-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --laranja: #F4700A;
  --laranja-2: #FF8C2E;
  --laranja-escuro: #B84F05;
  --creme: #FFF8F0;
  --areia: #F7EADB;
  --noite: #1A1512;
  --noite-2: #241C17;
  --tinta: #221A15;
  --tinta-suave: #6B5A4E;
  --branco: #FFFFFF;
  --fonte-display: 'Outfit', system-ui, sans-serif;
  --fonte-corpo: 'Figtree', system-ui, -apple-system, sans-serif;
  --fonte-verso: 'Marcellus', 'Times New Roman', serif;
  --largura: 1160px;
  --transicao: .35s cubic-bezier(.4, 0, .2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 5rem; } /* header fixo não cobre o alvo dos links do menu */
html, body { overflow-x: clip; }
body { font-family: var(--fonte-corpo); font-weight: 380; color: var(--tinta); background: var(--noite); line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
ul { list-style: none; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--laranja); color: #fff; padding: .6rem 1rem; }
.skip-link:focus { left: 0; }

/* ---------- Tipografia ---------- */
h1, h2, h3 { font-family: var(--fonte-display); font-weight: 200; line-height: 1.05; letter-spacing: -.01em; }
h1 { font-size: clamp(3rem, 9vw, 6.4rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); margin-bottom: 1.1rem; }
h3 { font-size: 1.45rem; font-weight: 500; }
h1 em, h2 em, .cena-frase em { font-style: normal; font-weight: 700; color: var(--laranja); }
p { max-width: 62ch; }
.olho { font-size: .78rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; margin-bottom: 1rem; }
.olho-laranja { color: var(--laranja); }
.olho-claro { color: rgba(255, 248, 240, .8); }
.intro { color: var(--tinta-suave); font-size: 1.08rem; }

/* ---------- Botões ---------- */
.btn { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--fonte-corpo); font-weight: 560; font-size: .98rem; padding: .9rem 1.8rem; border-radius: 999px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao), color var(--transicao); position: relative; overflow: hidden; }
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--laranja-2); outline-offset: 2px; }
.btn-laranja { background: var(--laranja); color: #fff; box-shadow: 0 10px 28px rgba(244, 112, 10, .35); }
.btn-laranja:hover { background: var(--laranja-2); }
.btn-laranja::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent); transition: left .6s ease; }
.btn-laranja:hover::after { left: 130%; }
.btn-vidro { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .45); backdrop-filter: blur(6px); }
.btn-vidro:hover { background: rgba(255, 255, 255, .22); }
.btn-contorno { background: transparent; color: var(--laranja-escuro); border-color: rgba(244, 112, 10, .5); }
.btn-contorno:hover { background: rgba(244, 112, 10, .08); }
.ic { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }

/* ---------- Header ---------- */
.topo { position: fixed; inset: 0 0 auto; z-index: 100; transition: box-shadow var(--transicao); }
.topo::before { content: ''; position: absolute; inset: 0 0 -60%; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(26, 21, 18, .6) 0%, rgba(26, 21, 18, .25) 55%, rgba(26, 21, 18, 0) 100%); transition: background var(--transicao), inset var(--transicao); }
.topo.rolou::before { inset: 0; background: rgba(255, 248, 240, .94); backdrop-filter: blur(10px); }
.topo.rolou { box-shadow: 0 1px 0 rgba(34, 26, 21, .08); }
body:has(.menu-chk:checked) { overflow: hidden; }
.topo-inner { max-width: var(--largura); margin: 0 auto; padding: .8rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.marca { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: #fff; transition: color var(--transicao); animation: marcaEntra .7s ease-out both; }
.marca-simbolo { width: 44px; height: 44px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)); }
.marca-nome { font-family: var(--fonte-display); font-weight: 300; font-size: 1.45rem; letter-spacing: .01em; }
.marca-nome b { font-weight: 700; }
.topo.rolou .marca { color: var(--tinta); }
.topo.rolou .marca-nome b { color: var(--laranja); }
@keyframes marcaEntra { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.menu { display: flex; align-items: center; gap: 1.6rem; }
.menu > a:not(.btn) { color: #fff; text-decoration: none; font-size: .95rem; font-weight: 480; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color var(--transicao), border-color var(--transicao); }
.topo.rolou .menu > a:not(.btn) { color: var(--tinta); }
.menu > a:not(.btn):hover { border-color: var(--laranja); color: var(--laranja); }
.btn-menu { padding: .6rem 1.2rem; font-size: .9rem; }
.menu-chk, .menu-btn { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; isolation: isolate; overflow: clip; background: var(--noite); }
.hero-foto, .hero-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; z-index: -3; }
.hero-foto { animation: respiraHero 24s ease-in-out infinite alternate; }
@keyframes respiraHero { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero-veu { position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 80% 60% at 50% 45%, rgba(244, 112, 10, .28) 0%, rgba(26, 21, 18, 0) 70%), linear-gradient(180deg, rgba(26, 21, 18, .55) 0%, rgba(26, 21, 18, .5) 50%, rgba(26, 21, 18, .92) 100%); }
/* Ondas da marca em movimento contínuo — o "M" do logo virou horizonte */
.ondas { position: absolute; left: 0; right: 0; width: 100%; pointer-events: none; }
.ondas-hero { bottom: -2vh; height: 38vh; z-index: -1; opacity: .9; }
.onda { fill: none; stroke: var(--laranja); stroke-width: 2.5; stroke-linecap: round; animation: desliza 14s linear infinite; }
.onda-1 { opacity: .85; }
.onda-2 { opacity: .45; stroke-width: 1.5; animation-duration: 19s; animation-direction: reverse; }
.onda-3 { opacity: .3; stroke-width: 1.2; animation-duration: 24s; }
@keyframes desliza { from { transform: translateX(0); } to { transform: translateX(-800px); } }
.hero-conteudo { text-align: center; color: #fff; padding: 8rem 1.25rem 6rem; position: relative; z-index: 1; }
.hero .olho { color: rgba(255, 255, 255, .85); max-width: none; }
.hero h1 { text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.hero-sub { max-width: 36rem; margin: 1.5rem auto 2.4rem; font-size: 1.12rem; font-weight: 400; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 16px rgba(0, 0, 0, .45); }
.hero-acoes { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.hero-selo { position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .85); font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; display: flex; align-items: center; gap: .8rem; white-space: nowrap; z-index: 1; }
.hero-selo::before, .hero-selo::after { content: ''; width: 42px; height: 1px; background: var(--laranja); }
/* título palavra por palavra (site.js divide em .h1-palavra) */
html.js .hero h1:not(.dividido) { opacity: 0; }
.h1-palavra { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .1em .05em .22em; margin: -.1em -.05em -.22em; }
.h1-palavra > span { display: inline-block; transform: translateY(115%); opacity: 0; animation: sobePalavra 1.05s cubic-bezier(.2, .75, .2, 1) forwards; animation-delay: calc(.3s + var(--i, 0) * .14s); }
@keyframes sobePalavra { to { transform: none; opacity: 1; } }
html.js .hero .olho, html.js .hero-sub, html.js .hero-acoes, html.js .hero-selo { opacity: 0; animation: sobeSuave .9s ease-out forwards; }
html.js .hero .olho { animation-delay: .1s; }
html.js .hero-sub { animation-delay: 1s; }
html.js .hero-acoes { animation-delay: 1.2s; }
html.js .hero-selo { animation-delay: 1.5s; animation-name: sobeSelo; }
@keyframes sobeSuave { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sobeSelo { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- Seções ---------- */
.sec { padding: clamp(4rem, 9vw, 7rem) 0; }
.sec-creme { background: var(--creme); }
.sec-areia { background: linear-gradient(180deg, var(--creme), var(--areia)); }
.sec-noite { background: var(--noite); color: var(--creme); position: relative; overflow: clip; }
.sec-noite p { color: rgba(255, 248, 240, .82); }
.sec-noite > .wrap { position: relative; z-index: 1; }
.wrap { max-width: var(--largura); margin: 0 auto; padding: 0 1.25rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }

/* Visitar */
.proximo-culto { min-height: 1.7em; font-size: 1.12rem; color: var(--tinta-suave); margin-bottom: 1.8rem; }
.proximo-culto strong { color: var(--laranja-escuro); font-weight: 600; }
.cultos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-bottom: 3rem; }
.culto { background: #fff; border-radius: 18px; padding: 1.6rem 1.5rem; display: grid; gap: .15rem; box-shadow: 0 14px 40px rgba(34, 26, 21, .08); border: 2px solid transparent; transition: transform var(--transicao), border-color var(--transicao); position: relative; }
.culto:hover { transform: translateY(-4px); }
.culto.proximo { border-color: var(--laranja); }
.culto.proximo::after { content: 'Próximo'; position: absolute; top: 1rem; right: 1rem; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: #fff; background: var(--laranja); padding: .25rem .6rem; border-radius: 999px; }
.culto-dia { font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--laranja-escuro); font-weight: 600; }
.culto-hora { font-family: var(--fonte-display); font-weight: 200; font-size: clamp(2.6rem, 4vw, 3.4rem); line-height: 1; letter-spacing: -.02em; }
.culto-nome { color: var(--tinta-suave); font-size: .95rem; }
.onde { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.onde-end { margin: .7rem 0 .5rem; font-size: 1.08rem; }
.onde-dica { color: var(--tinta-suave); margin-bottom: 1.4rem; }
.onde-acoes { display: flex; gap: .8rem; flex-wrap: wrap; }
.onde-mapa { aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; box-shadow: 0 24px 60px rgba(34, 26, 21, .18); background: var(--areia); }
.onde-mapa iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.85); }

/* Sobre */
.moldura { position: relative; }
.moldura img { border-radius: 22px; box-shadow: 0 30px 70px rgba(34, 26, 21, .22); height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.moldura figcaption { position: absolute; left: -1rem; bottom: 1.8rem; background: var(--laranja); color: #fff; border-radius: 18px; padding: 1rem 1.3rem; display: flex; align-items: center; gap: .7rem; box-shadow: 0 16px 40px rgba(244, 112, 10, .4); }
.numero { font-family: var(--fonte-display); font-weight: 200; font-size: 3.4rem; line-height: 1; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.numero-rotulo { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1.25; font-weight: 600; }
.somos { margin-top: 1.8rem; display: grid; gap: 1rem; }
.somos li { display: grid; gap: .1rem; padding-left: 1.2rem; border-left: 3px solid var(--laranja); }
.somos strong { font-weight: 600; }
.somos span { color: var(--tinta-suave); font-size: .95rem; }
#sobre p + p { margin-top: .9rem; }

/* ---------- Cenas presas (motor --p em site.js) ---------- */
.cena { --p: 1; position: relative; height: 260vh; background: var(--noite); }
html.js .cena { --p: 0; }
.palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; isolation: isolate; display: grid; align-items: center; color: var(--creme); }
.cena-foto, .cena-veu { position: absolute; inset: 0; }
.cena-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.cena-foto { --c: calc((var(--n) + .5) / 3); --entra: clamp(0, (var(--p) - (var(--c) - .1667)) / .09, 1); --sai: clamp(0, ((var(--c) + .1667) - var(--p)) / .09, 1); opacity: min(var(--entra), var(--sai)); }
.cena-foto img { transform: scale(calc(1.16 - var(--p) * .1)); }
.cena-foto[style*="--n: 0"] { --entra: 1; }
.cena-foto[style*="--n: 2"] { --sai: 1; }
.cena-veu { z-index: 1; background: linear-gradient(100deg, rgba(26, 21, 18, .94) 0%, rgba(26, 21, 18, .78) 45%, rgba(26, 21, 18, .35) 100%); }
.cena-conteudo { position: relative; z-index: 2; width: 100%; }
.cena-pilha { display: grid; max-width: 720px; }
.cena-frase, .verso { grid-area: 1 / 1; --c: calc((var(--n) + .5) / 3); --entra: clamp(0, (var(--p) - (var(--c) - .1667)) / .07, 1); --sai: clamp(0, ((var(--c) + .1667) - var(--p)) / .07, 1); opacity: min(var(--entra), var(--sai)); transform: translateY(calc((var(--p) - var(--c)) * -90px)); }
.cena-frase[style*="--n: 0"], .verso[style*="--n: 0"] { --entra: 1; }
.cena-frase[style*="--n: 2"], .verso[style*="--n: 2"] { --sai: 1; }
.cena-frase { font-family: var(--fonte-display); font-weight: 200; font-size: clamp(2rem, 4.8vw, 3.8rem); line-height: 1.12; max-width: none; color: #fff; }
.cena-barra { position: relative; height: 2px; max-width: 720px; margin-top: 2rem; background: rgba(255, 248, 240, .15); border-radius: 2px; }
.cena-barra::before { content: ''; position: absolute; inset: 0; width: calc(var(--p) * 100%); background: var(--laranja); border-radius: 2px; }
/* versículos: fundo escuro com as ondas, texto em serifa clássica */
.cena-versos .palco { background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(244, 112, 10, .18) 0%, rgba(26, 21, 18, 0) 70%), var(--noite); }
.ondas-versos { top: 50%; height: 60vh; transform: translateY(-50%); opacity: .3; z-index: 0; }
.cena-centro { text-align: center; }
.cena-centro .cena-pilha, .cena-centro .cena-barra { margin-inline: auto; }
.verso p { font-family: var(--fonte-verso); font-size: clamp(1.5rem, 3.2vw, 2.5rem); line-height: 1.35; color: #fff; max-width: none; }
.verso footer { margin-top: 1.2rem; color: var(--laranja-2); letter-spacing: .2em; text-transform: uppercase; font-size: .82rem; font-weight: 600; }

/* Valores */
.valores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 2.6rem; }
.valor { background: #fff; border-radius: 22px; overflow: hidden; box-shadow: 0 14px 40px rgba(34, 26, 21, .1); transition: transform var(--transicao), box-shadow var(--transicao); }
.valor:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(34, 26, 21, .16); }
.valor-foto { aspect-ratio: 4 / 3; overflow: hidden; }
.valor-foto img { width: 100%; height: 100%; object-fit: cover; }
.valor-corpo { padding: 1.5rem 1.6rem 1.8rem; }
.valor-corpo h3 { color: var(--laranja-escuro); margin-bottom: .5rem; }
.valor-corpo p { color: var(--tinta-suave); font-size: .97rem; }

/* Vídeo */
.wrap-video { text-align: center; }
.wrap-video h2, .video-sub { margin-inline: auto; }
.video-sub { color: var(--tinta-suave); font-size: 1.05rem; }
.video-caixa { position: relative; max-width: 940px; margin: 2.4rem auto 0; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgba(34, 26, 21, .3); cursor: pointer; aspect-ratio: 16 / 9; background: var(--noite); }
.video-caixa img, .video-caixa iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
.video-caixa picture { position: absolute; inset: 0; }
.video-play { position: absolute; inset: 0; margin: auto; width: 88px; height: 88px; border-radius: 50%; border: 0; cursor: pointer; background: var(--laranja); color: #fff; display: grid; place-items: center; transition: transform var(--transicao), background var(--transicao); box-shadow: 0 10px 40px rgba(0, 0, 0, .4); }
.video-play::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--laranja-2); animation: pingAnel 2.6s ease-out infinite; }
.video-play svg { width: 36px; height: 36px; fill: currentColor; margin-left: 4px; }
.video-caixa:hover .video-play { transform: scale(1.08); background: var(--laranja-2); }
@keyframes pingAnel { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.8); } }

/* Oração */
.grid-oracao { align-items: start; }
.primeira { margin: 1.6rem 0 1.8rem; display: grid; gap: 1rem; }
.primeira li { display: grid; gap: .1rem; padding-left: 1.2rem; border-left: 3px solid var(--laranja); }
.primeira strong { font-weight: 600; color: #fff; }
.primeira span { color: rgba(255, 248, 240, .7); font-size: .95rem; }
.form { background: var(--noite-2); border: 1px solid rgba(244, 112, 10, .25); border-radius: 22px; padding: 2rem; display: grid; gap: 1.05rem; }
.form h3 { color: #fff; }
.form-sub { font-size: .95rem; margin-top: -.4rem; }
.campo { display: grid; gap: .35rem; min-width: 0; }
.campo label { font-size: .86rem; font-weight: 560; color: var(--laranja-2); }
.campo label span { color: rgba(255, 248, 240, .5); font-weight: 400; }
.campo input, .campo textarea { font-family: var(--fonte-corpo); font-size: 1rem; color: var(--creme); background: rgba(255, 248, 240, .06); border: 1px solid rgba(255, 248, 240, .2); border-radius: 12px; padding: .75rem .95rem; width: 100%; min-width: 0; -webkit-appearance: none; appearance: none; transition: border-color var(--transicao), background var(--transicao); }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--laranja); background: rgba(255, 248, 240, .1); }
.campo textarea { resize: vertical; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; color: rgba(255, 248, 240, .8); cursor: pointer; }
.check input { accent-color: var(--laranja); margin-top: .25rem; }
.hp { position: absolute; left: -9999px; }
.btn-form { justify-content: center; width: 100%; }
.form-status { font-size: .93rem; min-height: 1.4em; }
.form-status.ok { color: #7ED39A; }
.form-status.erro { color: #F0A0A0; }

/* Bokeh: pontos de luz atrás do conteúdo escuro */
.bokeh { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.bokeh span { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255, 140, 46, .55) 0%, rgba(255, 140, 46, .16) 40%, rgba(255, 140, 46, 0) 70%); animation: derivaBokeh var(--dur) ease-in-out var(--atraso) infinite alternate; }
.bokeh span:nth-child(1) { width: 64px; height: 64px; left: 6%; top: 18%; --dur: 13s; --atraso: 0s; }
.bokeh span:nth-child(2) { width: 40px; height: 40px; left: 28%; top: 72%; --dur: 17s; --atraso: -6s; }
.bokeh span:nth-child(3) { width: 90px; height: 90px; left: 58%; top: 8%; --dur: 21s; --atraso: -3s; opacity: .7; }
.bokeh span:nth-child(4) { width: 34px; height: 34px; left: 74%; top: 64%; --dur: 11s; --atraso: -9s; }
.bokeh span:nth-child(5) { width: 56px; height: 56px; left: 90%; top: 30%; --dur: 15s; --atraso: -12s; }
.bokeh span:nth-child(6) { width: 28px; height: 28px; left: 44%; top: 42%; --dur: 9s; --atraso: -4s; }
@keyframes derivaBokeh { from { transform: translate(0, 0); } to { transform: translate(40px, -70px); } }

/* Rodapé */
.rodape { background: #120E0B; color: rgba(255, 248, 240, .75); padding: 3.4rem 0 calc(4.8rem + env(safe-area-inset-bottom, 0px)); }
.rodape-inner { display: grid; justify-items: center; gap: .9rem; text-align: center; }
.marca-rodape { color: var(--creme); animation: none; }
.marca-rodape .marca-simbolo { width: 52px; height: 52px; }
.rodape-tag { font-family: var(--fonte-display); font-weight: 200; font-size: 1.6rem; color: #fff; max-width: none; }
.rodape-info { font-size: .95rem; max-width: none; }
.rodape-social { display: flex; gap: 1.1rem; margin-top: .4rem; }
.rodape-social a { color: rgba(255, 248, 240, .7); transition: color var(--transicao), transform var(--transicao); }
.rodape-social a:hover { color: var(--laranja-2); transform: translateY(-2px); }
.rodape-social .ic { width: 1.5rem; height: 1.5rem; }
.rodape-fim { font-size: .82rem; color: rgba(255, 248, 240, .45); margin-top: .8rem; max-width: none; }
.rodape-fim a { color: rgba(255, 248, 240, .7); text-decoration: underline; text-underline-offset: 2px; }
.rodape-fim a:hover { color: var(--laranja-2); }

/* WhatsApp flutuante */
.whats-flutuante { position: fixed; right: 1.1rem; bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px)); z-index: 90; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform var(--transicao), opacity var(--transicao); }
.whats-flutuante::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25D366; opacity: 0; animation: pingWhats 4s ease-out infinite; }
@keyframes pingWhats { 0%, 60% { opacity: 0; transform: scale(1); } 66% { opacity: .85; } 100% { opacity: 0; transform: scale(1.9); } }
html.js .whats-flutuante { opacity: 0; pointer-events: none; }
html.js body.passou-hero .whats-flutuante { opacity: 1; pointer-events: auto; }
.whats-flutuante:hover { transform: scale(1.08); }
.whats-flutuante svg { width: 30px; height: 30px; fill: currentColor; }

/* ---------- Coreografia amarrada ao scroll (CSS scroll-driven; sem suporte, fica estático) ---------- */
@supports (animation-timeline: view()) {
  .sec .olho, .sec h2, .sec .intro, .proximo-culto, .culto, .onde-texto, .onde-mapa, .somos li, .primeira li, .form, .moldura, .valor {
    animation: scrubEntra linear both; animation-timeline: view(); animation-range: entry 5% entry 45%;
  }
  .culto:nth-child(2) { animation-range: entry 12% entry 52%; }
  .culto:nth-child(3) { animation-range: entry 19% entry 59%; }
  .valor:nth-child(2) { animation-range: entry 12% entry 52%; }
  .valor:nth-child(3) { animation-range: entry 19% entry 59%; }
  .valor-foto img { animation: panFoto linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  .video-caixa { animation: videoCresce linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; transform-origin: 50% 60%; }
  .hero-foto img { animation: heroAfasta linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
}
@keyframes scrubEntra { from { opacity: 0; transform: translateY(46px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes panFoto { from { transform: scale(1.16) translateY(-5%); } to { transform: scale(1.16) translateY(5%); } }
@keyframes videoCresce { from { transform: scale(.84) translateY(36px); border-radius: 40px; opacity: .55; } to { transform: scale(1.05); border-radius: 18px; opacity: 1; } }
@keyframes heroAfasta { to { transform: scale(1.25) translateY(-6%); filter: brightness(.55); } }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .grid-2, .cultos, .valores, .onde { grid-template-columns: 1fr; }
  .menu-btn { display: grid; gap: 5px; cursor: pointer; padding: .6rem; z-index: 102; }
  .menu-btn span { width: 24px; height: 2px; background: #fff; transition: transform var(--transicao), opacity var(--transicao), background var(--transicao); }
  .topo.rolou .menu-btn span { background: var(--tinta); }
  .menu { position: fixed; inset: 0; background: var(--noite); flex-direction: column; justify-content: center; gap: 1.9rem; transform: translateX(100%); visibility: hidden; transition: transform var(--transicao), visibility 0s var(--transicao); z-index: 101; }
  .menu-chk:checked ~ .menu { visibility: visible; transform: none; transition: transform var(--transicao), visibility 0s; }
  .menu > a:not(.btn) { color: var(--creme) !important; font-size: 1.4rem; font-family: var(--fonte-display); font-weight: 300; }
  .menu-chk:checked ~ .menu-btn { position: fixed; right: 1.25rem; top: 1rem; }
  .menu-chk:checked ~ .menu-btn span { background: var(--creme) !important; }
  .menu-chk:checked ~ .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-chk:checked ~ .menu-btn span:nth-child(2) { opacity: 0; }
  .menu-chk:checked ~ .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hero-acoes .btn { width: min(100%, 320px); justify-content: center; }
  .moldura { max-width: 420px; margin: 0 auto 1rem; }
  .moldura figcaption { left: .6rem; }
  .cena { height: 220vh; }
  .cena-veu { background: linear-gradient(180deg, rgba(26, 21, 18, .55) 0%, rgba(26, 21, 18, .9) 45%, rgba(26, 21, 18, .97) 100%); }
  .cena-foto img { object-position: center 25%; }
  .form { padding: 1.5rem 1.2rem; }
  .ondas-hero { height: 26vh; }
}
@media (max-width: 480px) {
  .hero-selo { font-size: .62rem; letter-spacing: .14em; }
  .hero-selo::before, .hero-selo::after { width: 22px; }
  .culto { padding: 1.3rem 1.3rem; }
}

/* ---------- Acessibilidade ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  html.js .hero h1, html.js .hero .olho, html.js .hero-sub, html.js .hero-acoes, html.js .hero-selo { opacity: 1; }
  .h1-palavra > span { transform: none; opacity: 1; }
  .cena { --p: 1 !important; height: auto; }
  .palco { position: relative; height: auto; padding: 5rem 0; }
  .cena-pilha { gap: 1.4rem; }
  .cena-frase, .verso, .cena-foto { grid-area: auto; opacity: 1 !important; transform: none !important; }
  .cena-foto { display: none; }
}