/* Tema noturno do Worship Unit para as páginas de apoio da landing
   (suporte.html, privacidade.html). Tokens de src/styles/tokens.css — os mesmos
   da landing e da apresentação. Poppins do app, servida daqui: sem fonte externa. */
@font-face { font-family:"Poppins"; src:url(/landing/assets/fonts/Poppins-Regular.woff2) format("woff2"); font-weight:400; font-display:swap; }
@font-face { font-family:"Poppins"; src:url(/landing/assets/fonts/Poppins-Medium.woff2) format("woff2"); font-weight:500; font-display:swap; }
@font-face { font-family:"Poppins"; src:url(/landing/assets/fonts/Poppins-SemiBold.woff2) format("woff2"); font-weight:600; font-display:swap; }
@font-face { font-family:"Poppins"; src:url(/landing/assets/fonts/Poppins-Bold.woff2) format("woff2"); font-weight:700; font-display:swap; }

:root {
  --canvas:#0a1928; --surface:#102a41; --surface-muted:#173b58; --surface-inset:#0d2033;
  --stroke:rgba(99,134,173,.28); --stroke-strong:rgba(106,169,224,.5);
  --text-primary:#fff7e6; --text-secondary:#b9c8d6; --brand:#1d69b5; --brand-hover:#2577c9;
  --accent-ink:#6aa9e0; --font:"Poppins",-apple-system,"Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after { box-sizing:border-box; }
html { background:var(--canvas); color-scheme:dark; -webkit-text-size-adjust:100%; }
body { margin:0; position:relative; background:var(--canvas); color:var(--text-primary); font:16px/1.65 var(--font); -webkit-font-smoothing:antialiased; font-synthesis:none; overflow-x:hidden; }
body::before { content:""; position:fixed; inset:-20%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 42% at 82% 6%, rgba(29,105,181,.28), transparent 70%),
    radial-gradient(34% 40% at 6% 92%, rgba(99,134,173,.14), transparent 70%); }
img { display:block; max-width:100%; }
a { color:inherit; text-underline-offset:4px; }
h1,h2,h3,p { margin:0; }
h1,h2 { font-weight:700; letter-spacing:-.025em; text-wrap:balance; }
p { text-wrap:pretty; color:var(--text-secondary); }
strong { color:var(--text-primary); font-weight:600; }
a:focus-visible,summary:focus-visible { outline:2px solid var(--accent-ink); outline-offset:4px; border-radius:4px; }
.skip { position:fixed; top:12px; left:12px; padding:12px 18px; border-radius:12px; background:var(--brand); color:#fff; z-index:30; transform:translateY(-160%); }
.skip:focus { transform:none; }

/* Cabeçalho de vidro, o mesmo da landing. */
.header { position:sticky; top:0; z-index:20; padding-top:env(safe-area-inset-top); background:rgba(10,25,40,.72); -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3); border-bottom:1px solid var(--stroke); }
.header-inner { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo { width:160px; flex-shrink:0; }
.logo img { width:100%; height:auto; }
.nav { display:flex; gap:24px; align-items:center; font-size:14px; font-weight:500; color:var(--text-secondary); }
.nav a { display:inline-flex; align-items:center; gap:6px; min-height:44px; white-space:nowrap; text-decoration:none; }
.nav a:hover { color:var(--text-primary); }

/* Botão primário: o app-btn--primary. */
.button { display:inline-flex; align-items:center; justify-content:center; gap:14px; padding:14px 22px; min-height:48px; background:var(--brand); color:#fff; border:1px solid rgba(255,247,230,.16); border-radius:14px; font-size:15px; font-weight:600; text-decoration:none; box-shadow:0 10px 26px rgba(29,105,181,.35); transition:background .2s,transform .2s var(--ease); }
.button:hover { background:var(--brand-hover); transform:translateY(-2px); }
.arrow { font-size:18px; font-weight:400; line-height:1; }

/* Rótulo em pílula, como nos slides. */
.chapter { display:inline-flex; align-items:center; gap:10px; padding:6px 14px; border-radius:99px; font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); background:rgba(106,169,224,.1); border:1px solid rgba(106,169,224,.28); }

/* Cartão: o .card dos slides. */
.card { background:linear-gradient(180deg, rgba(23,59,88,.55), rgba(16,42,65,.85)); border:1px solid var(--stroke); border-radius:20px; }

/* Pergunta que abre. */
details { background:linear-gradient(180deg, rgba(23,59,88,.55), rgba(16,42,65,.85)); border:1px solid var(--stroke); border-radius:16px; padding:0 20px; transition:border-color .25s; }
details + details { margin-top:10px; }
details[open] { border-color:var(--stroke-strong); }
summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:60px; padding:14px 0; font-size:16px; font-weight:600; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; flex-shrink:0; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:rgba(106,169,224,.12); color:var(--accent-ink); font-size:20px; font-weight:500; }
details[open] summary::after { content:"−"; }

.footer { padding:36px 0 calc(28px + env(safe-area-inset-bottom)); border-top:1px solid var(--stroke); }
.footer-top { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.footer .logo { width:150px; }
.footer-links { display:flex; flex-wrap:wrap; gap:0 22px; font-size:14px; color:var(--text-secondary); }
.footer-links a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.footer-links a:hover { color:var(--text-primary); }
.footer-bottom { display:flex; justify-content:space-between; gap:24px; font-size:13px; color:var(--text-secondary); margin-top:20px; padding-top:18px; border-top:1px solid var(--stroke); }

@media (max-width:760px) {
  .header-inner { min-height:64px; } .logo { width:140px; } .nav { gap:16px; }
  .footer-top { flex-direction:column; align-items:flex-start; gap:8px; } .footer-bottom { flex-direction:column; gap:6px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; animation:none!important; } }

/* ═══ Guias (landing/escala-de-louvor/…) ═══ */
.guia-wrap { width:min(760px,calc(100% - 40px)); margin-inline:auto; }
.header .wrap, .footer .wrap-larga { width:min(1200px,calc(100% - 40px)); margin-inline:auto; }
.trilha { display:flex; flex-wrap:wrap; gap:6px; padding:28px 0 0; margin:0; list-style:none; font-size:13px; color:var(--text-secondary); }
.trilha li + li::before { content:"›"; margin-right:6px; color:var(--detail-blue, #6386ad); }
.trilha a { text-decoration:none; }
.trilha a:hover { color:var(--text-primary); }
.guia-topo { padding:28px 0 8px; }
.guia-topo h1 { margin-top:18px; font-size:clamp(34px,4.6vw,52px); line-height:1.08; }
.guia-topo .lead { margin-top:18px; font-size:19px; line-height:1.6; }
.guia-meta { margin-top:18px; font-size:14px; color:var(--text-secondary); }
.sumario { margin-top:32px; padding:20px 24px; }
.sumario h2 { font-size:13px !important; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin:0 0 10px !important; }
.sumario ol { margin:0; padding-left:20px; display:grid; gap:4px; }
.sumario a { color:var(--text-primary); text-decoration:none; }
.sumario a:hover { color:var(--accent-ink); }
.guia { padding-bottom:24px; font-size:17px; }
.guia h2 { font-size:clamp(26px,2.8vw,32px); line-height:1.15; margin:56px 0 16px; scroll-margin-top:96px; }
.guia h3 { font-size:19px; font-weight:600; margin:32px 0 10px; color:var(--text-primary); }
.guia p, .guia li { color:var(--text-secondary); line-height:1.75; }
.guia p { margin:0 0 16px; }
.guia ul, .guia ol { margin:0 0 18px; padding-left:24px; }
.guia li { margin-bottom:8px; }
.guia li::marker { color:var(--accent-ink); font-weight:600; }
.guia a { color:var(--accent-ink); font-weight:500; }
.guia .passo { margin-top:28px; padding:20px 22px; }
.guia .passo h3 { margin-top:0; }
.guia .passo h3 span { color:var(--accent-ink); margin-right:8px; }
.guia .passo p:last-child { margin-bottom:0; }
.dica { margin:24px 0; padding:18px 20px; border-radius:16px; border:1px solid rgba(32,199,141,.32); background:rgba(32,199,141,.08); }
.dica p { margin:0; color:var(--text-primary); }
.dica strong { color:#20c78d; }
.texto-pronto { margin:20px 0; padding:18px 20px; border-radius:16px; border:1px dashed var(--stroke-strong); background:var(--surface-inset); font-size:15px; white-space:pre-line; color:var(--text-primary); line-height:1.7; }
.tabela { margin:20px 0 24px; overflow-x:auto; border:1px solid var(--stroke); border-radius:16px; background:rgba(16,42,65,.6); }
.tabela table { width:100%; border-collapse:collapse; font-size:14px; min-width:560px; }
.tabela th, .tabela td { text-align:left; padding:11px 12px; border-top:1px solid var(--stroke); color:var(--text-secondary); vertical-align:top; }
.tabela tr:first-child > * { border-top:0; }
.tabela th { color:var(--text-primary); font-weight:600; background:rgba(23,59,88,.5); }
.no-app { margin:56px 0 0; padding:30px 28px; border-radius:24px; border:1px solid var(--stroke);
  background:radial-gradient(60% 80% at 100% 0%, rgba(29,105,181,.35), transparent 70%), linear-gradient(180deg, rgba(23,59,88,.6), rgba(16,42,65,.9)); }
.no-app h2 { margin-top:16px !important; }
.no-app .button { margin-top:8px; }
.leia { margin:48px 0 64px; }
.leia h2 { font-size:22px; margin:0 0 14px; }
.leia ul { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.leia a { display:block; padding:16px 18px; text-decoration:none; font-weight:600; color:var(--text-primary); transition:border-color .2s; }
.leia a:hover { border-color:var(--stroke-strong); }
.leia a span { display:block; margin-top:4px; font-size:14px; font-weight:400; color:var(--text-secondary); }
@media (max-width:760px) { .guia { font-size:16px; } .guia-topo .lead { font-size:17px; } .no-app { padding:24px 20px; } }
.guia .button { color:#fff; }