/* =========================================================
   Arautos do Evangelho — Adoração ao Santíssimo Sacramento
   Tema: vermelho sangue, dourado e branco, estilo gótico-elegante
   ========================================================= */

:root{
  --vermelho: #7a0c1e;
  --vermelho-2: #93101f;
  --vermelho-escuro: #4a0711;
  --vermelho-glow: rgba(122,12,30,0.45);
  --dourado: #cda434;
  --dourado-claro: #f0d78c;
  --dourado-escuro: #9c7a1f;
  --verde-2: #3d7247;
  --verde-escuro: #2f5233;
  --verde-glow: rgba(47,82,51,.4);
  --branco: #fffdf8;
  --creme: #faf3e6;
  --texto: #2b1810;
  --texto-suave: #5a4636;
  --sombra: rgba(40, 10, 10, 0.35);
  --radius: 16px;
  --transicao: .35s cubic-bezier(.4,0,.2,1);
}

*{
  box-sizing: border-box;
  /* remove o retângulo azul/cinza que o navegador do celular mostra ao tocar em
     botões, links, inputs etc. (efeito padrão do Chrome/Android e do Safari/iOS) */
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  min-height: 100vh;
  font-family: 'EB Garamond', Georgia, serif;
  color: var(--texto);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1,h2,h3,h4{
  font-family: 'Cinzel', serif;
  color: var(--vermelho-escuro);
  margin: 0 0 .5em;
  letter-spacing: .02em;
}

a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
img{ max-width: 100%; display:block; }

::selection{ background: var(--dourado-claro); color: var(--vermelho-escuro); }

/* ---------- scrollbar dourado ---------- */
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: var(--creme); }
::-webkit-scrollbar-thumb{ background: linear-gradient(var(--dourado), var(--dourado-escuro)); border-radius: 10px; }

/* ============ TELA / FUNDO COM FOTO ============ */
.tela-fundo{
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.tela-fundo::before{
  content: "";
  position: fixed;
  inset: 0;
  /* SEM imagem padrão fixa aqui de propósito: só deve aparecer o fundo realmente configurado em
     Configurações > Fundo no painel admin (aplicado via --fundo-img, cedo, a partir do cache
     deste aparelho — ver aplicarConfigVisualEmCache em js/utils.js). Enquanto isso não estiver
     definido (só na primeiríssima visita de todas, antes de qualquer cache existir), fica só a
     cor/gradiente abaixo — nunca uma foto antiga ou "de fábrica". */
  background-image: var(--fundo-img);
  background-color: var(--vermelho-escuro);
  background-size: cover;
  background-position: center 20%;
  z-index: -2;
}
.tela-fundo::after{
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,4,7,.72) 0%, rgba(30,6,10,.62) 35%, rgba(20,4,7,.78) 100%);
  z-index: -1;
}

/* ============ HEADER / RODAPÉ SUPERIOR VERMELHO ============ */
.topbar{
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  min-height: 64px;
  background: linear-gradient(180deg, var(--vermelho-2) 0%, var(--vermelho) 55%, var(--vermelho-escuro) 100%);
  box-shadow: 0 4px 18px var(--sombra), inset 0 -2px 0 rgba(205,164,52,.55);
  position: relative;
}
.topbar__logo{
  height: 42px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
  animation: aparecer .8s ease both;
}
.topbar__btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(240,215,140,.55);
  border-radius: 50%;
  transition: background var(--transicao), transform var(--transicao), border-color var(--transicao);
}
.topbar__btn:hover, .topbar__btn:focus-visible{
  background: rgba(240,215,140,.22);
  border-color: var(--dourado-claro);
  transform: translateY(-50%) scale(1.06);
}
.topbar__btn:active{ transform: translateY(-50%) scale(.94); }
.topbar__menu{ left: 12px; }
.topbar__perfil{ right: 12px; }

/* ícone hambúrguer custom */
.icone-hamburguer{ width: 22px; height: 16px; position: relative; }
.icone-hamburguer span{
  position: absolute; left: 0; width: 100%; height: 2.4px;
  background: var(--dourado-claro); border-radius: 2px;
  box-shadow: 0 0 4px rgba(240,215,140,.6);
}
.icone-hamburguer span:nth-child(1){ top: 0; }
.icone-hamburguer span:nth-child(2){ top: 7px; width: 70%; }
.icone-hamburguer span:nth-child(3){ top: 14px; }

/* ícone perfil (boneco) custom */
.icone-perfil{ width: 22px; height: 22px; color: var(--dourado-claro); }

/* ============ MENU LATERAL (HAMBÚRGUER) ============ */
.overlay{
  position: fixed; inset: 0; background: rgba(15,3,5,.55);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity var(--transicao);
  z-index: 300;
}
.overlay.ativo{ opacity: 1; pointer-events: auto; }

.menu-lateral{
  position: fixed; top: 0; left: 0; height: 100%; width: min(300px, 82vw);
  background: linear-gradient(180deg, #fffdf8 0%, #faf1de 100%);
  border-right: 3px solid var(--dourado);
  box-shadow: 6px 0 28px rgba(0,0,0,.4);
  transform: translateX(-105%);
  transition: transform var(--transicao);
  z-index: 301;
  display: flex; flex-direction: column;
  padding: 22px 0 20px;
}
.menu-lateral.aberto{ transform: translateX(0); }
.menu-lateral__topo{
  display:flex; align-items:center; gap:12px;
  padding: 0 22px 18px; margin-bottom: 8px;
  border-bottom: 1.5px solid rgba(157,122,31,.3);
}
.menu-lateral__topo img{ height: 44px; }
.menu-lateral__topo span{ font-family:'Cinzel'; font-weight:600; color:var(--vermelho-escuro); font-size:.95rem; line-height:1.2; }
.menu-lateral__fechar{
  margin-left:auto; background:none; border:none; font-size:1.4rem; color:var(--vermelho); line-height:1;
}
.menu-lateral nav{ display:flex; flex-direction:column; padding: 6px 12px; gap: 3px; }
.menu-lateral nav a{
  display:flex; align-items:center; gap:12px;
  padding: 13px 14px; border-radius: 10px;
  color: var(--texto); font-family:'Cinzel'; font-size:.92rem; font-weight:500;
  transition: background var(--transicao), color var(--transicao), padding-left var(--transicao);
  border-left: 3px solid transparent;
}
.menu-lateral nav a .emoji{ font-size:1.05rem; width:22px; text-align:center; }
.menu-lateral nav a:hover{ background: rgba(122,12,30,.08); color: var(--vermelho); padding-left: 18px; border-left-color: var(--dourado); }
.menu-lateral nav a.ativa{ background: rgba(122,12,30,.12); color: var(--vermelho-escuro); border-left-color: var(--dourado); }
.menu-lateral__rodape{
  margin-top:auto; padding: 16px 22px 0; border-top: 1.5px solid rgba(157,122,31,.3);
  font-size:.78rem; color: var(--texto-suave); text-align:center;
}
.menu-lateral__admin-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding: 10px 14px; border-radius: 10px; border: 1.5px solid rgba(157,122,31,.35);
  font-family:'Cinzel'; font-size:.78rem; color: var(--texto-suave);
  transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}
.menu-lateral__admin-btn:hover{ background: rgba(122,12,30,.08); color: var(--vermelho); border-color: var(--dourado); }

/* ============ DROPDOWN PERFIL ============ */
.dropdown-perfil{
  position: absolute; top: 60px; right: 12px; width: min(260px,80vw);
  background: linear-gradient(180deg,#fffdf8,#faf1de);
  border: 1.5px solid var(--dourado);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
  padding: 18px;
  opacity: 0; transform: translateY(-10px) scale(.97);
  pointer-events: none;
  transition: all var(--transicao);
  z-index: 250;
}
.dropdown-perfil.aberto{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }
.dropdown-perfil__avatar{
  width:52px; height:52px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--dourado-claro), var(--dourado-escuro));
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto 10px; color:#fff;
}
.dropdown-perfil__avatar svg{ width:28px; height:28px; }
.dropdown-perfil__nome{ text-align:center; font-family:'Cinzel'; font-weight:600; color:var(--vermelho-escuro); }
.dropdown-perfil__tel{ text-align:center; font-size:.88rem; color:var(--texto-suave); margin-bottom:14px; }
.dropdown-perfil a, .dropdown-perfil button{
  display:flex; align-items:center; gap:10px; width:100%;
  padding: 10px 12px; border-radius:9px; border:none; background:transparent;
  font-family:'Cinzel'; font-size:.85rem; color:var(--texto);
  transition: background var(--transicao);
}
.dropdown-perfil a:hover, .dropdown-perfil button:hover{ background: rgba(122,12,30,.08); color:var(--vermelho); }
.dropdown-perfil hr{ border:none; border-top:1px solid rgba(157,122,31,.3); margin:8px 0; }

/* ============ CONTEÚDO PRINCIPAL ============ */
.conteudo{
  flex:1; display:flex; flex-direction:column; align-items:center;
  padding: 42px 20px 60px; text-align:center; color: var(--branco);
  max-width: 640px; margin: 0 auto; width:100%;
}
.titulo-cidade{
  font-family:'Cinzel'; font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color: var(--dourado-claro); margin-bottom: 18px; text-shadow: 0 2px 8px rgba(0,0,0,.4);
  animation: aparecer .8s ease both;
}
.selo-decorativo{
  height: 68px; width:auto; margin-bottom: 14px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
  animation: aparecer 1s ease both;
}
.conteudo h1.titulo-pagina{
  color: var(--branco);
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  text-shadow: 0 3px 14px rgba(0,0,0,.55);
  animation: subir .8s .05s ease both;
}
.linha-ornamento{
  display:flex; align-items:center; gap:10px; color: var(--dourado-claro);
  margin: 6px 0 22px; opacity:.9;
}
.linha-ornamento::before, .linha-ornamento::after{
  content:""; height:1px; width:46px;
  background: linear-gradient(90deg, transparent, var(--dourado-claro));
}
.linha-ornamento img{
  height: 24px; width: auto; display:block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.25));
}
.linha-ornamento::after{ background: linear-gradient(90deg, var(--dourado-claro), transparent); }

.card-frase{
  background: rgba(255,253,248,.1);
  border: 1px solid rgba(240,215,140,.45);
  border-radius: var(--radius);
  padding: 26px 24px;
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
  animation: subir .9s .15s ease both;
  margin-bottom: 30px;
}
.card-frase__eyebrow{
  font-family:'Cinzel'; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color: var(--dourado-claro); margin-bottom:12px;
}
.card-frase blockquote{
  margin:0 0 12px; font-style:italic; font-size:1.12rem; line-height:1.55;
  font-family: 'EB Garamond', serif;
}
.card-frase cite{ font-family:'Cinzel'; font-size:.85rem; color: var(--dourado-claro); font-style:normal; }

/* ============ CARROSSEL DE BANNERS (página inicial) ============ */
.carrossel-banners{
  width:100%; margin-bottom: 22px;
  animation: subir .8s .05s ease both;
}
.carrossel-banners__viewport{
  position:relative; width:100%; overflow:hidden;
  border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
}
.carrossel-banners__pista{
  display:flex; width:100%;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.carrossel-banners__slide{
  flex: 0 0 100%; width:100%; aspect-ratio: 2 / 1; position:relative; display:block;
  text-decoration:none; background: var(--vermelho-escuro);
}
.carrossel-banners__img{ width:100%; height:100%; object-fit:cover; display:block; }
/* especificidade extra (.carrossel-banners__slide + .carrossel-banners__botao) de propósito:
   essa regra precisa vencer a classe genérica ".btn" (padding/font-size padrão dos botões do
   site), que é definida mais abaixo no arquivo — sem isso, ".btn" venceria por vir depois. */
.carrossel-banners__slide .carrossel-banners__botao{
  position:absolute; left:74%; bottom:8%; right:auto; transform: translateX(-50%);
  white-space:nowrap; padding: 6px 16px; font-size:.56rem; letter-spacing:.02em; pointer-events:none;
}
@media (max-width: 480px){
  .carrossel-banners__slide .carrossel-banners__botao{ padding: 4px 11px; font-size:.46rem; left:74%; bottom:6%; }
}
.carrossel-banners__seta{
  position:absolute; top:50%; transform: translateY(-50%);
  width:36px; height:36px; border-radius:50%; border:none; cursor:pointer; padding:0;
  background: rgba(20,6,6,.42); color: var(--branco); display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(3px); transition: background .2s ease, transform .2s ease;
  z-index:2;
}
.carrossel-banners__seta svg{ width:18px; height:18px; }
.carrossel-banners__seta:hover{ background: rgba(20,6,6,.65); transform: translateY(-50%) scale(1.06); }
.carrossel-banners__seta--esq{ left:8px; }
.carrossel-banners__seta--dir{ right:8px; }
.carrossel-banners--unico .carrossel-banners__seta{ display:none; }
.carrossel-banners__pontos{
  display:flex; justify-content:center; gap:7px; margin-top:12px;
}
.carrossel-banners--unico .carrossel-banners__pontos{ display:none; }
.carrossel-banners__ponto{
  width:8px; height:8px; border-radius:50%; border:none; padding:0; cursor:pointer;
  background: rgba(255,253,248,.4); transition: background .2s ease, transform .2s ease;
}
.carrossel-banners__ponto.ativo{ background: var(--dourado-claro); transform: scale(1.3); }

/* ---------- Atalhos rápidos (Home) ---------- */
.atalhos-grade{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:14px;
  width:100%; margin-top:22px;
}
.atalho-card{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  background: rgba(255,253,248,.08); border:1px solid rgba(240,215,140,.35); border-radius: var(--radius);
  padding: 20px 10px; backdrop-filter: blur(6px); box-shadow: 0 10px 26px rgba(0,0,0,.28);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
  animation: subir .7s ease both;
}
.atalho-card:nth-child(2){ animation-delay: .05s; }
.atalho-card:nth-child(3){ animation-delay: .1s; }
.atalho-card:nth-child(4){ animation-delay: .15s; }
.atalho-card:hover{
  transform: translateY(-3px);
  background: rgba(255,253,248,.14);
  box-shadow: 0 14px 32px rgba(0,0,0,.34);
}
.atalho-card:active{ transform: translateY(-1px) scale(.98); }
.atalho-card__icone{
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(160deg, var(--dourado-claro), var(--dourado-escuro));
  color: var(--vermelho-escuro);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.atalho-card__icone svg{ width:24px; height:24px; }
.atalho-card__texto{
  font-family:'Cinzel'; font-size:.82rem; font-weight:600; line-height:1.35;
  color: var(--branco); text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

.pergunta-dia{
  font-family:'Cinzel'; font-size:1.15rem; font-weight:500;
  margin-bottom:26px; text-shadow: 0 2px 10px rgba(0,0,0,.5);
  animation: subir .9s .25s ease both;
  /* distribui a quebra de linha de forma equilibrada, sem deixar
     "hoje?" sozinho numa linha */
  text-wrap: balance;
}

/* ============ BOTÕES ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 15px 34px;
  font-family:'Cinzel'; font-weight:600; font-size:.95rem; letter-spacing:.03em;
  border-radius: 999px; border: none; text-decoration:none;
  transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.btn-dourado{
  background: linear-gradient(135deg, var(--dourado-claro), var(--dourado) 55%, var(--dourado-escuro));
  color: var(--vermelho-escuro);
  box-shadow: 0 10px 26px rgba(157,122,31,.45), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-dourado:hover{ transform: translateY(-3px); box-shadow: 0 14px 32px rgba(157,122,31,.6), inset 0 1px 0 rgba(255,255,255,.7); }
.btn-dourado:active{ transform: translateY(0); }
.btn-vermelho{
  background: linear-gradient(135deg, var(--vermelho-2), var(--vermelho-escuro));
  color: var(--branco);
  box-shadow: 0 10px 24px var(--vermelho-glow);
}
.btn-vermelho:hover{ transform: translateY(-3px); box-shadow: 0 14px 30px var(--vermelho-glow); }
.btn-contorno{
  background: transparent; color: var(--vermelho); border: 1.5px solid var(--vermelho);
}
.btn-contorno:hover{ background: rgba(122,12,30,.08); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none !important; box-shadow:none !important; }
.btn-full{ width:100%; }
.btn-icone{
  width:40px; height:40px; border-radius:50%; border:none; display:flex; align-items:center; justify-content:center;
  background: rgba(122,12,30,.08); color:var(--vermelho);
}

@keyframes aparecer{ from{ opacity:0; } to{ opacity:1; } }
@keyframes subir{ from{ opacity:0; transform: translateY(18px);} to{ opacity:1; transform:translateY(0);} }
@keyframes escala{ from{ opacity:0; transform: scale(.9);} to{ opacity:1; transform:scale(1);} }
@keyframes brilho{ 0%,100%{ box-shadow:0 0 0 0 rgba(205,164,52,.5);} 50%{ box-shadow:0 0 0 8px rgba(205,164,52,0);} }

/* ============ PÁGINA CLARA (agendamento / meus agendamentos) ============ */
.pagina-clara{
  min-height:100vh; display:flex; flex-direction:column;
  background: linear-gradient(180deg, var(--creme), #f3e8d2 260px, var(--creme) 260px);
}
.pagina-clara .conteudo{ color: var(--texto); max-width: 560px; }
.pagina-clara .conteudo h1.titulo-pagina{ color: var(--vermelho-escuro); text-shadow:none; }
.pagina-clara .linha-ornamento{ color: var(--dourado-escuro); }
.pagina-clara .linha-ornamento::before, .pagina-clara .linha-ornamento::after{ background: linear-gradient(90deg, transparent, var(--dourado-escuro)); }
.pagina-clara .linha-ornamento::after{ background: linear-gradient(90deg, var(--dourado-escuro), transparent); }

.painel{
  width:100%;
  background: var(--branco);
  border: 1px solid rgba(157,122,31,.28);
  border-radius: var(--radius);
  box-shadow: 0 14px 36px rgba(74,7,17,.12);
  padding: 26px 22px;
  text-align:left;
  animation: subir .6s ease both;
}
.painel + .painel{ margin-top: 20px; }
.painel__titulo{
  font-family:'Cinzel'; font-size:1.02rem; color: var(--vermelho-escuro);
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.painel__titulo .emoji{ font-size:1.1rem; }
.painel__titulo--clicavel{ cursor:pointer; user-select:none; }
.painel__seta{
  margin-left:auto; width:18px; height:18px; color: var(--vermelho); flex-shrink:0;
  transition: transform .25s ease;
}
.painel__titulo--clicavel.recolhido .painel__seta{ transform: rotate(-90deg); }
/* fechado: sem a folga de baixo do título (não há conteúdo embaixo) e com a dica "Clique aqui…" visível */
.painel__titulo--clicavel.recolhido{ margin-bottom:0; }
.painel__titulo--clicavel{ flex-wrap:wrap; }
.painel__dica{
  margin-left:auto; font-family:'EB Garamond', serif; font-size:.82rem; font-style:italic;
  color: var(--texto-suave); text-align:right;
}
.painel__dica + .painel__seta{ margin-left:0; }
.painel__titulo--clicavel:not(.recolhido) .painel__dica{ display:none; }
@media (max-width: 600px){
  /* em telas estreitas a dica desce pra uma linha só dela, abaixo do título */
  .painel__dica{ order:5; width:100%; margin-left:0; text-align:left; padding-left:30px; }
}
#corpoBannersAdmin.oculto{ display:none; }

.campo{ margin-bottom: 18px; }
.campo label{
  display:block; font-family:'Cinzel'; font-size:.78rem; letter-spacing:.05em;
  color: var(--texto-suave); margin-bottom:8px; text-transform:uppercase;
}
.campo input, .campo select, .campo textarea{
  width:100%; padding: 13px 15px; border-radius:10px;
  border: 1.5px solid rgba(157,122,31,.35);
  font-family:'EB Garamond', serif; font-size:1.02rem; color: var(--texto);
  background: #fffefb;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.campo input:focus, .campo select:focus, .campo textarea:focus{
  outline:none; border-color: var(--dourado); box-shadow: 0 0 0 3px rgba(205,164,52,.2);
}
.campo input.campo-clicavel{ cursor:pointer; background-image: none; }
.campo-erro{ color: var(--vermelho); font-size:.82rem; margin-top:6px; display:none; }
.campo.invalido input{ border-color: var(--vermelho); }
.campo.invalido .campo-erro{ display:block; }

/* ============ CALENDÁRIO PERSONALIZADO ============ */
/* garante que o painel com o calendário fique acima do painel de horários que vem depois dele
   (o painel de horários também recebe posição/contexto de empilhamento pela animação de entrada) */
#painelData{ position:relative; z-index: 2; }

/* .painel tem "animation" (para o efeito de entrada), o que cria um novo contexto de
   empilhamento — sem isso, o calendário (mesmo com z-index alto) ficaria escondido atrás
   de um .painel seguinte quando ele já tiver conteúdo abaixo (ex: outra missa, a grade de
   horários). Qualquer .painel que contenha um .calendario precisa disso. */
.painel:has(.calendario), .painel:has(.seletor-hora){
  position: relative;
  z-index: 1;
}

.calendario{
  position:absolute; z-index: 120; margin-top:8px;
  width: min(320px, 88vw);
  background: var(--branco);
  border: 1.5px solid var(--dourado);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(74,7,17,.25);
  padding: 16px;
  opacity:0; transform: translateY(-8px); pointer-events:none;
  transition: all var(--transicao);
}
.calendario.aberto{ opacity:1; transform:translateY(0); pointer-events:auto; }
.calendario__cabecalho{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.calendario__cabecalho strong{ font-family:'Cinzel'; color:var(--vermelho-escuro); font-size:.92rem; }
.calendario__nav{
  width:30px; height:30px; border-radius:50%; border:none; background: rgba(122,12,30,.08); color:var(--vermelho);
  display:flex; align-items:center; justify-content:center;
}
.calendario__nav:disabled{ opacity:.3; cursor:not-allowed; }
.calendario__semana{ display:grid; grid-template-columns: repeat(7,1fr); gap:4px; margin-bottom:6px; }
.calendario__semana span{ text-align:center; font-size:.7rem; color:var(--texto-suave); font-family:'Cinzel'; }
.calendario__dias{ display:grid; grid-template-columns: repeat(7,1fr); gap:4px; }
.calendario__dia{
  aspect-ratio:1; border:none; background:transparent; border-radius:8px;
  font-family:'EB Garamond'; font-size:.92rem; color: #c7bba8;
  display:flex; align-items:center; justify-content:center;
}
.calendario__dia.disponivel{
  color: var(--texto); background: rgba(205,164,52,.12); cursor:pointer; font-weight:600;
}
.calendario__dia.disponivel:hover:not(.selecionado){ background: rgba(205,164,52,.32); }
.calendario__dia.selecionado{
  background: linear-gradient(135deg, var(--dourado-claro), var(--dourado));
  color: var(--vermelho-escuro); box-shadow: 0 4px 12px rgba(157,122,31,.4);
}
.calendario__vazio{ visibility:hidden; }
.calendario__legenda{ margin-top:10px; font-size:.72rem; color:var(--texto-suave); display:flex; align-items:center; gap:6px;}
.calendario__legenda i{ width:10px;height:10px;border-radius:3px; background: rgba(205,164,52,.35); display:inline-block;}

/* ============ SELETOR DE HORA PERSONALIZADO ============ */
.seletor-hora{
  position:absolute; z-index: 120; margin-top:8px;
  width: min(230px, 80vw);
  background: var(--branco);
  border: 1.5px solid var(--dourado);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(74,7,17,.25);
  padding: 14px;
  opacity:0; transform: translateY(-8px); pointer-events:none;
  transition: all var(--transicao);
}
.seletor-hora.aberto{ opacity:1; transform:translateY(0); pointer-events:auto; }
.seletor-hora__colunas{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.seletor-hora__coluna{
  max-height: 210px; overflow-y:auto; display:flex; flex-direction:column; gap:4px;
  scroll-behavior:smooth; padding-right:2px;
}
.seletor-hora__item{
  border:none; background: rgba(205,164,52,.12); border-radius:8px; padding:8px 0; flex-shrink:0;
  font-family:'EB Garamond'; font-size:.92rem; color: var(--texto); font-weight:600; text-align:center;
}
.seletor-hora__item:hover:not(.selecionado){ background: rgba(205,164,52,.32); }
.seletor-hora__item.selecionado{
  background: linear-gradient(135deg, var(--dourado-claro), var(--dourado));
  color: var(--vermelho-escuro); box-shadow: 0 4px 12px rgba(157,122,31,.4);
}
.seletor-hora__acoes{ display:flex; gap:8px; margin-top:12px; }
.seletor-hora__acoes .btn{ flex:1; padding:9px; font-size:.82rem; }
.seletor-hora__acoes button:disabled{ opacity:.4; cursor:not-allowed; }

/* ============ HORÁRIOS ============ */
.grade-horarios{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(96px,1fr)); gap:10px;
  margin-top: 6px;
}
.horario-btn{
  padding: 12px 8px; border-radius:10px; border: 1.5px solid rgba(157,122,31,.3);
  background: #fffefb; font-family:'Cinzel'; font-size:.82rem; font-weight:600; color: var(--texto);
  transition: all .2s ease; animation: escala .35s ease both;
}
.horario-btn:hover:not(:disabled):not(.selecionado):not(.ocupado){
  border-color: var(--verde-escuro); background: rgba(47,82,51,.1); color: var(--verde-escuro);
  transform: translateY(-2px);
}
.horario-btn.selecionado{
  background: linear-gradient(135deg, var(--verde-2), var(--verde-escuro));
  border-color: var(--verde-escuro); color:#fff; box-shadow: 0 6px 16px var(--verde-glow);
}
.horario-btn:disabled{ opacity:.4; text-decoration: line-through; cursor:not-allowed; background:#f1ece2; }
.horario-btn.ocupado{
  display:flex; flex-direction:column; gap:3px; background:#f5efe3;
}
.horario-btn.ocupado:hover:not(.selecionado){ border-color: var(--vermelho); background: rgba(122,12,30,.08); }
.horario-btn__hora{ color: var(--texto); }
.horario-btn__reservado{
  font-family:'EB Garamond', serif; font-weight:600; font-size:.72rem; color: var(--vermelho);
  text-decoration: underline; text-underline-offset: 2px; cursor:pointer;
}
/* horário ocupado + selecionado ao mesmo tempo: precisa vencer a especificidade de .ocupado */
.horario-btn.ocupado.selecionado{
  background: linear-gradient(135deg, var(--vermelho-2), var(--vermelho-escuro));
  border-color: var(--vermelho-escuro);
}
.horario-btn.ocupado.selecionado .horario-btn__hora{ color:#fff; }
.horario-btn.ocupado.selecionado .horario-btn__reservado{ color: rgba(255,255,255,.92); }

/* ---------- observação sobre agendar horários já ocupados ---------- */
.aviso-info{
  display:flex; align-items:flex-start; gap:10px; text-align:left;
  background: rgba(205,164,52,.12); border:1.5px solid rgba(157,122,31,.4);
  border-radius: 12px; padding: 14px 16px; margin-top:18px; width:100%;
}
.aviso-info__icone{ font-size:1.05rem; line-height:1.5; flex-shrink:0; }
.aviso-info p{ margin:0; font-size:.84rem; line-height:1.55; color: var(--texto-suave); }
.aviso-info strong{ color: var(--vermelho-escuro); }

/* ---------- legenda fixa dos grupos responsáveis por horário ---------- */
.legenda-grupos{
  margin-top:18px; padding-top:16px; border-top:1.5px dashed rgba(157,122,31,.35);
}
.legenda-grupos__titulo{
  font-family:'Cinzel'; font-size:.88rem; color: var(--vermelho-escuro); font-weight:600; margin-bottom:10px;
}
.legenda-grupos__lista{ list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:6px; }
.legenda-grupos__lista li{ font-size:.84rem; line-height:1.5; color: var(--texto-suave); }
.legenda-grupos__lista li strong{ color: var(--vermelho-escuro); }
.legenda-grupos__obs{ margin:0; font-size:.78rem; line-height:1.5; color: var(--texto-suave); font-style:italic; }

/* ---------- Agendamento: planilha de agendamentos (igual ao "Acompanhamento" do painel
   administrativo) ----------
   Em qualquer tamanho de tela (celular ou computador), fica escondida até a pessoa tocar no botão
   "Ver planilha de agendamento" — nunca mais fica encaixada permanentemente ao lado dos horários.
   Ao clicar, o JS adiciona a classe .tela-cheia (ver bloco abaixo) e abre como um overlay quase do
   tamanho da tela inteira, atualizando em tempo real conforme as pessoas agendam. Dias com
   agendamento ficam em destaque com um selo de quantidade; tocar num dia abre os detalhes de quem
   reservou em cada horário. */
.agendamento-colunas{ display:flex; flex-direction:column; width:100%; }
.agendamento-colunas__principal{ display:flex; flex-direction:column; width:100%; }
.btn-ver-planilha{ display:flex; align-items:center; justify-content:center; gap:8px; }
.btn-ver-planilha .icone-planilha{ width:18px; height:18px; flex-shrink:0; }

.modal--calendario-agendamentos{ max-width: min(94vw, 640px); text-align:center; }
.calendario-agendamentos__titulo{ justify-content:center; flex-shrink:0; }

/* ---------- Versão "tela cheia" da planilha (botão "Ver planilha de agendamento", computador e
   celular): mostra como overlay quase do tamanho da tela inteira, em qualquer largura, pra nenhuma
   coluna ficar cortada. ---------- */
#modalCalendarioAgendamentos.tela-cheia{
  position:fixed; inset:0; background: rgba(15,3,5,.6); backdrop-filter: blur(3px);
  display:flex; align-items:center; justify-content:center; padding:10px;
  opacity:0; pointer-events:none; transition: opacity var(--transicao); z-index:400;
}
#modalCalendarioAgendamentos.tela-cheia.aberto{ opacity:1; pointer-events:auto; }
#modalCalendarioAgendamentos.tela-cheia .modal{
  /* quase do tamanho da tela inteira, pra mostrar o máximo possível da planilha de uma vez —
     a legenda de cores, a observação e o texto do período já foram removidos daqui, então o
     espaço que sobra vai praticamente todo pra própria tabela. Zoom por toque continua liberado
     em todas as páginas do site, pra quem quiser ver um trecho maior/mais de perto. */
  max-width:min(99vw, 1700px); width:100%; max-height:min(97vh, 1100px); height:97vh;
  /* ver explicação do "dvh" acima em .modal--largo — aqui é o que mais importa, porque é
     essa altura que decide quanto sobra pra tabela rolar dentro do modal no celular */
  max-height:min(97dvh, 1100px); height:97dvh;
  padding:16px 14px;
  transform: scale(.94) translateY(8px); transition: transform var(--transicao);
}
#modalCalendarioAgendamentos.tela-cheia.aberto .modal{ transform: scale(1) translateY(0); }
#modalCalendarioAgendamentos.tela-cheia .modal--fechar{ display:block; }

/* ---------- Grade semanal de agendamentos: mesmo layout/cores da planilha (Excel) exportada
   em Acompanhamento no painel admin, ao vivo no site público (ver js/agendamento.js). ---------- */
.grade-semanal{ display:flex; flex-direction:column; min-height:0; flex:1 1 auto; }
.grade-semanal__cabecalho{
  display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:6px; flex-shrink:0;
  font-family:'Cinzel'; color: var(--vermelho-escuro); font-weight:600; font-size:.92rem;
}
.grade-semanal__scroll{
  overflow:auto; border:1.5px solid var(--dourado); border-radius:12px; -webkit-overflow-scrolling:touch;
  flex:1 1 auto; min-height:220px;
}
/* Tela cheia: tabela mais compacta (linhas e fontes menores) pra caber mais horas na tela de
   uma vez, sem precisar rolar tanto — quem precisar ver um trecho mais de perto pode dar zoom
   com os dedos (o site não bloqueia isso em nenhuma página). */
.grade-semanal__tabela{ border-collapse:collapse; width:100%; min-width:560px; }
.grade-semanal__tabela th, .grade-semanal__tabela td{
  border:1px solid rgba(74,7,17,.15); text-align:center; vertical-align:middle;
  padding:3px 4px; font-size:.64rem; line-height:1.2;
}
.grade-semanal__tabela thead th{
  position:sticky; top:0; z-index:2;
  background: var(--dourado); color: var(--vermelho-escuro);
  font-family:'Cinzel'; font-weight:700; font-size:.62rem; padding:6px 4px;
}
.grade-semanal__tabela thead th:first-child{ z-index:3; }
.grade-semanal__tabela tbody th{
  position:sticky; left:0; z-index:1;
  background: var(--creme); color: var(--vermelho-escuro); font-weight:700;
  min-width:36px; font-size:.64rem;
}
.grade-semanal__tabela td{ min-width:92px; height:32px; }
.grade-semanal__tabela td.grade-semanal__cel--com-gente{ cursor:pointer; font-weight:600; }
.grade-semanal__tabela td.grade-semanal__cel--com-gente:hover{ filter:brightness(.94); }
.grade-semanal__cel--nicodemos{ background:#BDD7EE; }
.grade-semanal__cel--arautos{ background:#C6E0B4; }
.grade-semanal__cel--madalena{ background:#F4D9A0; }
.grade-semanal__cel--extra{ background:#CBB6E8; }
.grade-semanal__cel--aberto{ background:#E7ABAB; }
.grade-semanal__cel--missa{ background:#FFD700; color:#6B5900; font-weight:700; }
.grade-semanal__cel--bloqueado{
  background:#cfcfcf; color:#6a6a6a; font-size:.62rem; font-weight:600; line-height:1.15;
  text-align:center; letter-spacing:.2px; padding:2px 4px;
}
.calendario-grande{
  width:100%; max-width:460px; margin:0 auto; background: var(--branco);
  border: 1.5px solid var(--dourado); border-radius:14px;
  box-shadow: 0 14px 36px rgba(74,7,17,.12); padding: 20px; text-align:left;
}
.calendario-grande .calendario__dia.tem-agendamentos{
  position:relative; cursor:pointer; font-weight:700;
  background: linear-gradient(135deg, var(--vermelho-2), var(--vermelho-escuro));
  color:#fff; transition: transform .2s ease, box-shadow .2s ease;
}
.calendario-grande .calendario__dia.tem-agendamentos:hover{ transform: translateY(-2px); box-shadow: 0 6px 16px var(--vermelho-glow); }
.calendario__dia-badge{
  position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 3px;
  border-radius:999px; background: var(--dourado); color: var(--vermelho-escuro);
  font-family:'Cinzel'; font-size:.6rem; font-weight:700; line-height:16px; text-align:center;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.calendario__legenda-dupla{ margin-top:14px; display:flex; flex-direction:column; gap:6px; font-size:.72rem; color:var(--texto-suave); }
.calendario__legenda-dupla span{ display:flex; align-items:center; gap:7px; }
.legenda-dot{ width:10px; height:10px; border-radius:3px; display:inline-block; flex-shrink:0; }
.legenda-dot--disponivel{ background: rgba(205,164,52,.35); }
.legenda-dot--agendado{ background: linear-gradient(135deg, var(--vermelho-2), var(--vermelho-escuro)); }

/* modal de detalhes do dia (lista de quem reservou, por horário) */
.grupo-horario-dia{ margin-bottom:18px; }
.grupo-horario-dia:last-child{ margin-bottom:0; }
.grupo-horario-dia__titulo{
  font-family:'Cinzel'; font-weight:600; color: var(--vermelho-escuro); font-size:.92rem;
  margin-bottom:8px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.horario-vazio-msg{ margin:0; font-size:.82rem; color: var(--texto-suave); font-style:italic; }
.contagem-contatos{
  font-family:'Cinzel'; font-size:.7rem; font-weight:400; color: var(--texto-suave);
  background: rgba(122,12,30,.07); border-radius:999px; padding:2px 9px; margin-left:2px;
}

/* A planilha de agendamentos não fica mais encaixada como 2ª coluna no computador — em
   qualquer tamanho de tela agora ela só aparece em tela cheia, pelo botão "Ver planilha de
   agendamento" (ver .btn-ver-planilha e #modalCalendarioAgendamentos.tela-cheia acima). Por
   isso ".agendamento-colunas" e ".agendamento-colunas__principal" seguem em coluna única
   (mesmo layout do celular) em qualquer largura — sem media query de 900px pra elas. */

/* ---------- Avisos (acordeão: só o título fica visível até a pessoa tocar) ---------- */
.cartao-aviso{
  width:100%; border:1.5px solid rgba(157,122,31,.3); border-radius:14px; overflow:hidden;
  margin-bottom:18px; background:#fffefb; text-align:left; box-shadow: 0 4px 14px rgba(0,0,0,.05);
  transition: box-shadow var(--transicao);
}
.cartao-aviso.aberto{ box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.cartao-aviso__cabecalho{
  display:flex; align-items:center; gap:12px; width:100%; padding:16px 18px;
  background:none; border:none; cursor:pointer; text-align:left; font:inherit; color:inherit;
}
.cartao-aviso__cabecalho-texto{ flex:1; min-width:0; }
.cartao-aviso__titulo{
  display:block; font-family:'Cinzel'; font-weight:600; color: var(--vermelho-escuro); font-size:1.02rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cartao-aviso__dica{
  display:block; margin-top:5px; font-size:.74rem; font-style:italic; color: var(--dourado-escuro);
}
.cartao-aviso__seta{
  flex-shrink:0; width:18px; height:18px; color: var(--vermelho); transition: transform .25s ease;
}
.cartao-aviso.aberto .cartao-aviso__seta{ transform: rotate(180deg); }
.cartao-aviso__img{ width:100%; max-height:220px; object-fit:cover; display:block; }
.cartao-aviso__corpo{ padding:0 18px 18px; border-top:1px solid rgba(157,122,31,.2); padding-top:14px; }
.cartao-aviso__corpo.oculto{ display:none; }
.cartao-aviso__corpo .cartao-aviso__img{ border-radius:10px; margin-bottom:12px; }
.cartao-aviso__texto{ margin:0; font-size:.92rem; line-height:1.7; color: var(--texto); white-space:pre-wrap; }
.link-aviso{
  color: var(--vermelho-escuro); font-weight:600; text-decoration:underline;
  word-break:break-word; text-underline-offset:2px;
}
.link-aviso:hover{ color: var(--vermelho); }

/* ---------- Intenções da missa ---------- */
.intencoes-aviso-fecha{
  margin:0 0 20px; font-size:.82rem; color: var(--texto-suave); font-style:italic;
}
#listaMissasDoDia,
#avisoSemMissaNoDia,
#avisoSelecioneData{ margin-top:20px; }
.categoria-intencao{ margin-bottom:26px; }
.categoria-intencao:last-child{ margin-bottom:0; }
.categoria-intencao__titulo{
  font-family:'Cinzel'; font-size:.98rem; color: var(--vermelho-escuro); margin:0 0 10px;
  padding-bottom:6px; border-bottom:1.5px solid rgba(157,122,31,.3);
}
.categoria-intencao__lista{ display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.intencao-item{
  background: rgba(122,12,30,.05); border:1px solid rgba(157,122,31,.2);
  border-radius:10px; padding:9px 13px; font-size:.88rem; color: var(--texto); line-height:1.5;
  display:flex; align-items:center; gap:10px;
}
.intencao-item__texto{ flex:1; min-width:0; }
.intencao-item__acoes{ display:flex; gap:6px; flex-shrink:0; }
.intencao-item__btn{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; border:none; display:flex;
  align-items:center; justify-content:center; cursor:pointer;
  background: rgba(205,164,52,.15); color: var(--dourado-escuro); transition: background .2s ease, transform .2s ease;
}
.intencao-item__btn svg{ width:14px; height:14px; }
.intencao-item__btn:hover{ background: rgba(205,164,52,.28); transform: scale(1.06); }
.intencao-item__btn--apagar{ background: rgba(122,12,30,.08); color: var(--vermelho); }
.intencao-item__btn--apagar:hover{ background: rgba(122,12,30,.18); }
/* item entra em modo de edição: mesma "moldura", mas troca o texto por um formulário inline */
.intencao-item--editando{ flex-direction:column; align-items:stretch; gap:8px; }
.intencao-item__editar-form{ display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }
.intencao-item__editar-form textarea{
  flex:1; min-width:180px; border:1px solid rgba(157,122,31,.35); border-radius:10px;
  padding:9px 11px; font-family:'EB Garamond', serif; font-size:.92rem; color: var(--texto);
  background:#fffefb; resize:vertical;
}
.intencao-item__editar-form textarea:focus{ outline:none; border-color: var(--dourado); }
.intencao-item__editar-form input[type="text"]{
  flex:1; min-width:180px; border:1px solid rgba(157,122,31,.35); border-radius:10px;
  padding:9px 11px; font-family:'EB Garamond', serif; font-size:.92rem; color: var(--texto);
  background:#fffefb;
}
.intencao-item__editar-form input[type="text"]:focus{ outline:none; border-color: var(--dourado); }
.intencao-item__editar-acoes{ display:flex; gap:8px; flex-shrink:0; }
.intencao-item__editar-acoes--lista{ margin:-2px 0 10px; }
.categoria-intencao__vazio{ margin:0 0 10px; font-size:.82rem; color: var(--texto-suave); font-style:italic; }
.categoria-intencao__form{ display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }
.categoria-intencao__form textarea{
  flex:1; min-width:180px; border:1px solid rgba(157,122,31,.35); border-radius:10px;
  padding:9px 11px; font-family:'EB Garamond', serif; font-size:.92rem; color: var(--texto);
  background:#fffefb; resize:vertical;
}
.categoria-intencao__form textarea:focus{ outline:none; border-color: var(--dourado); }
.categoria-intencao__form input[type="text"]{
  flex:1; min-width:180px; border:1px solid rgba(157,122,31,.35); border-radius:10px;
  padding:9px 11px; font-family:'EB Garamond', serif; font-size:.92rem; color: var(--texto);
  background:#fffefb;
}
.categoria-intencao__form input[type="text"]:focus{ outline:none; border-color: var(--dourado); }
.categoria-intencao__form .btn{ flex-shrink:0; }

/* painel administrativo: lista de intenções — "Por alma"/"Aniversários" mostradas como um
   parágrafo único (só os nomes, separados por vírgula) em vez de uma caixa por pessoa — ver
   js/admin.js. O lápis ao lado do título alterna pra uma lista editável (um campo por nome). */
.intencao-nomes-paragrafo{
  margin:0 0 10px; font-size:.88rem; color: var(--texto); line-height:1.7;
  background: rgba(122,12,30,.05); border:1px solid rgba(157,122,31,.2); border-radius:10px; padding:10px 13px;
}
.grupo-horario-dia__titulo-texto{ flex:1; }
.intencao-nome-input{
  flex:1; min-width:120px; border:1px solid rgba(157,122,31,.35); border-radius:10px;
  padding:8px 11px; font-family:'EB Garamond', serif; font-size:.88rem; color: var(--texto);
  background:#fffefb; resize:vertical;
}
.intencao-nome-input:focus{ outline:none; border-color: var(--dourado); }

.link-whatsapp{
  flex-shrink:0; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(61,107,69,.1); color:#3d6b45; transition: background .2s ease, transform .2s ease;
}
.link-whatsapp:hover{ background: rgba(61,107,69,.2); transform: scale(1.06); }
.link-whatsapp svg{ width:17px; height:17px; }
.mensagem-vazia{ text-align:center; color: var(--texto-suave); font-style:italic; padding: 18px 0; }

/* ---------- lista de pessoas no modal "Ver detalhes" ---------- */
.lista-pessoas-ocupado{ display:flex; flex-direction:column; gap:10px; text-align:left; margin-top:14px; }
.pessoa-ocupado-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: rgba(122,12,30,.05); border:1px solid rgba(157,122,31,.25);
  border-radius:12px; padding:10px 14px;
}
.pessoa-ocupado-item__nome{ font-family:'Cinzel'; font-weight:600; color:var(--vermelho-escuro); font-size:.92rem; margin-bottom:2px; }
.pessoa-ocupado-item__tel{ color: var(--texto-suave); font-size:.85rem; }

/* ============ ABAS (agendados / cancelados) ============ */
.abas{ display:flex; gap:10px; margin-bottom:18px; width:100%; }
.aba{
  flex:1; padding: 11px; border-radius:10px; border: 1.5px solid rgba(157,122,31,.3);
  background: #fffefb; font-family:'Cinzel'; font-size:.85rem; color: var(--texto-suave);
  transition: all .2s ease;
}
.aba.ativa{
  background: linear-gradient(135deg, var(--vermelho-2), var(--vermelho-escuro));
  color:#fff; border-color: var(--vermelho-escuro);
}
.acoes-lista{ display:flex; justify-content:flex-end; width:100%; margin-bottom:12px; }
.btn-pequeno{ padding: 8px 16px; font-size:.78rem; }

/* ============ CARDS DE AGENDAMENTO ============ */
.lista-agendamentos{ display:flex; flex-direction:column; gap:16px; width:100%; }
.card-agendamento{
  background: var(--branco);
  border: 1px solid rgba(157,122,31,.28);
  border-left: 5px solid var(--dourado);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 10px 26px rgba(74,7,17,.1);
  animation: subir .5s ease both;
  transition: transform var(--transicao), box-shadow var(--transicao);
  position: relative; overflow:hidden;
}
.card-agendamento:hover{ transform: translateY(-3px); box-shadow: 0 16px 34px rgba(74,7,17,.16); }
.card-agendamento::before{
  content:"✝"; position:absolute; right:14px; top:10px; font-size:2.2rem;
  color: rgba(205,164,52,.12);
}
.card-agendamento__data{
  font-family:'Cinzel'; color: var(--vermelho-escuro); font-weight:600; font-size:1.05rem; margin-bottom:4px;
}
.card-agendamento__hora{ color: var(--texto-suave); font-size:.95rem; margin-bottom:12px; }
.card-agendamento__status{
  display:inline-block; font-size:.7rem; font-family:'Cinzel'; padding:4px 10px; border-radius:999px;
  background: rgba(122,12,30,.1); color: var(--vermelho); margin-bottom:12px; letter-spacing:.04em;
}
.card-agendamento__acoes{ display:flex; gap:10px; }
.card-agendamento .btn{ padding: 9px 18px; font-size:.78rem; }
.card-vazio{
  text-align:center; padding: 50px 20px; color: var(--texto-suave);
}
.card-vazio .selo-decorativo{ margin: 0 auto 14px; height:56px; filter: drop-shadow(0 2px 5px rgba(74,7,17,.3)); }

/* ============ MODAIS ============ */
.modal-overlay{
  position: fixed; inset:0; background: rgba(15,3,5,.6); backdrop-filter: blur(3px);
  display:flex; align-items:center; justify-content:center; padding: 20px;
  opacity:0; pointer-events:none; transition: opacity var(--transicao); z-index: 400;
}
.modal-overlay.aberto{ opacity:1; pointer-events:auto; }
.modal{
  background: linear-gradient(180deg, #fffdf8, #faf3e6);
  border: 1.5px solid var(--dourado);
  border-radius: 18px;
  max-width: 420px; width:100%;
  padding: 30px 26px 26px;
  text-align:center;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  transform: scale(.92) translateY(10px);
  transition: transform var(--transicao);
  position: relative;
}
.modal-overlay.aberto .modal{ transform: scale(1) translateY(0); }
.modal__icone{
  display:flex; justify-content:center; margin: 0 auto 14px; color: var(--dourado);
}
.modal__icone svg{ width:56px; height:56px; }
.modal__icone img{ height:82px; width:auto; filter: drop-shadow(0 3px 8px rgba(74,7,17,.3)); }
.modal h3{ font-size:1.15rem; margin-bottom:12px; }
.modal p{ color: var(--texto-suave); line-height:1.6; margin-bottom:22px; }
.modal p strong{ color: var(--vermelho-escuro); }
.modal__acoes{ display:flex; gap:12px; }
.modal__acoes .btn{ flex:1; }
.modal--fechar{
  position:absolute; top:12px; right:14px; background:none; border:none; font-size:1.3rem; color: var(--texto-suave);
  z-index:2;
}
.modal--largo{
  max-height: calc(100vh - 40px);
  /* dvh (altura "dinâmica" de viewport) acompanha a barra de endereço do celular sumindo/
     aparecendo — sem isso, "vh" no celular é calculado com base na tela SEM a barra de
     endereço (maior que o espaço realmente visível), fazendo o modal nascer maior que a tela
     e cortar o conteúdo de baixo. Repetir a propriedade assim é seguro: navegadores que não
     conhecem "dvh" simplesmente ignoram essa linha e ficam com o valor em "vh" de cima. */
  max-height: calc(100dvh - 40px);
  display:flex; flex-direction:column;
}
.modal--largo h3{ flex-shrink:0; }
.modal__conteudo-scroll{
  overflow-y:auto; flex:1 1 auto; min-height:0;
  padding-right:6px; margin-right:-6px;
}

/* ============ BOTÃO "INSTALAR APP" (PWA) ============ */
.btn-instalar-app{
  position: fixed; right: 18px; bottom: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 350;
  display:flex; align-items:center; gap:10px;
  padding: 10px 18px 10px 10px; border: none; border-radius: 999px; cursor:pointer;
  background: linear-gradient(135deg, var(--dourado-claro), var(--dourado) 55%, var(--dourado-escuro));
  color: var(--vermelho-escuro);
  font-family:'Cinzel'; font-weight:600; font-size:.82rem; letter-spacing:.02em;
  box-shadow: 0 10px 26px rgba(157,122,31,.5), inset 0 1px 0 rgba(255,255,255,.6);
  opacity:0; transform: translateY(16px) scale(.92); pointer-events:none;
  transition: opacity .35s ease, transform .35s ease, box-shadow var(--transicao);
}
.btn-instalar-app.visivel{ opacity:1; transform: translateY(0) scale(1); pointer-events:auto; }
.btn-instalar-app:hover{ box-shadow: 0 14px 32px rgba(157,122,31,.65), inset 0 1px 0 rgba(255,255,255,.7); transform: translateY(-2px); }
.btn-instalar-app img{
  width: 30px; height:30px; border-radius:50%; display:block;
  box-shadow: 0 0 0 2px rgba(255,255,255,.5);
}
.btn-instalar-app span{ white-space:nowrap; }
@media (max-width: 420px){
  .btn-instalar-app span{ display:none; }
  .btn-instalar-app{ padding: 8px; }
}

.popover-instalar-ios{
  position: fixed; right: 18px; bottom: 78px;
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  z-index: 351; max-width: 260px;
  background: linear-gradient(180deg, #fffdf8, #faf3e6);
  border: 1.5px solid var(--dourado); border-radius: 16px;
  padding: 16px 18px; box-shadow: 0 16px 40px rgba(0,0,0,.35);
  animation: subir .35s ease both;
}
.popover-instalar-ios p{ margin:0; font-size:.85rem; line-height:1.5; color: var(--texto-suave); padding-right:16px; }
.popover-instalar-ios strong{ color: var(--vermelho-escuro); }
.popover-instalar-ios__fechar{
  position:absolute; top:8px; right:10px; background:none; border:none; font-size:1.1rem; color: var(--texto-suave); cursor:pointer;
}

/* ============ TOAST ============ */
.toast{
  position: fixed; bottom: 26px; left:50%; transform: translateX(-50%) translateY(30px);
  background: linear-gradient(135deg, var(--vermelho-2), var(--vermelho-escuro));
  color:#fff; padding: 14px 24px; border-radius: 999px; font-family:'Cinzel'; font-size:.85rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.35); z-index: 500;
  opacity:0; pointer-events:none; transition: all .4s ease;
  border: 1px solid rgba(240,215,140,.5);
}
.toast.mostrar{ opacity:1; transform: translateX(-50%) translateY(0); }

/* ============ SPINNER ============ */
.spinner{
  width: 40px; height:40px; border-radius:50%;
  border: 3px solid rgba(205,164,52,.25); border-top-color: var(--dourado);
  animation: girar 0.9s linear infinite; margin: 30px auto;
}
@keyframes girar{ to{ transform: rotate(360deg); } }

/* ============ SKELETON (placeholders de conteúdo enquanto os dados chegam) ============
   Em vez de uma tela de "carregando", mostra a forma do conteúdo (cartão/linha) com um brilho
   suave passando por cima — assim que o dado real chega, esses blocos são trocados pelo conteúdo. */
.skeleton-linha{
  border-radius: 8px;
  background: linear-gradient(100deg, rgba(157,122,31,.1) 30%, rgba(205,164,52,.22) 50%, rgba(157,122,31,.1) 70%);
  background-size: 220% 100%;
  animation: brilho-skeleton 1.4s ease-in-out infinite;
}
@keyframes brilho-skeleton{ from{ background-position: 140% 0; } to{ background-position: -40% 0; } }

.skeleton-aviso{
  width:100%; border:1.5px solid rgba(157,122,31,.18); border-radius:14px; overflow:hidden;
  margin-bottom:18px; background:#fffefb; padding:16px 18px;
}
.skeleton-aviso .skeleton-linha{ height:14px; margin-bottom:10px; }
.skeleton-aviso .skeleton-linha:nth-child(1){ width:55%; height:16px; }
.skeleton-aviso .skeleton-linha:nth-child(2){ width:100%; }
.skeleton-aviso .skeleton-linha:nth-child(3){ width:88%; }
.skeleton-aviso .skeleton-linha:last-child{ margin-bottom:0; }

.skeleton-agendamento{
  background: var(--branco); border: 1px solid rgba(157,122,31,.2); border-left: 5px solid rgba(205,164,52,.4);
  border-radius: 14px; padding: 18px 20px; margin-bottom:16px;
}
.skeleton-agendamento .skeleton-linha{ height:12px; margin-bottom:10px; }
.skeleton-agendamento .skeleton-linha:nth-child(1){ width:36%; height:11px; }
.skeleton-agendamento .skeleton-linha:nth-child(2){ width:64%; height:16px; }
.skeleton-agendamento .skeleton-linha:last-child{ width:44%; margin-bottom:0; }

/* variante clara, pro card-frase (fundo escuro translúcido) */
.skeleton-frase .skeleton-linha{
  height:14px; margin:0 auto 12px; background: linear-gradient(100deg, rgba(255,253,248,.14) 30%, rgba(240,215,140,.4) 50%, rgba(255,253,248,.14) 70%);
  background-size: 220% 100%;
}
.skeleton-frase .skeleton-linha:nth-child(1){ width:92%; }
.skeleton-frase .skeleton-linha:nth-child(2){ width:78%; }
.skeleton-frase .skeleton-linha:nth-child(3){ width:40%; height:11px; margin-top:6px; margin-bottom:0; }

/* ============ RODAPÉ ============ */
.rodape-simples{
  text-align:center; padding: 22px 16px 4px; font-size:.78rem; color: rgba(255,253,248,.7);
}
.pagina-clara .rodape-simples{ color: var(--texto-suave); }

.rodape-dev{
  text-align:center; padding: 0 16px 22px; margin: 0;
  font-size:.68rem; font-weight:700; letter-spacing:.02em; color: rgba(255,253,248,.5);
}
.pagina-clara .rodape-dev{ color: var(--texto-suave); opacity:.7; }

/* ============ PÁGINA DE CONTATOS ============ */
.painel-contatos{ padding-bottom:8px; }
.contato-card{
  display:flex; align-items:flex-start; gap:16px; width:100%;
  padding:18px 0;
}
.contato-card + .contato-card{ border-top:1.5px dashed rgba(157,122,31,.3); }
.contato-card__icone{
  flex-shrink:0; width:46px; height:46px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(205,164,52,.22), rgba(122,12,30,.08));
  border:1px solid rgba(157,122,31,.25); color: var(--vermelho-escuro);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}
.contato-card__corpo{ flex:1; min-width:0; padding-top:2px; }
.contato-card__rotulo{
  font-family:'Cinzel'; font-size:.76rem; letter-spacing:.04em; text-transform:uppercase;
  color: var(--dourado-escuro); margin-bottom:5px; font-weight:600;
}
.contato-card__valor{ font-size:.98rem; line-height:1.6; color: var(--texto); word-break:break-word; font-weight:600; }
.contato-card__obs{ font-size:.82rem; color: var(--texto-suave); margin-top:2px; line-height:1.5; }
.contato-acoes{ display:flex; gap:10px; flex-wrap:wrap; margin-top:13px; }

/* botões de ação personalizados por tipo de contato — pílula fina, discreta, com leve realce na cor do serviço */
.btn-contato{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 18px; border-radius:999px; text-decoration:none;
  font-family:'Cinzel'; font-weight:600; font-size:.76rem; letter-spacing:.02em;
  border:1.5px solid transparent; transition: transform var(--transicao), box-shadow var(--transicao), background var(--transicao);
}
.btn-contato:hover{ transform: translateY(-2px); }
.btn-contato svg{ flex-shrink:0; }
.btn-contato--mapa{ color: var(--vermelho-escuro); background: rgba(122,12,30,.07); border-color: rgba(122,12,30,.18); }
.btn-contato--mapa:hover{ background: rgba(122,12,30,.14); box-shadow: 0 6px 16px rgba(122,12,30,.15); }
.btn-contato--ligar{ color: var(--dourado-escuro); background: rgba(205,164,52,.14); border-color: rgba(157,122,31,.3); }
.btn-contato--ligar:hover{ background: rgba(205,164,52,.24); box-shadow: 0 6px 16px rgba(157,122,31,.2); }
.btn-contato--whats{ color:#1c6b4a; background: rgba(37,140,94,.1); border-color: rgba(37,140,94,.28); }
.btn-contato--whats:hover{ background: rgba(37,140,94,.18); box-shadow: 0 6px 16px rgba(37,140,94,.18); }
.btn-contato--instagram{ color:#9a3f7a; background: rgba(191,74,140,.1); border-color: rgba(191,74,140,.28); }
.btn-contato--instagram:hover{ background: rgba(191,74,140,.18); box-shadow: 0 6px 16px rgba(191,74,140,.18); }

/* ============ NAVEGAÇÃO ENTRE PÁGINAS (avançar / voltar) — discreta, no rodapé do conteúdo ============ */
.navegacao-paginas{
  display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%;
  margin-top:30px; padding-top:16px; border-top:1px solid rgba(157,122,31,.22);
}
.navegacao-paginas__item{
  display:flex; align-items:center; gap:8px; min-width:0; max-width:47%;
  text-decoration:none; padding:4px 2px; opacity:.78;
  transition: opacity var(--transicao), transform var(--transicao);
}
.navegacao-paginas__item:hover{ opacity:1; transform: translateY(-1px); }
.navegacao-paginas__item--proxima{ flex-direction:row-reverse; text-align:right; margin-left:auto; }
.navegacao-paginas__seta{
  width:15px; height:15px; flex-shrink:0; color: var(--dourado);
}
.pagina-clara .navegacao-paginas__seta{ color: var(--dourado-escuro); }
.navegacao-paginas__textos{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.navegacao-paginas__item--proxima .navegacao-paginas__textos{ align-items:flex-end; }
.navegacao-paginas__rotulo{
  font-size:.62rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--dourado-claro); font-family:'Cinzel'; opacity:.85;
}
.pagina-clara .navegacao-paginas__rotulo{ color: var(--dourado-escuro); }
.navegacao-paginas__nome{
  font-family:'Cinzel'; font-weight:600; font-size:.8rem; line-height:1.3;
  color: var(--branco); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%;
}
.pagina-clara .navegacao-paginas__nome{ color: var(--vermelho-escuro); }

/* ============ RESPONSIVO ============ */
@media (min-width: 720px){
  .conteudo{ padding-top: 60px; }
  .grade-horarios{ grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); }

  /* Intenções da missa: no computador, as listas de missa do dia ficam lado a lado
     (no celular continuam empilhadas, uma embaixo da outra). */
  #conteudoIntencoes{ max-width: 840px; }
  #conteudoIntencoes #painelDataIntencoes{ max-width: 560px; margin-left:auto; margin-right:auto; }
  #listaMissasDoDia{ width:100%; max-width:560px; margin-left:auto; margin-right:auto; }
  #listaMissasDoDia > .painel{ margin-top:0; }
}

.oculto{ display:none !important; }

/* aviso do limite de datas (Intenções): "só até dd/mm/aaaa" */
.painel__aviso-limite{ margin:10px 0 0; font-size:.82rem; color: var(--texto-suave); line-height:1.5; }

/* ============ INTENÇÕES: janelas (modais) do preenchimento da lista ============ */
.modal--pequeno{ max-width: 380px; }
.modal__data{ margin:-4px 0 18px; font-size:.9rem; color: var(--texto-suave); }
.modal__icone--ok{ color: var(--verde-2); }
.escolher-lista{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.escolher-lista .btn{ margin:0; }
.opcao-lista{ display:flex; flex-direction:column; align-items:center; gap:2px; padding-top:12px; padding-bottom:12px; }
.opcao-lista small{ font-family:'EB Garamond', serif; font-size:.74rem; letter-spacing:0; text-transform:none; opacity:.85; font-weight:500; }
.opcao-lista__hora{ font-size:.95rem; }
.modal-overlay .modal .btn-full + .btn-full{ margin-top:0; }

/* na página: um cartão com os horários do dia selecionado */
.linha-missa-dia{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 0; border-top:1px solid rgba(157,122,31,.2);
}
.linha-missa-dia:first-of-type{ border-top:none; }
.linha-missa-dia__info{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 180px; }
.linha-missa-dia__info strong{ font-family:'Cinzel'; font-size:.92rem; color: var(--vermelho-escuro); }
.linha-missa-dia__info small{ font-size:.8rem; color: var(--texto-suave); line-height:1.4; }

/* a lista de intenções propriamente dita */
.modal--intencoes{
  max-width: 560px; padding:0; text-align:left;
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px);
  display:flex; flex-direction:column; overflow:hidden;
}
.intencoes-modal__topo{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:22px 24px 14px; border-bottom:1px solid rgba(157,122,31,.25); flex-shrink:0;
}
.intencoes-modal__topo h3{ margin:0 0 2px; font-size:1.1rem; }
.intencoes-modal__sub{ margin:0; font-size:.85rem; color: var(--texto-suave); }
.selo-rascunho{
  font-family:'Cinzel'; font-size:.68rem; padding:5px 11px; border-radius:999px; letter-spacing:.03em;
  background: rgba(205,164,52,.18); color: var(--dourado-escuro); white-space:nowrap;
}
.selo-rascunho--ok{ background: rgba(61,114,71,.16); color: var(--verde-escuro); }
.selo-rascunho--pendente{ background: rgba(122,12,30,.1); color: var(--vermelho); }
.intencoes-modal__corpo{
  position:relative; flex:1; min-height:0; overflow-y:auto; padding:16px 24px 24px;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
}
.intencoes-modal__rodape{
  display:grid; grid-template-columns: 1fr 1.5fr 1.5fr; gap:8px; align-items:stretch;
  padding:14px 18px; border-top:1px solid rgba(157,122,31,.25); flex-shrink:0;
  background: linear-gradient(180deg, #fffdf8, #faf3e6);
}
.intencoes-modal__rodape .btn{ padding:10px 6px; font-size:.7rem; line-height:1.25; white-space:normal; }
.entradas-vazio{ text-align:center; padding:10px 6px 18px; font-size:.88rem; }
.entradas-grupo{ margin-bottom:18px; }
.intencao-item__texto--destaque{ font-weight:700; }

.editor-intencao{ margin-top:14px; padding-top:16px; border-top:1.5px dashed rgba(157,122,31,.4); }
.editor-intencao .campo{ margin-bottom:14px; }
.editor-intencao .campo label{ display:block; margin-bottom:6px; }
.editor-intencao textarea{ width:100%; resize:vertical; min-height:84px; }
.editor-intencao .campo-legenda{
  margin:4px 0 8px; font-family:'Cinzel'; font-size:.8rem; color: var(--vermelho-escuro);
}
.btn-mais, .btn-adicionar-nome{ margin-top:4px; }
.btn-adicionar-nome{ margin-bottom:12px; }

.seletor-categoria{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left;
  padding:13px 14px; border-radius:12px; border:1.5px solid rgba(157,122,31,.5); background:#fffefb;
  font-family:'EB Garamond', serif; font-size:1rem; color: var(--texto); cursor:pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.seletor-categoria:hover, .seletor-categoria:focus-visible{ border-color: var(--dourado); box-shadow:0 0 0 3px rgba(205,164,52,.2); outline:none; }
.seletor-categoria svg{ width:18px; height:18px; flex-shrink:0; color: var(--vermelho); }
.seletor-categoria--vazio span{ color: var(--texto-suave); opacity:.8; }

.opcoes-tempo{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.opcao-tempo{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; padding:10px 13px; border-radius:11px;
  border:1.5px solid rgba(157,122,31,.35); background:#fffefb; cursor:pointer; user-select:none;
  transition: background .2s ease, border-color .2s ease;
}
.opcao-tempo input{ accent-color: var(--vermelho); width:18px; height:18px; margin:0; flex-shrink:0; }
.opcao-tempo__texto{ font-family:'Cinzel'; font-size:.84rem; color: var(--vermelho-escuro); }
.opcao-tempo.marcada{ background: linear-gradient(135deg, rgba(240,215,140,.55), rgba(205,164,52,.35)); border-color: var(--dourado-escuro); }
.opcao-tempo__dica{ flex-basis:100%; font-size:.76rem; line-height:1.4; color: var(--texto-suave); font-style:italic; padding-left:28px; }

/* prévia: como a lista vai aparecer */
.modal--previa{ max-width: 520px; max-height: calc(100dvh - 40px); display:flex; flex-direction:column; text-align:left; }
.modal--previa h3, .modal--previa .modal__data{ text-align:center; flex-shrink:0; }
.previa-lista{ flex:1; min-height:0; overflow-y:auto; margin-bottom:16px; padding-right:2px; }
.previa-grupo{ margin-bottom:16px; }
.previa-grupo h4{
  font-family:'Cinzel'; font-size:.9rem; color: var(--vermelho-escuro); margin:0 0 6px;
  padding-bottom:5px; border-bottom:1.5px solid rgba(157,122,31,.3);
}
.previa-grupo ul{ margin:0; padding:0 0 0 4px; list-style:none; columns:2; column-gap:20px; }
.previa-grupo li{ break-inside:avoid; padding:2px 0; font-size:.92rem; line-height:1.45; color: var(--texto); }
.previa-grupo li.previa-destaque{ font-weight:700; }

/* PIX */
.pix-qr{ display:block; margin:0 auto 14px; width:100%; max-width:240px; border-radius:12px; border:1px solid rgba(157,122,31,.35); background:#fff; padding:8px; }
.pix-beneficiario{ margin:0 0 14px !important; font-size:.85rem; }
.pix-chave{ display:flex; flex-direction:column; gap:6px; align-items:stretch; margin-bottom:18px; text-align:left; }
.pix-chave__rotulo{ font-family:'Cinzel'; font-size:.7rem; color: var(--texto-suave); letter-spacing:.05em; text-transform:uppercase; }
.pix-chave code{
  display:block; padding:10px 12px; border-radius:10px; background: rgba(122,12,30,.05);
  border:1px solid rgba(157,122,31,.25); font-size:.78rem; word-break:break-all; max-height:84px; overflow:auto;
}

@media (max-width: 420px){
  .intencoes-modal__topo{ padding:18px 16px 12px; }
  .intencoes-modal__corpo{ padding:14px 16px 20px; }
  .intencoes-modal__rodape{ grid-template-columns: 1fr 1fr; }
  .intencoes-modal__rodape #btnListaEnviar{ grid-column: 1 / -1; }
  .previa-grupo ul{ columns:1; }
}

/* seletor de hora dentro de janelas (modais): abre no fluxo normal, sem ficar cortado */
.modal .seletor-hora{ position:static; width:100%; margin-top:8px; display:none; }
.modal .seletor-hora.aberto{ display:block; }

/* ============ HOME NO CELULAR: tudo cabe em uma tela só, sem precisar rolar ============
   A tela inicial (body.pagina-home) ocupa exatamente a altura visível do aparelho: o título, o
   banner, a frase do dia e os 4 atalhos se ajustam (espaços e tamanhos menores) pra caber de uma
   vez. Em celulares muito baixinhos a página ainda rola, só por segurança. */
@media (max-width: 600px){
  .pagina-home{ min-height:100vh; min-height:100dvh; }
  .pagina-home .conteudo{ padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); justify-content:space-between; }
  .pagina-home .titulo-cidade{ margin-bottom: 10px; font-size:.74rem; }
  .pagina-home .carrossel-banners{ margin-bottom: 10px; }
  .pagina-home .carrossel-banners__pontos{ margin-top:6px; }
  .pagina-home .card-frase{ padding: 14px 16px; margin-bottom: 10px; }
  .pagina-home .card-frase__eyebrow{ margin-bottom:6px; font-size:.66rem; }
  .pagina-home .card-frase blockquote{ font-size: clamp(.9rem, 2.4dvh, 1.05rem); line-height:1.4; margin-bottom:6px; }
  .pagina-home .card-frase cite{ font-size:.78rem; }
  /* os 4 atalhos dividem o espaço que sobrar na tela (2 linhas de altura igual) */
  .pagina-home .atalhos-grade{ flex:1 1 auto; margin-top:0; gap:10px; grid-auto-rows: minmax(0, 1fr); min-height:164px; max-height:300px; }
  .pagina-home .atalho-card{ padding: 8px 8px; gap:6px; justify-content:center; }
  .pagina-home .atalho-card__icone{ width: clamp(34px, 6dvh, 46px); height: clamp(34px, 6dvh, 46px); }
  .pagina-home .atalho-card__icone svg{ width:20px; height:20px; }
  .pagina-home .atalho-card__texto{ font-size:.74rem; line-height:1.25; }
  .pagina-home .rodape-simples{ display:none; }
}
@media (max-width: 600px) and (max-height: 680px){
  .pagina-home .topbar{ min-height:54px; padding:8px 16px; }
  .pagina-home .topbar__logo{ height:36px; }
  .pagina-home .card-frase blockquote{ font-size:.86rem; line-height:1.32; }
  .pagina-home .atalho-card__texto{ font-size:.68rem; }
  .pagina-home .card-frase{ padding: 10px 14px; margin-bottom:8px; }
  .pagina-home .carrossel-banners{ margin-bottom:8px; }
  .pagina-home .atalhos-grade{ min-height:150px; gap:8px; }
}

/* botão "Copiar PIX": fica verde por alguns segundos depois de copiar */
#btnCopiarPix.btn-copiado{ background: var(--verde-2); border-color: var(--verde-2); color:#fff; }

#pixMensagem{ white-space: pre-line; }

/* ============ BARRA DE BAIXO DO CELULAR EM VERMELHO (igual à de cima) ============
   O vermelho de cima vem do theme-color; embaixo, quando o aparelho deixa o app ocupar a tela
   inteira, esta faixa e o fundo da página pintam a área da barra de navegação do Android. */
body.tela-fundo{ background: transparent; } /* a foto de fundo (::before) aparece por cima do fundo da página, que é vermelho */
@media (max-width: 719px){ html{ background-color:#7a0c1e; } }
.barra-inferior-app{
  position:fixed; left:0; right:0; bottom:0; height: env(safe-area-inset-bottom, 0px);
  background:#7a0c1e; z-index:9999; pointer-events:none;
}

/* ============ CONTATOS: 3 cartões clicáveis + "Faça a Sua Contribuição!" ============ */
.contatos-cards{
  width:100%; display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-rows:1fr; gap:10px;
}
.contato-quadro{
  min-width:0; min-height:170px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:5px;
  padding:22px 6px 14px; text-align:center; text-decoration:none; color: var(--texto);
  background: linear-gradient(160deg, #fffdf8 0%, #fbf1da 100%);
  border:1px solid rgba(157,122,31,.38); border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(74,7,17,.1), inset 0 1px 0 rgba(255,255,255,.8);
  animation: subir .6s ease both;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.contato-quadro:hover, .contato-quadro:focus-visible{
  transform: translateY(-4px); border-color: var(--dourado-escuro);
  box-shadow: 0 16px 32px rgba(74,7,17,.16), inset 0 1px 0 rgba(255,255,255,.8);
}
.contato-quadro:active{ transform: translateY(-1px) scale(.98); }
.contato-quadro__icone{ width:30px; height:30px; color: var(--dourado-escuro); margin-bottom:4px; flex-shrink:0; }
.contato-quadro__titulo{
  font-family:'Cinzel'; font-size:.82rem; font-weight:700; letter-spacing:.02em; color: var(--vermelho-escuro);
}
.contato-quadro__valor{ font-size:.7rem; line-height:1.25; color: var(--texto); font-weight:600; max-width:100%; white-space:nowrap; letter-spacing:-.01em; }
.contato-quadro__valor--curto{ white-space:normal; overflow-wrap:break-word; }
.contato-quadro__dica{ font-size:.62rem; line-height:1.3; color: var(--texto-suave); margin-top:2px; }
@media (min-width: 520px){
  .contatos-cards{ gap:16px; }
  .contato-quadro{ padding:30px 12px 20px; gap:7px; min-height:200px; }
  .contato-quadro__icone{ width:38px; height:38px; }
  .contato-quadro__titulo{ font-size:1rem; }
  .contato-quadro__valor{ font-size:.92rem; }
  .contato-quadro__dica{ font-size:.76rem; }
}
.contato-endereco-completo{
  margin:12px 4px 0; font-size:.82rem; line-height:1.5; color: var(--texto-suave); text-align:center;
}
@media (min-width: 520px){
  .contatos-cards{ gap:16px; }
  .contato-quadro{ padding:14px 10px; gap:6px; min-height:196px; }
  .contato-quadro__icone{ width:50px; height:50px; font-size:1.4rem; }
  .contato-quadro__rotulo{ font-size:.78rem; }
  .contato-quadro__valor{ font-size:.95rem; }
  .contato-quadro .btn-contato{ padding:6px 12px; font-size:.74rem; }
  .contato-quadro .btn-contato svg{ width:14px; height:14px; }
}

.painel-contribuicao{ margin-top:22px; text-align:center; padding:26px 20px 24px; }
.painel-contribuicao__titulo{
  font-family:'Cinzel'; font-size:1.2rem; letter-spacing:.02em; color: var(--vermelho-escuro); margin:0 0 12px;
}
.painel-contribuicao__mensagem{ white-space: pre-line; margin:0 0 18px; line-height:1.65; color: var(--texto-suave); }
.painel-contribuicao .pix-beneficiario{ color: var(--texto-suave); line-height:1.5; }
.painel-contribuicao .pix-chave{ margin-bottom:0; }

#enviadoPergunta{ white-space: pre-line; }

/* ============ WIDGET FLUTUANTE DISCRETO (leva à página Contatos) ============ */
.widget-colabore{
  position:fixed; right:10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index:140;
  display:flex; align-items:center; gap:2px; max-width: calc(100vw - 24px);
  opacity:0; transform: translateY(10px); pointer-events:none;
  transition: opacity .5s ease, transform .5s ease;
}
.widget-colabore.visivel{ opacity:.9; transform:none; pointer-events:auto; }
.widget-colabore__link{
  display:flex; align-items:center; gap:0; height:36px; min-width:36px; padding:0 9px; overflow:hidden;
  border-radius:999px; text-decoration:none; color: var(--dourado-claro);
  background: rgba(74,7,17,.88); border:1px solid rgba(205,164,52,.55);
  box-shadow: 0 6px 18px rgba(40,10,10,.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: padding .35s ease, box-shadow .2s ease, background .2s ease;
}
.widget-colabore__link:hover{ background: rgba(122,12,30,.95); box-shadow: 0 8px 22px rgba(40,10,10,.36); }
.widget-colabore__icone{ width:18px; height:18px; flex-shrink:0; }
.widget-colabore__texto{
  max-width:0; opacity:0; white-space:nowrap; overflow:hidden;
  font-family:'Cinzel'; font-size:.66rem; letter-spacing:.03em; color: var(--creme);
  transition: max-width .45s ease, opacity .35s ease, margin .35s ease;
}
.widget-colabore.aberto .widget-colabore__link{ padding-right:14px; }
.widget-colabore.aberto .widget-colabore__texto{ max-width: 240px; opacity:1; margin-left:8px; }
.widget-colabore__fechar{
  display:none; width:22px; height:22px; border-radius:50%; border:0; padding:0; cursor:pointer;
  background: rgba(74,7,17,.88); color: var(--dourado-claro); font-size:.95rem; line-height:1;
  align-items:center; justify-content:center;
}
.widget-colabore.aberto .widget-colabore__fechar{ display:inline-flex; }
@media (hover:hover){ .widget-colabore__link:hover .widget-colabore__texto{ max-width:240px; opacity:1; margin-left:8px; } }
@media print{ .widget-colabore{ display:none; } }

.campo-dica{ display:block; margin-top:5px; font-size:.78rem; line-height:1.4; color: var(--texto-suave); }
.editor-intencao .campo input[type="text"]{ width:100%; }

/* ============ MICROFONE NOS CAMPOS DE TEXTO (ditado por voz) ============ */
.campo-voz{ position:relative; display:block; width:100%; min-width:0; flex:1 1 180px; }
.campo-voz > input, .campo-voz > textarea{ padding-right:42px !important; width:100% !important; min-width:0 !important; box-sizing:border-box; }
.campo-voz__botao{
  position:absolute; right:8px; top:50%; transform: translateY(-50%);
  width:28px; height:28px; padding:0; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color: var(--dourado-escuro); background: rgba(205,164,52,.14); border:1px solid rgba(157,122,31,.35);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.campo-voz--area .campo-voz__botao{ top:9px; transform:none; }
.campo-voz__botao svg{ width:15px; height:15px; }
.campo-voz__botao:hover{ background: rgba(205,164,52,.28); }
.campo-voz__botao.ouvindo{
  color:#fff; background: var(--vermelho); border-color: var(--vermelho);
  animation: voz-pulso 1.3s ease-out infinite;
}
@keyframes voz-pulso{
  0%{ box-shadow: 0 0 0 0 rgba(122,12,30,.45); }
  100%{ box-shadow: 0 0 0 11px rgba(122,12,30,0); }
}
@media (prefers-reduced-motion: reduce){ .campo-voz__botao.ouvindo{ animation:none; } }

/* texto só para leitores de tela e buscadores (ex.: nome completo no título da home) */
.so-leitor{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}