/* A página inicial na mesma estrutura do scrollthebibleapp.com: cabeçalho fixo com o ícone, o nome e "Baixe o app";
   topo claro com o selo, o título, o apoio, o botão da loja e o celular; dois números; "O que você ganha" com quatro
   recursos de ícone escuro; a comparação entre o feed de hoje e o feed do Pilg; as perguntas; a chamada final escura e o
   rodapé. As cores e as letras são as do Pilg. Sem avaliações, porque o Pilg ainda não tem nenhuma. */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fontes/Fraunces_400Regular.ttf') format('truetype'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fontes/Fraunces_400Regular_Italic.ttf') format('truetype'); }

.inicio-pg { background: linear-gradient(to bottom, #FFFDF7 0px, #FFFDF7 140px, #FAF5EA 340px, #F3EBDB 560px, #EFE6D3 780px, #F1E9D8 88%, #F8F3E8 100%); color: var(--tinta); }
.inicio-pg a:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }
.lado { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

.cab { position: sticky; top: 0; z-index: 30; background: transparent; border-bottom: 1px solid transparent; transition: background-color .3s, border-color .3s; }
.cab.rolou { background: rgba(255,253,247,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: rgba(26,36,26,.06); }
.cab .dentro { max-width: 72rem; margin: 0 auto; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cab .marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); font-weight: 600; font-size: 15px; }
.cab .marca img { width: 36px; height: 36px; border-radius: 9px; }
.cab .direita { display: flex; align-items: center; gap: 14px; }
.cab .idioma { font-size: 14px; color: var(--apagado); }
.pilula-app { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 10px; background: var(--verde-escuro); color: var(--tinta-clara); font-weight: 600; font-size: 14px; text-decoration: none; }

.secao { max-width: 72rem; margin: 0 auto; }
.heroi { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 2.5rem 3rem; }
.selo { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; background: #FFFDF7; box-shadow: 0 4px 16px -6px rgba(26,36,26,.18); font-size: 13px; font-weight: 600; color: var(--corpo); }
.selo svg { width: 14px; height: 14px; color: var(--bronze); }
.heroi h1 { margin: 1.5rem 0 0; max-width: 40rem; font: 400 2.2rem/1.1 var(--titulo); letter-spacing: -0.01em; color: var(--tinta); }
.heroi p { margin: 1.25rem 0 0; max-width: 34rem; font-size: 16px; line-height: 1.6; color: var(--apagado); }
.loja { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 18.5rem; height: 60px; border-radius: 12px; background: var(--verde-escuro); color: var(--tinta-clara); text-decoration: none; }
.loja small { font-size: 11px; font-weight: 500; letter-spacing: .02em; opacity: .85; }
.loja b { margin-top: 4px; font-size: 19px; font-weight: 600; }
.heroi .loja { margin-top: 2rem; }
.celular { margin-top: 3rem; width: 272px; max-width: 100%; border-radius: 44px; padding: 10px; background: #1A241A; box-shadow: 0 28px 50px rgba(26,36,26,.22); }
.celular img { display: block; width: 100%; height: auto; border-radius: 34px; }

.numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 42rem; margin: 0 auto; padding-block: 1rem 3rem; }
.numeros div { display: flex; flex-direction: column; align-items: center; text-align: center; }
.numeros b { font: 400 clamp(1.15rem, 6.4vw, 1.65rem)/1 var(--titulo); color: var(--tinta); font-variant-numeric: tabular-nums; }
.numeros span { margin-top: 8px; font-size: 13px; color: var(--apagado); }

.bloco { padding-block: 4rem; }
.titulo-bloco { max-width: 42rem; margin: 0 auto; text-align: center; }
.titulo-bloco .sobre { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bronze); }
.titulo-bloco h2 { margin: 0.75rem 0 0; font: 400 2rem/1.1 var(--titulo); color: var(--tinta); }
.titulo-bloco p { margin: 1rem 0 0; font-size: 16px; line-height: 1.6; color: var(--apagado); }
.recursos { margin: 3.5rem auto 0; max-width: 56rem; display: grid; gap: 16px; }
.recurso { display: flex; align-items: flex-start; gap: 20px; }
.recurso .ic { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; background: var(--verde-escuro); color: var(--bronze-claro); display: flex; align-items: center; justify-content: center; }
.recurso .ic svg { width: 22px; height: 22px; }
.recurso h3 { margin: 0; font: 600 18px/1.4 var(--texto); color: var(--tinta); }
.recurso p { margin: 6px 0 0; font-size: 15px; line-height: 1.6; color: var(--apagado); }
.centro { display: flex; justify-content: center; margin-top: 3.5rem; }

.compara { margin: 3.5rem auto 0; max-width: 56rem; display: grid; gap: 16px; }
.compara > div { border-radius: 24px; padding: 28px; }
.compara .hoje { background: rgba(255,253,247,.6); }
.compara .pilg { background: var(--verde-escuro); color: var(--tinta-clara); }
.compara .rot { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--apagado); }
.compara .pilg .rot { color: var(--bronze-claro); }
.compara ul { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 16px; }
.compara li { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 16px; line-height: 1.5; }
.compara li svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; }
.compara .hoje svg { color: #9B2F24; } .compara .pilg svg { color: var(--bronze-claro); }

.perguntas { margin: 3.5rem auto 0; max-width: 48rem; border-radius: 24px; background: #FFFDF7; overflow: hidden; }
.perguntas > div { padding: 28px 24px; border-bottom: 1px solid var(--linha); }
.perguntas > div:last-child { border-bottom: 0; }
.perguntas h3 { margin: 0; font: 400 1.35rem/1.3 var(--titulo); color: var(--tinta); }
.perguntas p { margin: 12px 0 0; font-size: 15px; line-height: 1.65; color: var(--apagado); }

.final { background: var(--verde-escuro); color: var(--tinta-clara); text-align: center; padding-block: 7rem; margin-top: 4rem; }
.final .secao { display: flex; flex-direction: column; align-items: center; max-width: 42rem; }
.final img { width: 64px; height: 64px; border-radius: 16px; }
.final h2 { margin: 2rem 0 0; font: 400 2.2rem/1.1 var(--titulo); color: var(--tinta-clara); }
.final p { margin: 1.25rem 0 0; max-width: 28rem; font-size: 16px; line-height: 1.6; color: #CFD6C7; }
.final .loja { margin-top: 2.25rem; background: var(--bronze-claro); color: var(--verde-escuro); }
.final .nota { margin-top: 1.25rem; font-size: 13px; color: rgba(246,241,226,.55); }

.rodape-inicio { background: var(--verde-escuro); border-top: 1px solid rgba(246,241,226,.10); padding-block: 2rem 2.5rem; }
.rodape-inicio .secao { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.rodape-inicio nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
.rodape-inicio a { color: #CFD6C7; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
.rodape-inicio small { color: rgba(246,241,226,.5); font-size: 13px; }

@media (min-width: 768px) {
  .heroi { padding-top: 4rem; } .heroi h1 { font-size: 3.5rem; }
  .recursos { grid-template-columns: 1fr 1fr; gap: 40px 48px; }
  .compara { grid-template-columns: 1fr 1fr; }
  .titulo-bloco h2, .final h2 { font-size: 2.75rem; }
  .perguntas > div { padding: 32px 40px; }
}

/* Os efeitos do scrollthebibleapp.com: o título sai do desfoque, os itens do topo sobem em sequência, o celular sobe e cresce,
   e cada bloco surge de baixo ao entrar na tela. Só com JavaScript ligado (classe "js" no html); sem ele, tudo aparece parado. */
.js .surge { opacity: 0; transform: translateY(var(--sobe, 18px)); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); transition-delay: var(--atraso, 0s); }
.js .surge.celular { --sobe: 40px; transform: translateY(40px) scale(.97); transition-duration: 1s; }
.js .surge.visto { opacity: 1; transform: none; }
.js .heroi h1.surge { filter: blur(10px); transition-property: opacity, transform, filter; }
.js .heroi h1.surge.visto { filter: none; }
@media (prefers-reduced-motion: reduce) { .js .surge, .js .surge.celular, .js .heroi h1.surge { opacity: 1; transform: none; filter: none; transition: none; } }