/* ============================================================
   Igreja Conecta — estilo compartilhado
   ============================================================ */

:root {
  --fundo: #05192e;
  --destaque: #00bfa0;
  --secundaria: #0a5ca8;
  --texto: #edf2f1;
  --suave: #8fa9b4;
  --cartao: rgba(255, 255, 255, 0.045);
  --borda: rgba(255, 255, 255, 0.10);
  --raio: 14px;
  --fonte: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
           'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

body { min-height: 100dvh; }

a { color: inherit; text-decoration: none; }

.envelope {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 28px 20px 56px;
}

/* ---------- Cabeçalho ---------- */
.marca { text-align: center; margin-bottom: 26px; }

.marca .selo {
  width: 76px; height: 76px;
  margin: 0 auto 14px;
  border-radius: 22px;
  display: grid; place-items: center;
  background: linear-gradient(145deg,
    var(--secundaria, var(--destaque)),
    var(--destaque));
  color: #ffffff;
  font-weight: 800; font-size: 27px; letter-spacing: -0.5px;
  overflow: hidden;
  box-shadow: 0 10px 30px -10px color-mix(in srgb, var(--destaque) 55%, transparent);
}
.marca .selo img { width: 100%; height: 100%; object-fit: cover; }

.marca h1 {
  margin: 0 0 6px;
  font-size: 25px; font-weight: 700; letter-spacing: -0.4px;
  line-height: 1.2;
}
.marca p { margin: 0; color: var(--suave); font-size: 14.5px; line-height: 1.5; }

/* ---------- Cartões de link ---------- */
.lista { display: flex; flex-direction: column; gap: 11px; }

.item {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 16px;
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.item:active { transform: scale(.985); }
@media (hover: hover) {
  .item:hover {
    background: rgba(255, 255, 255, .075);
    border-color: color-mix(in srgb, var(--destaque) 45%, transparent);
  }
}

.item .glifo {
  flex: 0 0 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--destaque) 15%, transparent);
  color: var(--destaque);
}
.item .corpo { min-width: 0; flex: 1; }
.item .corpo strong {
  display: block;
  font-size: 15.5px; font-weight: 600; line-height: 1.3;
}
.item .corpo span {
  display: block;
  margin-top: 2px;
  font-size: 13px; color: var(--suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item .seta { color: var(--suave); flex: 0 0 auto; }

/* ---------- Chamada de perguntas (destaque no topo) ---------- */
.chamada {
  display: flex; align-items: center; gap: 14px;
  padding: 17px 18px;
  margin-bottom: 22px;
  border-radius: var(--raio);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--destaque) 22%, transparent),
    color-mix(in srgb, var(--destaque) 8%, transparent));
  border: 1px solid color-mix(in srgb, var(--destaque) 38%, transparent);
  transition: transform .14s ease;
}
.chamada:active { transform: scale(.985); }
.chamada .glifo { color: var(--destaque); flex: 0 0 auto; }
.chamada strong { display: block; font-size: 16.5px; font-weight: 700; }
.chamada span { display: block; margin-top: 2px; font-size: 13px; color: var(--suave); }

/* ---------- Formulário ---------- */
label { display: block; margin-bottom: 7px; font-size: 13.5px; color: var(--suave); }

input[type="text"], textarea, input[type="email"], input[type="password"] {
  width: 100%;
  padding: 14px 15px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--borda);
  border-radius: 12px;
  color: var(--texto);
  font-family: inherit; font-size: 16px; /* 16px evita zoom no iOS */
  line-height: 1.5;
  transition: border-color .14s ease, background .14s ease;
}
input:focus, textarea:focus {
  outline: none;
  border-color: var(--destaque);
  background: rgba(255, 255, 255, .07);
}
textarea { resize: vertical; min-height: 132px; }

.campo { margin-bottom: 17px; }
.contador { margin-top: 7px; font-size: 12.5px; color: var(--suave); text-align: right; }

.botao {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 20px;
  background: var(--destaque);
  color: #14181f;
  border: none; border-radius: 12px;
  font-family: inherit; font-size: 16px; font-weight: 700;
  cursor: pointer;
  transition: filter .14s ease, transform .14s ease;
}
.botao:active { transform: scale(.985); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
@media (hover: hover) { .botao:not(:disabled):hover { filter: brightness(1.08); } }

.botao.vazado {
  background: transparent;
  color: var(--texto);
  border: 1px solid var(--borda);
}

/* ---------- Avisos ---------- */
.aviso {
  padding: 13px 15px;
  border-radius: 11px;
  font-size: 14px; line-height: 1.5;
  margin-bottom: 17px;
}
.aviso.erro {
  background: rgba(220, 70, 70, .12);
  border: 1px solid rgba(220, 70, 70, .35);
  color: #ff9d9d;
}
.aviso.bom {
  background: rgba(70, 190, 120, .12);
  border: 1px solid rgba(70, 190, 120, .35);
  color: #86e0ac;
}
.aviso.neutro {
  background: var(--cartao);
  border: 1px solid var(--borda);
  color: var(--suave);
}

.rodape {
  margin-top: 34px;
  text-align: center;
  font-size: 12px; color: var(--suave); opacity: .65;
}

.escondido { display: none !important; }