do .hero") pelo mesmo motivo do fix de .hero-so-imagem acima: esse
aqui é o SUBTÍTULO do formato antigo — sem o escopo, essa regra "ganha" (especificidade maior que uma classe
só) do .hero-texto-canto do formato novo, atropelando o font-size responsivo dele com 1.15rem fixo (bug real,
achado pelo dono em produção: texto do canto "enorme" no celular, "mais ou menos" no PC — o clamp() nunca chegava
a valer). */
.hero-content p { font-size: 1.15rem; opacity: .92; max-width: 620px; margin: 0 auto 26px; }
/* FORMATO NOVO do banner (foi para o oficial em 22/09 — ver views/landing.ejs): a logo (PNG transparente) e o texto
do canto ficam sempre por cima do fundo, na posição escolhida pelo Administrador — nunca são cortados, porque não
fazem mais parte da foto. position:relative no .hero-formato-novo é o que ancora esses dois elementos
(position:absolute) dentro dele. */
.hero-formato-novo { position: relative; }
/* Posição da logo/texto: left/right/top/bottom/transform vêm de variáveis CSS (--logo-pc-... / --logo-mobile-...
etc, geradas por posicaoVars() em landing.ejs a partir das escolhas do Admin) — nunca as duas trocam a mesma
propriedade ao mesmo tempo: o bloco "-pc" vale sempre, e a media query abaixo troca TODAS de uma vez pras
"-mobile" (sem isso, uma posição de PC "vazaria" pro celular). var(...,auto) é o valor de reserva quando aquele
lado específico não foi usado (ex: "esquerda" não define --logo-pc-right).
Tamanho da logo: PC e celular são independentes (pedido do dono, 22/09: "trate separado... assim não tem
problema" — cada tela tem seu próprio layout, o mesmo % podia ficar bom numa e não na outra). --escala-logo-pc e
--escala-logo-mobile vêm de config.logoTamanho/logoTamanhoMobile (100 = 1); a media query troca qual vale, sem
JS. max-height evita que a logo "vaze" para fora da faixa quando o banner enviado for muito baixo (baixa altura)
— object-fit:contain é o que garante que, quando max-height aperta, a logo ENCOLHE INTEIRA (sem espremer/
distorcer); sem isso, um com width fixo + max-height é esticado pelo navegador pra preencher a caixa,
deformando a imagem (bug real, achado pelo dono em produção: "a logo ficou grande e parece distorcida"). */
.hero-logo-overlay {
position: absolute;
left: var(--logo-pc-left, auto);
right: var(--logo-pc-right, auto);
top: var(--logo-pc-top, auto);
bottom: var(--logo-pc-bottom, auto);
transform: var(--logo-pc-transform, none);
width: calc(34% * var(--escala-logo-pc, 1));
max-width: calc(640px * var(--escala-logo-pc, 1));
max-height: 70%;
height: auto;
object-fit: contain;
}
@media (max-width: 760px) {
.hero-logo-overlay {
left: var(--logo-mobile-left, auto);
right: var(--logo-mobile-right, auto);
top: var(--logo-mobile-top, auto);
bottom: var(--logo-mobile-bottom, auto);
transform: var(--logo-mobile-transform, none);
width: calc(34% * var(--escala-logo-mobile, 1));
max-width: calc(640px * var(--escala-logo-mobile, 1));
}
}
/* Frase opcional do canto do banner — em branco no Admin, ela simplesmente não aparece (a tag
nem é desenhada,
ver landing.ejs). Sombra no texto (em vez de caixa de fundo) porque o fundo por trás pode ser qualquer cor,
dependendo da foto de cada igreja. width fixo (em vez de max-width) é de propósito: com max-width, a largura real
do texto muda de acordo com o quanto ele preenche a caixa, e isso desloca o centro quando a posição é
"Centralizado" + espaçamento — bug encontrado e corrigido no mockup de testes antes de vir para o site oficial. */
.hero-texto-canto {
position: absolute;
margin: 0;
left: var(--texto-pc-left, auto);
right: var(--texto-pc-right, auto);
top: var(--texto-pc-top, auto);
bottom: var(--texto-pc-bottom, auto);
transform: var(--texto-pc-transform, none);
width: var(--texto-largura-pc, 46%);
text-align: var(--texto-align-pc, right);
box-sizing: border-box;
color: #fff;
font-size: clamp(calc(.6rem * var(--escala-texto-pc, 1)), calc(1.6vw * var(--escala-texto-pc, 1)), calc(1.05rem * var(--escala-texto-pc, 1)));
line-height: 1.35;
}
/* Fonte escolhida no Admin pro texto do canto — "padrao" usa a var(--fonte) do site de propósito (não é preciso
nada aqui pra ela: fica de fora deste bloco). As outras 4 só existem no navegador se o Admin escolheu essa fonte
(o do Google Fonts só entra no
nesse caso — ver partials/head.ejs), com fallback caso não carregue.
Tamanho do texto: PC e celular são independentes (mesmo pedido/motivo da logo — "trate separado... assim não
tenho que ficar te pedindo"). --escala-texto-pc e --escala-texto-mobile vêm de config.tamanhoTextoBanner/
tamanhoTextoBannerMobile (100 = 1); a media query abaixo troca qual conta, sem JS. */
.hero-texto-canto.fonte-elegante { font-family: 'Playfair Display', Georgia, serif; }
.hero-texto-canto.fonte-moderna { font-family: 'Montserrat', Arial, sans-serif; }
.hero-texto-canto.fonte-manuscrita { font-family: 'Great Vibes', cursive; font-size: clamp(calc(.85rem * var(--escala-texto-pc, 1)), calc(2.2vw * var(--escala-texto-pc, 1)), calc(1.4rem * var(--escala-texto-pc, 1))); }
.hero-texto-canto.fonte-lobster { font-family: 'Lobster', cursive; font-size: clamp(calc(.8rem * var(--escala-texto-pc, 1)), calc(2vw * var(--escala-texto-pc, 1)), calc(1.35rem * var(--escala-texto-pc, 1))); }
.hero-texto-canto.italico { font-style: italic; }
/* Peso da fonte e força da sombra (23/09, pedido do dono: "fica bem fina... negrito ficou forte demais" — quer
ajustar sozinho, sem versão nova toda vez). Cada eixo tem sua própria classe por tela (peso-pc-... / peso-mobile-...,
sombra-pc-... / sombra-mobile-...), aplicada pelo servidor (landing.ejs) e só "ligada" dentro da media query certa —
mesma técnica do tamanho/logo, sem precisar de JS. Sombra "forte" usa 4 sombras pequenas ao redor (efeito de
contorno) + 1 mais larga, em vez de só aumentar o desfoque — lê melhor em qualquer parte da foto (clara ou
escura) sem precisar de negrito. */
.hero-texto-canto.peso-pc-fina { font-weight: 300; }
.hero-texto-canto.peso-pc-normal { font-weight: 400; }
.hero-texto-canto.peso-pc-media { font-weight: 500; }
.hero-texto-canto.peso-pc-negrito { font-weight: 700; }
.hero-texto-canto.sombra-pc-leve { text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.hero-texto-canto.sombra-pc-normal { text-shadow: 0 1px 6px rgba(0,0,0,.65), 0 1px 2px rgba(0,0,0,.85); }
.hero-texto-canto.sombra-pc-forte { text-shadow: -1px 0 3px rgba(0,0,0,.9), 1px 0 3px rgba(0,0,0,.9), 0 -1px 3px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.9), 0 2px 6px rgba(0,0,0,.85); }
@media (max-width: 760px) {
.hero-texto-canto {
left: var(--texto-mobile-left, auto);
right: var(--texto-mobile-right, auto);
top: var(--texto-mobile-top, auto);
bottom: var(--texto-mobile-bottom, auto);
transform: var(--texto-mobile-transform, none);
width: var(--texto-largura-mobile, 46%);
text-align: var(--texto-align-mobile, right);
font-size: clamp(calc(.6rem * var(--escala-texto-mobile, 1)), calc(1.6vw * var(--escala-texto-mobile, 1)), calc(1.05rem * var(--escala-texto-mobile, 1)));
}
.hero-texto-canto.fonte-manuscrita { font-size: clamp(calc(.85rem * var(--escala-texto-mobile, 1)), calc(2.2vw * var(--escala-texto-mobile, 1)), calc(1.4rem * var(--escala-texto-mobile, 1))); }
.hero-texto-canto.fonte-lobster { font-size: clamp(calc(.8rem * var(--escala-texto-mobile, 1)), calc(2vw * var(--escala-texto-mobile, 1)), calc(1.35rem * var(--escala-texto-mobile, 1))); }
.hero-texto-canto.peso-mobile-fina { font-weight: 300; }
.hero-texto-canto.peso-mobile-normal { font-weight: 400; }
.hero-texto-canto.peso-mobile-media { font-weight: 500; }
.hero-texto-canto.peso-mobile-negrito { font-weight: 700; }
.hero-texto-canto.sombra-mobile-leve { text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.hero-texto-canto.sombra-mobile-normal { text-shadow: 0 1px 6px rgba(0,0,0,.65), 0 1px 2px rgba(0,0,0,.85); }
.hero-texto-canto.sombra-mobile-forte { text-shadow: -1px 0 3px rgba(0,0,0,.9), 1px 0 3px rgba(0,0,0,.9), 0 -1px 3px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.9), 0 2px 6px rgba(0,0,0,.85); }
}
/* Com banner cadastrado a faixa segue a proporção REAL do arquivo (--banner-pc-w/--banner-pc-h, medidos sozinhos no
upload — ver routes/admin.js) e mostra a imagem INTEIRA em PC, notebook e tablet — nada é cortado em cima nem
embaixo, então texto ou frase que estejam perto das bordas da imagem (ex: a frase no canto de baixo) aparecem.
1480/577 é só o valor de RESERVA, usado unicamente se essas variáveis não existirem (banner de antes desta medição
existir). Em tela mais larga que 1920px o banner para de crescer (esticar deixaria borrada) e fica centralizado.
No celular (regra própria, mais abaixo) a faixa é mais baixa e só as laterais são cortadas. Em navegador sem
aspect-ratio, o min-height em vw (via calc) dá a mesma proporção. */
.hero.hero-com-banner {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
padding-top: 0;
padding-bottom: 0;
min-height: calc(100vw * var(--banner-pc-h, 577) / var(--banner-pc-w, 1480));
background-image: var(--banner-pc);
background-position: center;
}
@supports (aspect-ratio: 1 / 1) {
.hero.hero-com-banner { aspect-ratio: var(--banner-pc-w, 1480) / var(--banner-pc-h, 577); min-height: auto; }
}
@media (min-width: 1921px) {
.hero.hero-com-banner { max-width: 1920px; margin-left: auto; margin-right: auto; min-height: calc(1920px * var(--banner-pc-h, 577) / var(--banner-pc-w, 1480)); }
}
.hero.hero-com-banner .hero-content { width: 100%; }
/* Regra fixa do dono: NUNCA faixa/mancha nas laterais do banner do PC, nem inventar fundo — mais importante do que
evitar rolar a página. Por isso o banner segue só a proporção da imagem (100% da largura, altura conforme a
proporção real dela), sem limitar pela altura da tela. Em tela baixa, o banner fica mais alto que a tela e é
preciso rolar um pouco pra ver a frase no rodapé da imagem — é o único jeito de garantir zero faixa. */
/* Banner sem texto do site: h1/p vazios não ocupam espaço e o botão (se houver) fica embaixo. */
.hero.hero-so-imagem { justify-content: flex-end; padding-bottom: 24px; }
/* Escondia TODO
dentro do .hero, incluindo o .hero-texto-canto do formato novo do banner (bug real, achado pelo
dono em produção — texto do canto cadastrado certinho no Admin mas invisível no site). Corrigido: agora só
esconde h1/p de DENTRO do .hero-content (o texto de destaque do formato antigo), não qualquer
do banner. */
.hero.hero-so-imagem .hero-content h1, .hero.hero-so-imagem .hero-content p { display: none; }
.botao-cta {
display: inline-block;
background: var(--cor-destaque);
color: #2b2200;
padding: 12px 28px;
border-radius: 30px;
font-weight: 700;
}
/* scroll-margin-top: toda seção é alvo de um link do menu (#programacao, #sobre, etc.) — sem isto, ao clicar no
menu o título ficava embaixo do cabeçalho fixo (que sobrepõe a página), escondido ou cortado. Mesma lógica já
usada no .hero (#topo). Reduzir o padding da seção (acima) tornou isto mais visível, mas o problema já existia
antes — só ficava disfarçado pelo respiro maior. */
.secao { padding: 36px 0; scroll-margin-top: 100px; }
.secao-alt { background: var(--cor-fundo-alt); }
/* margin-top: 0 tira uma margem própria do navegador para
(não fazia parte do respiro escolhido acima —
sem isso, o vazio entre o fim de uma seção e o título da próxima ficava maior do que o padding sozinho). */
.secao h2 { margin-top: 0; font-size: 1.8rem; margin-bottom: 24px; text-align: center; }
.texto-vazio { text-align: center; color: var(--cor-texto-suave); }
.grid-informativos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 22px;
}
.card-informativo {
background: #fff;
border-radius: var(--borda-radius);
overflow: hidden;
box-shadow: 0 2px 14px rgba(0,0,0,.06);
}
.card-informativo img { width: 100%; display: block; }
.card-informativo-body { padding: 18px; }
.data-informativo { font-size: .8rem; color: var(--cor-texto-suave); }
.grid-galeria {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
}
.grid-galeria img { border-radius: var(--borda-radius); height: 160px; width: 100%; object-fit: cover; cursor: zoom-in; }
.grid-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; max-width: 900px; margin: 0 auto; }
.video-item { background: #fff; border-radius: var(--borda-radius); overflow: hidden; box-shadow: 0 2px 14px rgba(0,0,0,.06); }
.video-titulo { padding: 12px 14px 0; font-weight: 600; color: var(--cor-primaria-escura); }
.video-embed-wrap { position: relative; width: 100%; padding-top: 56.25%; margin-top: 10px; }
.video-embed-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.video-item .link-video { display: block; padding: 14px; }
.redes-sociais { display: flex; justify-content: center; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.redes-sociais a {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(255, 255, 255, .12);
color: #eee;
transition: background .15s ease, transform .15s ease;
}
.redes-sociais a:hover { background: rgba(255, 255, 255, .24); transform: translateY(-2px); }
.site-footer {
background: var(--cor-primaria-escura);
color: #eee;
padding: 26px 0;
text-align: center;
font-size: .9rem;
}
.versao-rodape { margin-top: 4px; font-size: .72rem; color: rgba(255,255,255,.4); }
/* O menu do topo vira "hambúrguer" antes de faltar espaço: com todos os links ligados a barra precisa de ~820 px só
para ela, e em tablet em pé o cabeçalho ficava com 147 px de altura (nome da igreja quebrado em 4 linhas) e, com
8 links, passava da largura da tela. */
@media (max-width: 1100px) {
.menu-principal {
position: fixed;
top: 62px;
left: 0;
right: 0;
background: #fff;
flex-direction: column;
padding: 16px 20px;
display: none;
border-bottom: 1px solid #eee;
}
.menu-principal.aberto { display: flex; }
.menu-toggle { display: block; }
}
@media (max-width: 760px) {
.hero { padding: 80px 0 60px; }
/* Altura do banner no celular: 210px. Antes eram 300px fixos, sem olhar a proporção da imagem — como o celular
é estreito (~390px) e a imagem é bem larga (1920x700), a caixa ficava "quadrada" e cortava 54% da largura da
imagem pra cobrir. Agora segue a proporção 1920/700 (igual ao PC) com 210px como altura mínima: no celular
comum (360-430px de largura) fica em 210px e corta só ~25-37% da largura (o centro, onde fica o texto, sempre
aparece); a partir de ~576px de largura a imagem já aparece inteira. Mesma imagem, sem perda de qualidade —
só é exibida menor, então fica ainda mais nítida em tela de alta densidade. */
.hero.hero-com-banner { aspect-ratio: var(--banner-pc-w, 1480) / var(--banner-pc-h, 577); min-height: 210px; background-position: center; }
/* Com "Banner do celular" cadastrado (imagem própria, separada da do PC — dono pediu em 22/09), mostra ESSA
imagem inteira, sem cortar nada, na proporção REAL do arquivo (--banner-celular-w/--banner-celular-h). */
.hero.hero-com-banner.hero-banner-celular { background-image: var(--banner-celular); aspect-ratio: var(--banner-celular-w, 1200) / var(--banner-celular-h, 762); min-height: auto; background-position: center; }
/* Com texto do site por cima (título/subtítulo/botão), a faixa não pode ter altura "presa" — o texto passaria da
borda e invadiria o menu e a seção de baixo. Sem a proporção fixa, ela tem no mínimo os mesmos 210px e cresce
só o quanto o texto precisar. (Banner só com imagem, sem texto do site, continua exatamente em 210px.) */
.hero.hero-com-banner:not(.hero-so-imagem) { aspect-ratio: auto; padding-top: 24px; padding-bottom: 24px; }
.hero h1 { font-size: 1.8rem; }
/* Nome da igreja no cabeçalho: assim como o h1 do hero acima, reduz e
aperta a linha no celular — sem isso, nomes longos quebram em duas
linhas com o espaçamento largo do corpo do texto (line-height 1.6) e
ficam desproporcionais ao ícone da logo. */
.logo-area { font-size: 1rem; line-height: 1.25; gap: 8px; }
.logo-img { height: 30px; }
/* Se o nome quebrar linha (nomes longos em telas pequenas), distribui o
texto de forma equilibrada entre as linhas em vez de deixar uma
palavra solta sozinha na última linha. Navegadores sem suporte
simplesmente ignoram e quebram do jeito tradicional — sem prejuízo. */
.logo-area span { text-wrap: balance; }
}
/* Telas bem estreitas (celulares pequenos): reduz mais um pouco o nome no
cabeçalho, para diminuir a chance de quebrar linha. */
@media (max-width: 380px) {
.logo-area { font-size: .88rem; gap: 6px; }
.logo-img { height: 26px; }
}
/* Informativos: preserva a proporção da arte sem recortar */
.informativo-imagem-wrap {
width: 100%;
background: #f1f1ef;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.card-informativo .informativo-imagem {
width: 100%;
height: auto;
max-height: 520px;
object-fit: contain;
}
.card-informativo-body h3 { margin: 10px 0 8px; }
.card-informativo-body p { margin: 0 0 14px; }
/* Prévia visual para vídeos anexados a informativos */
.informativo-video-preview {
position: relative;
display: block;
margin-top: 16px;
border-radius: 10px;
overflow: hidden;
background: #1f3240;
aspect-ratio: 16 / 9;
box-shadow: 0 2px 10px rgba(0,0,0,.10);
}
.informativo-video-preview > img,
.video-preview-placeholder {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-preview-placeholder {
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,.5);
font-weight: 700;
letter-spacing: .08em;
background: linear-gradient(135deg, #2f4858, #172832);
}
.informativo-video-preview::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.55));
pointer-events: none;
}
.play-badge {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 58px;
height: 58px;
border-radius: 50%;
background: rgba(255,255,255,.94);
color: var(--cor-primaria-escura);
display: flex;
align-items: center;
justify-content: center;
padding-left: 4px;
font-size: 1.25rem;
box-shadow: 0 5px 20px rgba(0,0,0,.22);
}
.video-preview-label {
position: absolute;
z-index: 2;
left: 16px;
bottom: 12px;
color: #fff;
font-weight: 700;
font-size: .9rem;
}
/* Nossa Programação */
.grid-programacao {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 22px;
max-width: 1080px;
margin: 0 auto;
}
.programacao-card {
background: #fff;
border-radius: var(--borda-radius);
overflow: hidden;
box-shadow: 0 2px 14px rgba(0,0,0,.06);
transition: transform .15s ease, box-shadow .15s ease;
}
.programacao-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 22px rgba(0,0,0,.10);
}
.programacao-card-imagem-wrap { width: 100%; height: 150px; overflow: hidden; }
.programacao-card-imagem { width: 100%; height: 100%; object-fit: cover; display: block; }
.programacao-card-body { padding: 18px; }
.programacao-card-topo {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.programacao-card-badge {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.programacao-card-topo h3 { margin: 0; font-size: 1.05rem; }
.programacao-linha {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.programacao-tag {
background: var(--cor-fundo-alt);
color: var(--cor-primaria);
padding: 4px 10px;
border-radius: 20px;
font-size: .8rem;
font-weight: 600;
}
.programacao-local {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: .88rem;
color: var(--cor-primaria);
font-weight: 600;
text-decoration: none;
}
.programacao-local:hover span { text-decoration: underline; }
.programacao-observacao {
font-size: .85rem;
color: var(--cor-texto-suave);
margin: 6px 0 0;
}
/* Agenda e Avisos */
.agenda-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
max-width: 920px;
margin: 0 auto;
}
.agenda-card {
background: #fff;
border: 1px solid #ecebe7;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 12px rgba(0,0,0,.05);
border-top: 3px solid var(--cor-destaque);
}
.agenda-card-topo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
.agenda-data {
color: var(--cor-primaria-escura);
font-weight: 700;
font-size: .92rem;
}
.agenda-horario {
background: var(--cor-fundo-alt);
color: var(--cor-primaria);
padding: 4px 9px;
border-radius: 20px;
font-size: .82rem;
font-weight: 600;
}
.agenda-card h3 { margin: 0 0 8px; font-size: 1.08rem; }
.agenda-card p { margin: 0 0 12px; color: var(--cor-texto-suave); }
.agenda-local { font-size: .88rem; color: var(--cor-primaria); font-weight: 600; }
/* Aniversariantes do mês: cartões brancos na MESMA grade da Nossa Programação (mesma largura, colunas iguais, gap de
22px, última linha à esquerda), com o dia
num selo redondo na cor principal e filete dourado. Sobre o fundo alternativo; as linhas finas em cima e embaixo
separam a seção da vizinha quando as duas usam o mesmo fundo (ex: Galeria logo depois). */
.secao-aniversariantes { border-top: 1px solid #ecebe7; border-bottom: 1px solid #ecebe7; }
.aniversariantes-lista {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 1080px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 22px;
}
.aniversariante-card {
min-width: 0;
display: flex;
align-items: center;
gap: 14px;
background: #fff;
border: 1px solid #ecebe7;
border-radius: 12px;
padding: 12px 16px;
box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.aniversariante-data {
flex: none;
width: 54px;
height: 54px;
border-radius: 50%;
background: var(--cor-primaria);
border: 2px solid var(--cor-destaque);
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1;
}
.aniversariante-data strong { font-size: 1.2rem; }
.aniversariante-data small { margin-top: 3px; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; }
.aniversariante-nome { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.aniversariante-tag {
flex: none;
margin-left: auto;
background: var(--cor-destaque);
color: var(--cor-primaria-escura);
font-size: .76rem;
font-weight: 700;
padding: 3px 10px;
border-radius: 20px;
}
.aniversariante-hoje { border-color: var(--cor-destaque); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Localização */
.localizacao-endereco {
text-align: center;
max-width: 760px;
margin: -8px auto 18px;
color: var(--cor-texto-suave);
}
.mapa-embed {
border-radius: 14px;
overflow: hidden;
margin: 0 auto;
max-width: 960px;
background: #e9e9e9;
box-shadow: 0 2px 14px rgba(0,0,0,.07);
}
.mapa-embed iframe { display: block; }
.mapa-acoes { text-align: center; margin-top: 18px; }
.botao-secundario {
display: inline-block;
padding: 10px 18px;
border: 1px solid var(--cor-primaria);
border-radius: 24px;
font-weight: 700;
background: #fff;
}
/* Contato */
.contato-card {
max-width: 900px;
margin: 0 auto;
padding: 26px;
background: #fff;
border-radius: 14px;
box-shadow: 0 2px 16px rgba(0,0,0,.06);
border: 1px solid #efefec;
text-align: center;
}
.contato-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 14px;
text-align: left;
}
.contato-item {
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
border-radius: 10px;
background: var(--cor-fundo-alt);
min-width: 0;
}
.contato-icone {
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
background: var(--cor-primaria);
color: #fff;
font-size: 1rem;
}
.contato-item div { min-width: 0; }
.contato-item small { display: block; color: var(--cor-texto-suave); font-size: .75rem; }
.contato-item strong { display: block; color: var(--cor-primaria-escura); overflow-wrap: anywhere; }
.botao-whatsapp {
display: inline-block;
margin-top: 20px;
padding: 11px 22px;
border-radius: 26px;
background: var(--cor-primaria);
color: #fff;
font-weight: 700;
}
@media (max-width: 760px) {
.card-informativo .informativo-imagem { max-height: 420px; }
.agenda-card-topo { align-items: flex-start; flex-direction: column; }
.contato-card { padding: 18px; }
.mapa-embed iframe { height: 300px; }
}
/* App / PWA — instalação discreta somente em celular */
.app-install-fab {
position: fixed;
right: 14px;
bottom: 14px;
z-index: 900;
border: 0;
border-radius: 999px;
padding: 9px 13px;
background: var(--cor-primaria);
color: #fff;
box-shadow: 0 8px 24px rgba(31,50,64,.22);
font: inherit;
font-size: .86rem;
font-weight: 700;
cursor: pointer;
}
.app-install-fab span { font-size: 1rem; margin-right: 3px; }
.app-install-fab:disabled { opacity: .65; }
.app-setup-modal[hidden], .app-install-fab[hidden] { display: none !important; }
.app-setup-modal {
position: fixed;
inset: 0;
z-index: 1200;
display: grid;
place-items: center;
padding: 18px;
}
.app-setup-backdrop {
position: absolute;
inset: 0;
background: rgba(14,24,31,.52);
backdrop-filter: blur(2px);
}
.app-setup-dialog {
position: relative;
width: min(92vw, 390px);
background: #fff;
border-radius: 18px;
padding: 24px;
box-shadow: 0 24px 70px rgba(10,20,28,.28);
text-align: center;
}
.app-setup-icon {
width: 48px;
height: 48px;
margin: 0 auto 12px;
border-radius: 14px;
background: var(--cor-fundo-alt);
display: grid;
place-items: center;
font-size: 1.35rem;
}
.app-setup-dialog h3 { margin: 0 0 8px; font-size: 1.25rem; }
.app-setup-dialog p { margin: 0 0 18px; color: var(--cor-texto-suave); line-height: 1.5; }
.app-setup-dialog label { display: block; text-align: left; font-weight: 650; margin: 0 0 7px; }
.app-setup-dialog input {
width: 100%;
box-sizing: border-box;
padding: 12px 13px;
border: 1px solid #d6d6d6;
border-radius: 10px;
font: inherit;
}
.app-setup-actions { display: flex; gap: 9px; justify-content: center; margin-top: 18px; }
.app-setup-actions button { border: 0; cursor: pointer; font: inherit; }
.app-setup-actions .botao-cta, .app-setup-actions .botao-secundario { padding: 10px 14px; }
.app-pwa-status { margin: 13px 0 0 !important; color: var(--cor-primaria) !important; font-size: .9rem; font-weight: 600; }
.app-pwa-status.erro { color: #a33 !important; }
.app-modal-open { overflow: hidden; }
@media (min-width: 821px) {
.app-install-fab, .app-setup-modal { display: none !important; }
}
@media (max-width: 480px) {
.app-install-fab { right: 10px; bottom: 10px; padding: 8px 11px; font-size: .82rem; }
.app-setup-dialog { padding: 21px 17px; }
.app-setup-actions { flex-direction: column; }
.app-setup-actions button { width: 100%; }
}
/* Zoom ao clicar numa foto da galeria — mostra a imagem original inteira
(as miniaturas da grade são cortadas em quadrado). Sem biblioteca, sem
imagem extra: reaproveita o mesmo arquivo que já carregou. */
.lightbox-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .85);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
cursor: zoom-out;
padding: 20px;
box-sizing: border-box;
}
.lightbox-overlay img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
/* Modo manutenção ligado: faixa fininha no topo do site, só aparece pro Administrador logado. */
.faixa-manutencao { background: #b45309; color: #fff; text-align: center; padding: 6px 12px; font-size: .85rem; line-height: 1.35; }