/* Páginas internas do site: seções, histórias, história completa, contato e
   textos legais. Mesmo visual da página inicial (index.html): fundo azul bem
   claro, cartões brancos com sombra azulada e uma capa escura no alto, como o
   céu da noite da home e os painéis do jogo. Uma coluna larga e fácil de ler.
   O topo e o rodapé (a moldura) ficam em moldura.css. */
:root {
  --verde: #3f8f3a; --verde-claro: #6fc04a; --verde-vivo: #8fe06a; --verde-escuro: #245c22;
  --ceu: #2fa8d8; --ceu-escuro: #1b78b4;
  --ouro: #f2d27a; --ouro-vivo: #ffd76a; --ouro-escuro: #8a6a2a; --mel: #e9a92a;
  --painel: #14202b; --noite: #0c1825;
  --texto: #1b2b3c; --suave: #55687c; --linha: #dbe7f2; --fundo: #f5f9fe;
  /* Verde dos links: um tom mais fundo que o --verde, para ler bem no fundo claro. */
  --link: #2c7a28;
  --sombra-cartao: 0 1px 0 #fff inset, 0 22px 44px -24px #1b3a5a73, 0 4px 12px -6px #1b3a5a26;
  --sombra-leve: 0 12px 26px -20px #1b3a5a99, 0 2px 6px -3px #1b3a5a1f;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fundo); color: var(--texto); line-height: 1.65;
  font-family: Nunito, system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Baloo 2', Nunito, sans-serif; line-height: 1.15; margin: 0; }
a { color: var(--link); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: #3f8f3a59; }
a:hover { text-decoration-color: currentColor; }

.env { width: min(880px, 100%); margin: 0 auto; padding: 14px 20px; }

/* ---- a capa: faixa escura com brilhos e estrelinhas, como a seção da noite da home ---- */
.capa {
  position: relative; overflow: hidden; color: #e6eef7;
  background:
    radial-gradient(720px 380px at 8% 0%, #1f5a7a8c, transparent 70%),
    radial-gradient(760px 420px at 96% 120%, #2f7a3a73, transparent 70%),
    linear-gradient(180deg, #0f2236, #0e2421);
}
.capa::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.6px 1.6px at 22px 34px, #fff 50%, transparent 52%),
    radial-gradient(1.1px 1.1px at 92px 128px, #fff 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 164px 62px, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 212px 170px, #fff 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 128px 192px, #ffe9a8 50%, transparent 52%);
  background-size: 240px 210px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.capa .env { position: relative; padding: 42px 20px 38px; }
.capa h1 { font-size: clamp(30px, 5vw, 46px); color: #fff; letter-spacing: -.01em; text-shadow: 0 4px 24px #0009; }
.capa p { margin: 12px 0 0; color: #c9d7e6; font-size: 16.5px; max-width: 64ch; }
.capa a { color: #c6f7ad; }

main.env { padding: 34px 20px 64px; }
main h2 {
  font-size: clamp(22px, 3vw, 29px); color: var(--texto);
  margin: 42px 0 12px; padding-top: 26px; border-top: 1px solid var(--linha);
}
/* Um risquinho verde em cima de cada título, como o "chapéu" das seções da home. */
main h2::before {
  content: ""; display: block; width: 40px; height: 4px; border-radius: 4px; margin-bottom: 12px;
  background: linear-gradient(90deg, var(--verde-vivo), var(--verde));
}
/* Só o título que abre a página fica sem a linha em cima. */
main > h2:first-child { border-top: 0; padding-top: 0; margin-top: 8px; }
main h3 { font-size: 19px; margin: 22px 0 6px; color: var(--verde-escuro); }
main p, main li { font-size: 16.5px; }
main ul { padding-left: 22px; }
main li { margin-bottom: 7px; }
main li::marker { color: var(--verde); }
main li strong { color: var(--verde-escuro); }

.resumo {
  background: #fff; border: 1px solid #fff; border-radius: 22px; box-shadow: var(--sombra-cartao);
  padding: 20px 24px; margin: 4px 0 8px;
}
.resumo h2 { border: 0; padding: 0; margin: 0 0 8px; font-size: 20px; }
.resumo h2::before { content: none; }
.resumo ul { margin: 0; }
.aviso {
  background: #fff8e2; border: 1px solid #f2d27a; border-radius: 18px; box-shadow: var(--sombra-leve);
  padding: 14px 18px; margin: 22px 0; font-size: 15.5px;
}
.tabela {
  width: 100%; margin: 14px 0; font-size: 15.5px; background: #fff;
  border-collapse: separate; border-spacing: 0; border-radius: 18px; overflow: hidden; box-shadow: var(--sombra-leve);
}
.tabela th, .tabela td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela th { color: var(--texto); background: #eef5fc; font-family: 'Baloo 2', Nunito, sans-serif; }
.tabela tr:last-child td { border-bottom: 0; }

.indice { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 6px; }
.indice a {
  font-size: 14px; text-decoration: none; background: #fff; border: 1px solid var(--linha);
  border-radius: 999px; padding: 6px 14px; color: var(--texto); box-shadow: 0 6px 14px -12px #1b3a5a99;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.indice a:hover, .indice a:focus-visible { border-color: #9fd38c; color: var(--verde-escuro); transform: translateY(-1px); outline: none; }

@media (max-width: 600px) {
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; }
  .tabela thead { display: none; }
  .tabela { padding: 4px 16px; }
  .tabela tr { border-bottom: 1px solid var(--linha); padding: 10px 0; }
  .tabela tr:last-child { border-bottom: 0; }
  .tabela td { border: 0; padding: 2px 0; }
  .tabela td:first-child { font-weight: 800; color: var(--verde-escuro); }
}

/* ---- páginas de história (conteúdo bíblico) ---- */
.trilha { font-size: 14px; color: var(--suave); margin: 0 0 10px; }
.trilha a { color: var(--suave); text-decoration: none; }
.trilha a:hover { color: var(--verde); }
.capa .trilha, .capa .trilha a { color: #9fb6cc; }
.capa .trilha a:hover { color: #fff; }

/* A referência bíblica da capa, dourada como os números dos capítulos da home. */
.capa .ref-biblica {
  display: inline-block; margin-top: 14px; color: #4b2b16;
  background: linear-gradient(#ffe9a6, #e9a92a); border: 2px solid #fff3cf; box-shadow: 0 0 0 1.5px var(--ouro-escuro), 0 8px 18px -8px #000;
  font-weight: 800; font-size: 14px; padding: 5px 16px; border-radius: 999px;
}
.figura { margin: 24px 0; }
.figura img {
  width: 100%; height: auto; display: block; border-radius: 20px; background: #cfe3f3;
  box-shadow: 0 30px 50px -30px #1b3a5ab3, 0 0 0 1px #fff, 0 0 0 5px #ffffff80;
}
.figura figcaption { font-size: 14px; color: var(--suave); text-align: center; margin-top: 10px; }

.versiculo {
  background: linear-gradient(100deg, #e6f5dc, #f2f9ee); border-left: 5px solid var(--verde); border-radius: 0 18px 18px 0;
  padding: 16px 20px; margin: 20px 0; font-size: 17.5px; box-shadow: var(--sombra-leve);
}
.versiculo p { margin: 0; font-style: italic; }
.versiculo cite { display: block; margin-top: 6px; font-style: normal; font-weight: 800; color: var(--verde-escuro); font-size: 15px; }

.dias { display: grid; gap: 10px; margin: 18px 0; padding: 0; list-style: none; }
.dias li { background: #fff; border: 1px solid #fff; border-radius: 18px; padding: 12px 18px; box-shadow: var(--sombra-leve); }
.dias li strong { display: block; color: var(--verde-escuro); font-family: 'Baloo 2', Nunito, sans-serif; font-size: 18px; }

/* O botão de jogar: o mesmo verde em relevo dos botões da home. */
.cta {
  display: block; text-align: center; color: #fff; text-decoration: none; text-shadow: 0 1px 0 #245c2288;
  background: linear-gradient(#7fd255, #3f8f3a); font-family: 'Baloo 2', Nunito, sans-serif; font-size: 21px; font-weight: 800;
  padding: 16px 28px; border-radius: 20px; margin: 30px 0;
  box-shadow: 0 5px 0 var(--verde-escuro), 0 14px 26px -8px #245c22aa;
  transition: transform .14s ease, filter .14s ease;
}
.cta:hover { filter: brightness(1.07); transform: translateY(-2px); }
.cta:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--verde-escuro); }
.cta:focus-visible { outline: 3px solid var(--ouro-vivo); outline-offset: 3px; }
.cta small { display: block; font-family: Nunito, sans-serif; font-size: 14px; font-weight: 600; opacity: .92; margin-top: 3px; text-shadow: none; }

.proximas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 18px 0 8px; }
.proximas a {
  display: block; background: #fff; border: 1px solid #fff; border-radius: 20px;
  padding: 16px 18px; text-decoration: none; color: var(--texto); box-shadow: var(--sombra-cartao);
  transition: border-color .2s ease, transform .2s ease;
}
.proximas a:hover, .proximas a:focus-visible { border-color: #a9d79a; transform: translateY(-2px); outline: none; }
.proximas a strong { display: block; color: var(--verde-escuro); font-family: 'Baloo 2', Nunito, sans-serif; font-size: 18px; }
.proximas a small { color: var(--suave); }

/* ---- páginas de seção: cards, galeria e perguntas ---- */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 18px 0; }
.cartao-sec {
  background: #fff; border: 1px solid #fff; border-radius: 22px; padding: 18px 20px; box-shadow: var(--sombra-cartao);
  display: grid; gap: 4px; align-content: start;
}
/* O ícone num quadradinho colorido, como os cartões da home: verde, céu e ouro, revezando. */
.cartao-sec .ico {
  width: 48px; height: 48px; margin-bottom: 8px; border-radius: 15px; display: grid; place-items: center;
  font-size: 24px; line-height: 1;
  background: linear-gradient(145deg, #d6f6c4, #8fe06a); box-shadow: inset 0 2px 0 #fff9, 0 10px 18px -10px #3f8f3aaa;
}
.cartao-sec:nth-child(3n+2) .ico { background: linear-gradient(145deg, #d9f2fd, #86d2f3); box-shadow: inset 0 2px 0 #fff9, 0 10px 18px -10px #1b78b4aa; }
.cartao-sec:nth-child(3n) .ico { background: linear-gradient(145deg, #fff3c9, #f6c858); box-shadow: inset 0 2px 0 #fff9, 0 10px 18px -10px #c98a2caa; }
.cartao-sec strong { font-family: 'Baloo 2', Nunito, sans-serif; font-size: 18px; color: var(--texto); }
.cartao-sec span:last-child { font-size: 15px; color: var(--suave); }

.galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin: 22px 0; }
.galeria figure { margin: 0; }
.galeria img {
  width: 100%; height: auto; display: block; border-radius: 18px; background: #cfe3f3;
  box-shadow: 0 24px 40px -26px #1b3a5ab3, 0 0 0 1px #fff, 0 0 0 4px #ffffff80;
}
.galeria figcaption { font-size: 14px; color: var(--suave); margin-top: 8px; }

/* Perguntas: a mesma sanfona da home. */
.faq { display: grid; gap: 10px; margin: 18px 0; }
.faq details {
  background: #fff; border: 1px solid var(--linha); border-radius: 18px; padding: 2px 20px;
  box-shadow: 0 10px 24px -20px #1b3a5a88; transition: border-color .2s, box-shadow .2s;
}
.faq details[open] { border-color: #9fd38c; box-shadow: 0 0 0 3px #8fe06a26, 0 16px 30px -22px #1b3a5a88; }
.faq summary {
  cursor: pointer; font-family: 'Baloo 2', Nunito, sans-serif; font-weight: 700; font-size: 17.5px;
  color: var(--texto); padding: 14px 0; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; margin-left: 12px; font-size: 22px; line-height: 1.2; color: var(--verde); }
.faq details[open] summary::after { content: '–'; }
.faq summary:focus-visible { outline: 3px solid var(--ouro-vivo); outline-offset: 2px; border-radius: 8px; }
.faq details p { margin: 0 0 16px; font-size: 16.5px; color: var(--suave); }

/* ---- partes dentro de um bloco (h3 com lista), usadas em "O que a criança faz" ---- */
.parte h3 { margin-top: 18px; }
.parte ol { padding-left: 24px; }
.parte ol li::marker { color: var(--verde); font-weight: 800; }
main .aviso p { margin: 0; font-size: 15.5px; }

/* ---- formulário de contato ---- */
.form-contato {
  background: #fff; border: 1px solid #fff; border-radius: 24px; padding: 24px; box-shadow: var(--sombra-cartao);
  margin: 22px 0 8px; display: grid; gap: 14px;
}
.form-contato h3 { margin: 0; font-size: 21px; color: var(--texto); }
.form-contato .form-nota { margin: 0; color: var(--suave); font-size: 14.5px; }
.form-contato .form-linha { display: grid; gap: 14px; grid-template-columns: 1fr; }
.form-contato label { display: grid; gap: 6px; font-weight: 800; font-size: 15px; color: var(--texto); }
.form-contato input, .form-contato textarea {
  width: 100%; border: 2px solid #dde6ee; border-radius: 14px; padding: 12px 14px;
  font: inherit; font-weight: 400; font-size: 16px; background: #fbfdff; color: var(--texto);
}
.form-contato textarea { min-height: 150px; resize: vertical; }
.form-contato input:focus, .form-contato textarea:focus { outline: 0; border-color: var(--verde-claro); background: #fff; }
.form-contato .form-armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-botao {
  justify-self: start; border: 0; cursor: pointer; font: 800 17px Nunito, system-ui, sans-serif; color: #fff;
  background: linear-gradient(#7fd255, #3f8f3a); padding: 13px 24px; border-radius: 14px; text-shadow: 0 1px 0 #245c2288;
  box-shadow: 0 5px 0 var(--verde-escuro), 0 12px 22px -8px #245c22aa;
}
.form-botao:hover { filter: brightness(1.07); }
.form-botao:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--verde-escuro); }
.form-botao:focus-visible { outline: 3px solid var(--ouro-vivo); outline-offset: 3px; }
.form-botao:disabled { opacity: .7; cursor: wait; }
.recado { margin: 14px 0; border-radius: 16px; padding: 14px 18px; font-weight: 700; }
.recado.bom { background: #eaf6e2; border: 2px solid #c6e6b2; color: #2c6b22; }
.recado.ruim { background: #ffeaea; border: 2px solid #f0c2c2; color: #a02626; }
@media (min-width: 700px) { .form-contato .form-linha { grid-template-columns: 1fr 1fr; } }

@media (max-width: 600px) {
  .capa .env { padding: 30px 20px 28px; }
  main.env { padding-top: 26px; }
  main h2 { margin-top: 34px; padding-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .cta, .proximas a, .indice a { transition: none; }
}