:root{
  --bg1:#0b1220;
  --bg2:#111b2e;
  --card: rgba(255,255,255,.07);
  --border: rgba(255,255,255,.10);
  --text:#e9eefc;
  --muted:#b8c3e6;
  --shadow: 0 18px 45px rgba(0,0,0,.35);
  --radius: 18px;

	--msg:        #8B7CFF;  /* roxo */
	--missa:      #2EC4B6;  /* turquesa */
	--doacao:     #FF5C7A;  /* rosa */
	--info:       #F4A261;  /* laranja */
	--dizimista:  #4D8CFF;  /* azul */
	--local:      #FF8C42;  /* laranja forte */
	--pascoa:     #C77DFF;  /* violeta */
	--servico:   #4C9A6A;  /* verde pastoral */
	--catequese: #7A4E2D;
  
}

*{ box-sizing:border-box; }
html,body{ min-height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Helvetica Neue", sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(900px 600px at 80% 20%, rgba(25,211,197,.14), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.wrap{
  min-height:100vh; 
  display:flex;
  align-items:flex-start; 
  justify-content:center;
  padding: clamp(16px, 3vw, 28px);
}

.container{
  width: min(820px, 100%);
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 26px;
  box-shadow: var(--shadow);
  overflow:hidden;
}

header{
  padding: 22px 22px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.05), transparent);
}

.brand{
  display:flex;
  align-items:center;
  gap: 14px;
  justify-content:space-between;
}

.brand-left{
  display:flex;
  align-items:center;
  gap:14px;
}

.logo{
  width: 100px;
  height: 100px;
  border-radius: 16px;
  background: #ffffff; /* fundo branco para logos */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  overflow: hidden;
}
.logo img{
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;
}


h1{
  margin:0;
  font-size: 20px;
  line-height:1.15;
}
.subtitle{
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.clock{
  text-align:right;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  min-width: 130px;
}
.clock .time{ font-size: 18px; font-weight: 900; letter-spacing: .5px; }
.clock .date{ font-size: 11px; color: var(--muted); margin-top:2px; }

main{
  padding: 18px 22px 22px;
}

.menu{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

a.btn{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;

  text-decoration:none;
  color: var(--text);
  padding: 18px 18px;
  border-radius: var(--radius);

  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 12px 28px rgba(0,0,0,.25);

  font-size: 18px;
  font-weight: 900;
  letter-spacing:.02em;

  transition: transform .14s ease, border-color .14s ease, background .14s ease;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
a.btn:active{ transform: scale(.985); }
a.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.09);
}

.left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}
.dot{
  width: 12px; height: 12px;
  border-radius: 999px;
  box-shadow: 0 0 0 6px rgba(255,255,255,.06);
  flex: 0 0 auto;
}
.arrow{
  opacity:.75;
  font-size: 18px;
  flex: 0 0 auto;
}
.hint{
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.msg .dot{ background: var(--msg); }
.missa .dot{ background: var(--missa); }
.doacao .dot{ background: var(--doacao); }
.info .dot{ background: var(--info); }
.dizimista .dot{ background: var(--dizimista); }
.local .dot{ background: var(--local); }
.pascoa .dot{ background: var(--pascoa); }
.servico .dot{ background: var(--servico); }
.catequese .dot{ background: var(--catequese); }

footer{
  height: 48px;                 /* altura do “quadrado” do footer */
  display: flex;
  align-items: center;          /* centraliza na vertical */
  justify-content: center;      /* centraliza na horizontal */

  text-align: center;
  color: rgba(184,195,230,.8);
  font-size: 12px;

  border-top: 1px solid rgba(255,255,255,.06);
}


/* Content page helpers */
.page-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.back{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  text-decoration:none;
  font-weight: 900;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
  -webkit-tap-highlight-color: transparent;
}
.back:hover{ background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); }
.back:active{ transform: scale(.985); }

.card{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 14px;
  margin-top: 12px;
}
.card h2{
  margin: 0 0 6px;
  font-size: 16px;
}
.card p{
  margin:0;
  color: var(--muted);
  font-size: 14px;
  line-height:1.5;
}

.grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
.pill{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  color: var(--text);
  font-weight: 900;
}
.small{
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

.select-cards{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.select-card{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

.select-card input{
  display: none;
}

.select-card span{
  display: flex;
  flex-direction: column;
}

.select-card strong{
  font-size: 14px;
}

.select-card small{
  font-size: 12px;
  color: var(--muted);
}

/* Estado selecionado */
.select-card input:checked + span{
  color: var(--text);
}

.select-card input:checked{
  /* só para acessibilidade */
}

.select-card input:checked + span::before{
  content: "✓";
  font-weight: 900;
  margin-bottom: 4px;
  color: #fff;
}

.select-card:has(input:checked){
  background: linear-gradient(135deg, rgba(124,92,255,.85), rgba(25,211,197,.6));
  border-color: rgba(255,255,255,.25);
  transform: scale(1.01);
}

@media (max-width: 720px){
  .select-cards{
    grid-template-columns: 1fr;
  }
  .clock{ display:none; }
  .grid{ grid-template-columns: 1fr; }
  a.btn{ font-size: 17px; padding: 16px; }
  header{ padding: 18px 18px 12px; }
  main{ padding: 16px 18px 18px; }
  footer{ padding: 0 18px 16px; }
}

/* =========================
   Formulários (Totem)
   ========================= */

.form{
  display:grid;
  gap: 12px;
  margin-top: 12px;
}

.field{
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.field label{
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .02em;
}

.input, .select{
  width: 100%;
  padding: 14px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  font-size: 15px;
  outline: none;
}

.input::placeholder{
  color: rgba(184,195,230,.65);
}

.select option{
  color:#111; /* melhora legibilidade no dropdown */
}

.row-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Ações do formulário (botões) */
.actions{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 14px;
}

.btn-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  padding: 14px 16px;
  border-radius: 14px;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: var(--text);

  font-weight: 900;
  text-decoration:none;
  cursor:pointer;

  transition: transform .14s ease, background .14s ease, border-color .14s ease;
  -webkit-tap-highlight-color: transparent;
  user-select:none;
}

.btn-action:active{
  transform: scale(.985);
}

.btn-action:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.16);
}

.btn-action.primary{
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(25,211,197,.75));
  border-color: rgba(255,255,255,.18);
}

.btn-action.whatsapp{
  background: linear-gradient(135deg, #25D366, #1ebe5d);
  border-color: rgba(0,0,0,.08);
  color: white;
  font-weight: 900;
}

.btn-action.whatsapp:hover{
  background: linear-gradient(135deg, #22c55e, #19a34a);
}

.btn-action.whatsapp:active{
  transform: scale(.98);
}

/* Responsivo */
@media (max-width: 720px){
  .row-2{ grid-template-columns: 1fr; }
}

/* =========================
   PIX / QR Code
   ========================= */

.pix-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 16px;
  margin-top: 12px;
}

.pix-qrcode{
  max-width: 220px;
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: #fff;
  padding: 8px;
}

.pix-key{
  width: 100%;
  text-align:center;
}

.pix-label{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
  font-weight: 800;
}

.pix-copy{
  display:flex;
  gap: 8px;
}

.pix-input{
  flex:1;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  color: var(--text);
  font-size: 14px;
}

.pix-btn{
  padding: 12px 16px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-weight: 900;
  color: white;
  background: linear-gradient(135deg, #7c5cff, #19d3c5);
  transition: transform .15s ease;
}

.pix-btn:active{
  transform: scale(.95);
}

.pix-toast{
  margin-top: 12px;
  text-align: center;
  font-weight: 900;
  font-size: 13px;
  color: var(--text);

  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;

  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.pix-toast.show{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   Ícones redes sociais
   ========================= */

.social-icons{
  display:flex;
  justify-content:center;
  gap: 14px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.social-icon{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color: white;
  transition: transform .15s ease, box-shadow .15s ease;
}

.social-icon svg{
  width: 26px;
  height: 26px;
}

.social-icon:active{
  transform: scale(.9);
}

.social-icon:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}

/* cores oficiais */

.whatsapp{ background:#25D366; }
.instagram{ background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.facebook{ background:#1877F2; }
.youtube{ background:#FF0000; }
.site{ background:#6c63ff; }

/* =========================
   Informações / Secretaria
   ========================= */

.info-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.info-pill{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  color: var(--text);
  font-weight: 900;
}

@media (max-width: 720px){
  .info-grid{ grid-template-columns: 1fr; }
}

/* =========================
   Mensagens (UX Totem)
   ========================= */
.msg-box{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  font-weight: 900;
  font-size: 14px;

  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}
.msg-box.show{
  opacity: 1;
  transform: translateY(0);
}
.msg-box.ok{
  border-color: rgba(25,211,197,.35);
}
.msg-box.err{
  border-color: rgba(255,90,90,.35);
}

.card-desc{
  margin-top:6px;
  color:var(--muted);
  font-size:15px;
}

/* =========================
   Catequese
   ========================= */

.btn.catequese .dot{ background: var(--catequese); }

.cate-banner{
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
}

.muted{ color: var(--muted); }

.docs-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.docs-box{
  border-radius: 18px;
  padding: 14px 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
}

.docs-box h3{ margin: 0 0 10px; font-size: 16px; }

.docs-list{
  margin: 0;
  padding-left: 18px;
  color: var(--text);
  line-height: 1.5;
}

.docs-list li{ margin: 6px 0; }

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