/* ============================================================
   Maranata Music — identidade visual Adventista
   Azul institucional + areia (fachada) + dourado de destaque
   ============================================================ */

:root {
  --azul: #1b3a6b;
  --azul-escuro: #122a50;
  --azul-claro: #2f5fa6;
  --areia: #efe7d6;
  --areia-clara: #f7f2e8;
  --dourado: #c9a13b;
  --texto: #1a2230;
  --texto-suave: #51607a;
  --branco: #ffffff;
  --erro: #b3261e;
  --sucesso: #2e7d32;
  --sombra: 0 8px 30px rgba(18, 42, 80, 0.12);
  --raio: 14px;
  --container: 1080px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Open Sans", "Segoe UI", system-ui, sans-serif;
  color: var(--texto);
  background: var(--areia-clara);
  line-height: 1.6;
}

h1, h2, h3 { font-family: "Noto Serif", Georgia, serif; line-height: 1.2; color: var(--azul); }

a { color: var(--azul-claro); }

img { max-width: 100%; display: block; }

/* ---------- Topo / navegação ---------- */
.topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.8rem 1.5rem;
  background: var(--azul); position: sticky; top: 0; z-index: 50;
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.topo__marca { display: flex; align-items: center; gap: 0.6rem; color: var(--branco); text-decoration: none; font-size: 1.25rem; }
.topo__marca img { height: 34px; width: auto; }
.topo__marca strong { color: var(--dourado); }
.topo__nav { display: flex; align-items: center; gap: 1.3rem; }
.topo__nav a { color: #dce6f5; text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.topo__nav a:hover { color: var(--branco); }

/* ---------- Botões ---------- */
.botao {
  display: inline-block; background: var(--dourado); color: #2a2105;
  padding: 0.7rem 1.4rem; border-radius: 999px; text-decoration: none;
  font-weight: 700; border: none; cursor: pointer; font-size: 1rem;
  transition: transform .12s ease, filter .12s ease;
}
.botao:hover { transform: translateY(-2px); filter: brightness(1.05); }
.botao--grande { padding: 0.95rem 2rem; font-size: 1.08rem; }
.botao--pequeno { padding: 0.5rem 1rem; font-size: 0.9rem; }
.botao--secundario { background: transparent; color: var(--branco); border: 2px solid rgba(255,255,255,0.7); }
.pagina-admin .botao--secundario,
.secao .botao--secundario { color: var(--azul); border-color: var(--azul); }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, var(--azul-escuro), var(--azul-claro));
  color: var(--branco); padding: 5rem 1.5rem; text-align: center;
}
.hero__conteudo { max-width: 820px; margin: 0 auto; }
.hero h1 { color: var(--branco); font-size: clamp(2rem, 5vw, 3.4rem); margin: 0.5rem 0 1rem; }
.hero h1 span { color: var(--dourado); }
.hero__sub { font-size: 1.2rem; color: #e6eefb; }
.hero__acoes { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.8rem; }
.selo {
  display: inline-block; background: rgba(255,255,255,0.15); color: #fff;
  padding: 0.4rem 1rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
}
.hero--igreja { background: linear-gradient(135deg, var(--azul-escuro), var(--azul)); }
.hero__logo { height: 90px; width: auto; margin: 0 auto 1rem; filter: brightness(0) invert(1); }
.hero__kicker { display: block; color: #cdddf5; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.2rem; }
.visitar__acoes { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Faixa de valores ---------- */
.faixa-valores {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--areia); border-bottom: 1px solid #e2d8c2;
}
.valor { background: var(--branco); padding: 1.4rem 1rem; text-align: center; }
.valor strong { display: block; color: var(--azul); font-size: 1.05rem; }
.valor span { color: var(--texto-suave); font-size: 0.85rem; }

/* ---------- Seções ---------- */
.secao { max-width: var(--container); margin: 0 auto; padding: 3.5rem 1.5rem; }
.secao--alt { background: var(--areia); max-width: none; }
.secao--alt > * { max-width: var(--container); margin-left: auto; margin-right: auto; }
.secao__cabecalho { text-align: center; max-width: 680px; margin: 0 auto 2.2rem; }
.secao__cabecalho h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); margin-bottom: 0.4rem; }
.secao__cabecalho p { color: var(--texto-suave); font-size: 1.1rem; }

/* ---------- Instrumentos ---------- */
.grade-instrumentos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; }
.card-instrumento {
  background: var(--branco); border-radius: var(--raio); padding: 1.5rem;
  box-shadow: var(--sombra); border-top: 4px solid var(--dourado);
}
.card-instrumento h3 { margin: 0 0 0.5rem; }

/* ---------- Passos ---------- */
.passos { max-width: 720px; margin: 0 auto; counter-reset: passo; list-style: none; padding: 0; }
.passos li { background: var(--branco); border-radius: var(--raio); padding: 1.1rem 1.3rem 1.1rem 3.6rem; margin-bottom: 1rem; position: relative; box-shadow: var(--sombra); }
.passos li::before {
  counter-increment: passo; content: counter(passo);
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  width: 1.9rem; height: 1.9rem; background: var(--azul); color: #fff;
  border-radius: 50%; display: grid; place-items: center; font-weight: 700;
}

/* ---------- Formulário ---------- */
.secao--inscricao { background: var(--areia); max-width: none; }
.formulario { max-width: 620px; margin: 0 auto; background: var(--branco); padding: 2rem; border-radius: var(--raio); box-shadow: var(--sombra); }
.campo { margin-bottom: 1.1rem; }
.campo-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.campo label { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.95rem; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 0.7rem 0.85rem; border: 1.5px solid #d6cdb8;
  border-radius: 10px; font-size: 1rem; font-family: inherit; background: #fff;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--azul-claro); box-shadow: 0 0 0 3px rgba(47,95,166,0.15);
}
.formulario .botao { width: 100%; margin-top: 0.5rem; }

/* ---------- Doação / QR ---------- */
.secao--doacao { background: var(--azul); max-width: none; color: #fff; }
.secao--doacao h2 { color: #fff; }
.secao--doacao p { color: #dce6f5; }
.qr-doacao { display: flex; justify-content: center; }
.qr-placeholder {
  width: 220px; height: 220px; background: rgba(255,255,255,0.08);
  border: 2px dashed rgba(255,255,255,0.45); border-radius: var(--raio);
  display: grid; place-content: center; text-align: center; gap: 0.5rem; color: #fff; padding: 1rem;
}
.qr-placeholder small { color: #b9c8e2; font-size: 0.72rem; }

/* ---------- Página da igreja ---------- */
.fachada { margin: 0; text-align: center; }
.fachada img { border-radius: var(--raio); box-shadow: var(--sombra); margin: 0 auto; max-height: 520px; width: auto; }
.fachada figcaption { color: var(--texto-suave); margin-top: 0.6rem; font-style: italic; }
.texto-longo { max-width: 720px; margin: 0 auto; font-size: 1.08rem; }
.grade-horarios { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.card-horario { background: var(--branco); border-radius: var(--raio); padding: 1.5rem; box-shadow: var(--sombra); }
.secao--projeto-destaque { background: var(--areia); max-width: none; }
.destaque-projeto { max-width: 720px; margin: 0 auto; text-align: center; }
.destaque-projeto p { font-size: 1.1rem; margin-bottom: 1.5rem; }
.secao--visitar { text-align: center; }
.endereco { font-size: 1.1rem; margin-bottom: 1.2rem; }

/* ---------- Placeholder ---------- */
.placeholder-texto {
  color: #8a7a55; background: #fbf6ea; border: 1px dashed #d8c89c;
  padding: 0.8rem 1rem; border-radius: 8px; font-style: italic;
}

/* ---------- Sucesso ---------- */
.secao--sucesso { display: grid; place-items: center; min-height: 60vh; }
.cartao-sucesso { background: var(--branco); border-radius: var(--raio); box-shadow: var(--sombra); padding: 3rem 2rem; text-align: center; max-width: 540px; }
.cartao-sucesso__icone { width: 80px; height: 80px; margin: 0 auto 1rem; background: var(--azul); color: var(--dourado); border-radius: 50%; display: grid; place-items: center; font-size: 2.4rem; }
.cartao-sucesso__acoes { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }

/* ---------- Alertas ---------- */
.alertas { max-width: var(--container); margin: 1rem auto 0; padding: 0 1.5rem; }
.alerta { padding: 0.8rem 1.1rem; border-radius: 10px; margin-bottom: 0.6rem; font-weight: 600; }
.alerta--erro { background: #fde8e7; color: var(--erro); border: 1px solid #f3b9b5; }
.alerta--sucesso { background: #e6f4ea; color: var(--sucesso); border: 1px solid #b6dcc0; }

/* ---------- Admin ---------- */
.pagina-admin { background: var(--areia-clara); }
.secao--login { display: grid; place-items: center; min-height: 70vh; }
.cartao-login { background: #fff; border-radius: var(--raio); box-shadow: var(--sombra); padding: 2.4rem; width: 100%; max-width: 400px; text-align: center; }
.cartao-login__logo { height: 56px; width: auto; margin: 0 auto 0.8rem; }
.cartao-login h1 { font-size: 1.4rem; margin: 0; }
.cartao-login p { color: var(--texto-suave); margin: 0.2rem 0 1.4rem; }
.cartao-login .formulario { box-shadow: none; padding: 0; }
.cartao-login .campo label { text-align: left; }

.painel-topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.painel-topo h1 { font-size: 1.6rem; margin: 0; }
.resumo-instrumentos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.4rem; }
.chip { background: var(--branco); border: 1px solid #e0d8c4; border-radius: 999px; padding: 0.3rem 0.9rem; font-size: 0.9rem; box-shadow: var(--sombra); }
.tabela-wrap { overflow-x: auto; background: #fff; border-radius: var(--raio); box-shadow: var(--sombra); }
.tabela { width: 100%; border-collapse: collapse; min-width: 760px; }
.tabela th, .tabela td { padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid #eee; font-size: 0.92rem; }
.tabela thead { background: var(--azul); color: #fff; }
.tabela thead th { font-weight: 600; }
.tabela tbody tr:hover { background: #faf6ec; }
.celula-msg { max-width: 220px; }
.vazio { text-align: center; color: var(--texto-suave); padding: 3rem 1rem; }

/* ---------- Rodapé ---------- */
.rodape { background: var(--azul-escuro); color: #c5d3ea; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding: 2rem 1.5rem; }
.rodape strong { color: #fff; }
.rodape a { color: var(--dourado); text-decoration: none; display: inline-block; margin-right: 1rem; }
.rodape__autor { text-align: right; }
.rodape__autor a { font-weight: 700; }
.rodape__autor span { display: block; font-size: 0.8rem; margin-top: 0.3rem; color: #8da3c6; }

/* ---------- Acessibilidade: pular para conteúdo ---------- */
.pular-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: #fff; color: var(--azul); padding: 0.6rem 1rem;
  border-radius: 0 0 8px 0; font-weight: 700; text-decoration: none;
}
.pular-conteudo:focus { left: 0; }
:focus-visible { outline: 3px solid var(--dourado); outline-offset: 2px; }

/* ---------- Galeria ---------- */
.galeria {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.8rem; max-width: var(--container); margin: 0 auto;
}
.galeria__item { display: block; border-radius: 10px; overflow: hidden; box-shadow: var(--sombra); aspect-ratio: 1 / 1; }
.galeria__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.galeria__item:hover img { transform: scale(1.06); }
.galeria__placeholder {
  aspect-ratio: 1 / 1; border-radius: 10px; background: var(--areia);
  display: grid; place-items: center; font-size: 2rem; opacity: 0.6;
}

/* ---------- Captação: apadrinhe um aluno ---------- */
.captacao__titulo { text-align: center; color: #fff; font-size: 1.5rem; margin: 1.5rem 0 0.3rem; }
.captacao__intro { text-align: center; color: #dce6f5; max-width: 620px; margin: 0 auto 1.6rem; }
.padrinhos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.4rem 1.2rem; max-width: 900px; margin: 0 auto 2.5rem;
}
.padrinho {
  background: #fff; color: var(--texto); border-radius: var(--raio);
  padding: 1.7rem 1.3rem 1.4rem; text-align: center; position: relative; box-shadow: var(--sombra);
}
.padrinho--destaque { border: 3px solid var(--dourado); }
.padrinho__tag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--dourado); color: #2a2105; font-size: 0.72rem; font-weight: 700;
  padding: 0.25rem 0.75rem; border-radius: 999px; white-space: nowrap;
}
.padrinho__valor { display: block; font-family: "Sora", sans-serif; font-weight: 800; font-size: 2rem; color: var(--azul); }
.padrinho__valor small { font-size: 0.9rem; color: var(--texto-suave); font-weight: 600; }
.padrinho__desc { color: var(--texto-suave); margin: 0.6rem 0 1.1rem; font-size: 0.95rem; }
.doacao-unica {
  display: flex; gap: 2rem; align-items: center; justify-content: center; flex-wrap: wrap;
  max-width: 760px; margin: 0 auto; background: rgba(255, 255, 255, 0.08);
  border-radius: var(--raio); padding: 1.8rem;
}
.doacao-unica__texto { max-width: 340px; }
.doacao-unica__texto h3 { color: #fff; }
.doacao-unica__texto p { color: #dce6f5; }

/* ============================================================
   TEMA MARANATA MUSIC  (preto + azul elétrico + amarelo)
   Aplicado só na landing do projeto via body.tema-maranata
   ============================================================ */
.tema-maranata {
  --mm-preto: #000000;
  --mm-azul: #1a6bff;
  --mm-amarelo: #ffcd00;
  background: var(--mm-preto);
  color: #f2f4f8;
  font-family: "Sora", "Open Sans", system-ui, sans-serif;
}
.tema-maranata h1, .tema-maranata h2, .tema-maranata h3 {
  font-family: "Sora", sans-serif; color: #fff;
}

/* Topo escuro */
.tema-maranata .topo { background: #000; box-shadow: 0 2px 0 var(--mm-azul); }
.tema-maranata .topo__marca strong { color: var(--mm-amarelo); }
.tema-maranata .topo__marca img { filter: brightness(0) invert(1); }
.tema-maranata .topo__nav a { color: #c9d6ef; }
.tema-maranata .topo__nav a:hover { color: var(--mm-amarelo); }

/* Botões do tema */
.tema-maranata .botao { background: var(--mm-amarelo); color: #111; }
.tema-maranata .botao--secundario { background: transparent; color: #fff; border: 2px solid var(--mm-azul); }

/* HERO com formas diagonais (preto + triângulos azuis) */
.hero-mm {
  position: relative; overflow: hidden; background: #000;
  padding: 6rem 1.5rem; text-align: center;
}
.hero-mm::before, .hero-mm::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.hero-mm::before {
  background:
    linear-gradient(120deg, var(--mm-azul) 0 22%, transparent 22%) left top / 60% 100% no-repeat,
    linear-gradient(300deg, var(--mm-azul) 0 26%, transparent 26%) right bottom / 55% 100% no-repeat;
  opacity: 0.95;
}
.hero-mm::after {
  background: linear-gradient(60deg, transparent 0 60%, rgba(26,107,255,0.55) 60% 66%, transparent 66%) right top / 100% 100% no-repeat;
}
.hero-mm__conteudo { position: relative; z-index: 1; max-width: 880px; margin: 0 auto; }
.selo-mm {
  display: inline-block; background: rgba(0,0,0,0.55); border: 1px solid var(--mm-amarelo);
  color: var(--mm-amarelo); padding: 0.4rem 1.1rem; border-radius: 999px;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.tema-maranata .wordmark {
  font-weight: 800; color: var(--mm-amarelo);
  font-size: clamp(2.8rem, 11vw, 7rem); line-height: 0.92; letter-spacing: 0.04em;
  margin: 1.2rem 0 0.6rem; text-transform: uppercase;
  text-shadow: 0 6px 30px rgba(0,0,0,0.6);
}
.tema-maranata .wordmark span {
  display: block; color: #fff;
  font-size: 0.3em; letter-spacing: 0.55em; padding-left: 0.55em; margin-top: 0.2em;
}
/* Hero usando o logo real (PNG transparente) */
.wordmark-img { margin: 1.2rem 0 0.8rem; }
.wordmark-img img {
  display: block; width: min(620px, 82%); height: auto; margin: 0 auto;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,0.55));
}
.wordmark-img span {
  display: block; color: #fff; font-weight: 700;
  font-size: clamp(0.9rem, 2.4vw, 1.4rem); letter-spacing: 0.62em;
  padding-left: 0.62em; margin-top: 0.5rem; text-transform: uppercase;
}
.hero-mm__sub { font-size: 1.18rem; color: #d7e0f2; max-width: 660px; margin: 0 auto; }
.hero-mm__acoes { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }

/* Faixa de valores no tema */
.tema-maranata .faixa-valores { background: var(--mm-azul); border: none; }
.tema-maranata .valor { background: var(--mm-azul); }
.tema-maranata .valor strong { color: #fff; }
.tema-maranata .valor span { color: #dbe6ff; }

/* Seções no tema escuro */
.tema-maranata .secao__cabecalho h2 { color: #fff; }
.tema-maranata .secao__cabecalho h2::after {
  content: ""; display: block; width: 64px; height: 4px; background: var(--mm-amarelo);
  margin: 0.6rem auto 0; border-radius: 2px;
}
.tema-maranata .secao__cabecalho p { color: #aeb9cf; }
.tema-maranata .secao--alt { background: #0b0e16; }
.tema-maranata .card-instrumento {
  background: #10141f; border-top: 4px solid var(--mm-azul);
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
}
.tema-maranata .card-instrumento h3 { color: var(--mm-amarelo); }
.tema-maranata .passos li { background: #10141f; box-shadow: 0 8px 30px rgba(0,0,0,0.45); color: #e7ecf6; }
.tema-maranata .passos li::before { background: var(--mm-azul); }
.tema-maranata .passos li strong { color: var(--mm-amarelo); }

/* Formulário no tema */
.tema-maranata .secao--inscricao { background: #0b0e16; }
.tema-maranata .formulario { background: #10141f; box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
.tema-maranata .campo label { color: #e7ecf6; }
.tema-maranata .campo input, .tema-maranata .campo select, .tema-maranata .campo textarea {
  background: #0b0e16; border-color: #2a3550; color: #fff;
}
.tema-maranata .campo input::placeholder, .tema-maranata .campo textarea::placeholder { color: #6b7896; }
.tema-maranata .campo input:focus, .tema-maranata .campo select:focus, .tema-maranata .campo textarea:focus {
  border-color: var(--mm-azul); box-shadow: 0 0 0 3px rgba(26,107,255,0.25);
}

/* Doação no tema */
.tema-maranata .secao--doacao { background: var(--mm-azul); }
.tema-maranata .qr-placeholder { background: rgba(0,0,0,0.18); border-color: rgba(255,255,255,0.7); }

/* Placeholder no tema escuro */
.tema-maranata .placeholder-texto { background: rgba(255,205,0,0.08); border-color: rgba(255,205,0,0.4); color: #e6c875; }

/* Rodapé no tema */
.tema-maranata .rodape { background: #000; color: #aeb9cf; border-top: 2px solid var(--mm-azul); }

/* ---------- Responsivo ---------- */
@media (max-width: 720px) {
  .topo { flex-direction: column; gap: 0.6rem; }
  .topo__nav { flex-wrap: wrap; justify-content: center; gap: 0.9rem; }
  .faixa-valores { grid-template-columns: repeat(2, 1fr); }
  .campo-linha { grid-template-columns: 1fr; }
  .rodape { grid-template-columns: 1fr; text-align: center; }
  .rodape__autor { text-align: center; }
  .rodape a { margin: 0 0.5rem; }
  .wordmark span { letter-spacing: 0.3em; }
}