/* Site público NetFiéis — layout do núcleo, igual para todos os portais.
   Cores e fontes vêm do /tema.css (variáveis --cor-*, --fonte-*, --raio).
   Mobile-first; faixas: < 600 celular · 600–1023 tablet · >= 1024 computador.
   Origem visual: protótipo aprovado em 2026-10-06 (docs/14-plano-f0-fundacao.md). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.pub {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-texto);
  font-size: 16px;
  line-height: 1.45;
}
.pub a:not([class]) { color: var(--cor-primaria); }
.pub h1, .pub h2, .pub h3 { margin: 0; }
.icone { flex-shrink: 0; display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pular-conteudo { position: absolute; left: -9999px; top: 8px; z-index: 10; background: var(--cor-superficie); padding: 8px 12px; border-radius: 8px; }
.pular-conteudo:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--cor-acento); outline-offset: 2px; }

/* ── Estrutura ─────────────────────────────────────────────── */
.pub-app { min-height: 100vh; display: flex; }
.pub-lateral { display: none; }
.pub-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pub-conteudo { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 24px 16px calc(88px + env(safe-area-inset-bottom)); }

.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cor-texto); }
.marca img { width: 34px; height: 34px; border-radius: 10px; }
.marca span { font-family: var(--fonte-titulo); font-size: 19px; font-weight: 600; }

/* Navegação inferior (celular/tablet) */
.nav-inferior {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  height: calc(72px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--cor-superficie); border-top: 1px solid var(--cor-borda);
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));   /* F14: 6 itens (Ajuda) */
}
.nav-inferior a {
  text-decoration: none; color: var(--cor-texto-secundario);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: 12px; font-weight: 600; min-height: 48px;
}
.nav-inferior a[aria-current="page"] { color: var(--cor-primaria); font-weight: 800; }

/* Navegação lateral (computador) */
.nav-lateral { display: flex; flex-direction: column; gap: 4px; }
.nav-lateral a {
  height: 46px; padding: 0 12px; border-radius: 12px; text-decoration: none;
  color: var(--cor-texto-secundario); display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600;
}
.nav-lateral a:hover { background: var(--cor-fundo); }
.nav-lateral a[aria-current="page"] { background: var(--cor-primaria-suave); color: var(--cor-primaria); font-weight: 800; }

/* ── Componentes ───────────────────────────────────────────── */
.cartao { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: calc(var(--raio) + 2px); padding: 16px; }
.cartao-destaque { background: var(--cor-primaria); color: var(--cor-primaria-texto); border-radius: calc(var(--raio) + 6px); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.cartao-destaque a:not(.botao) { color: var(--cor-primaria-texto); }
.cartao-acento { background: var(--cor-acento-suave); border-radius: calc(var(--raio) + 2px); padding: 16px; color: var(--cor-texto); text-decoration: none; display: flex; flex-direction: column; gap: 10px; }
.rotulo-secao { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cor-texto-secundario); }
.cartao-destaque .rotulo-secao { color: inherit; opacity: .8; }
.destaque-texto, .destaque-acoes { display: flex; flex-direction: column; gap: 12px; }
.titulo-pagina { font-family: var(--fonte-titulo); font-weight: 600; font-size: 30px; line-height: 1.15; }
.titulo-destaque { font-family: var(--fonte-titulo); font-weight: 600; font-size: 28px; line-height: 1.1; }
.texto-secundario { color: var(--cor-texto-secundario); }
.numero-grande { font-family: var(--fonte-titulo); font-size: 26px; font-weight: 600; }

.botao {
  min-height: 52px; padding: 0 20px; border-radius: 14px; border: none; cursor: pointer;
  font: inherit; font-size: 17px; font-weight: 800; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.botao-primario { background: var(--cor-primaria); color: var(--cor-primaria-texto); }
.botao-secundario { background: var(--cor-superficie); color: var(--cor-primaria); border: 1.5px solid var(--cor-primaria); }
.botao-claro { background: var(--cor-superficie); color: var(--cor-primaria); }
.botao-largo { width: 100%; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 700; background: var(--cor-primaria-suave); color: var(--cor-primaria); }
.cartao-destaque .chip { background: rgba(255, 255, 255, .14); color: inherit; }

.barra { height: 8px; background: var(--cor-borda); border-radius: 999px; overflow: hidden; }
.barra > span { display: block; height: 100%; background: var(--cor-primaria); border-radius: 999px; }
.barra-acento { background: rgba(0, 0, 0, .08); }
.barra-acento > span, .barra > span.completo { background: var(--cor-acento); }

.anel { --pct: 0; width: 86px; height: 86px; flex-shrink: 0; border-radius: 50%;
  background: conic-gradient(var(--cor-acento) calc(var(--pct) * 1%), var(--cor-acento-suave) 0);
  display: flex; align-items: center; justify-content: center; }
.anel > span { width: 66px; height: 66px; border-radius: 50%; background: var(--cor-superficie); display: flex; align-items: center; justify-content: center; font-family: var(--fonte-titulo); font-size: 22px; font-weight: 600; }

.semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; text-align: center; }
.semana .dia { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--cor-texto-secundario); }
.semana .marca-dia { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--cor-borda); }
.semana .feito .marca-dia { background: var(--cor-primaria); border: none; color: var(--cor-primaria-texto); }
.semana .hoje .marca-dia { border: 2.5px solid var(--cor-acento); background: var(--cor-acento-suave); }

.linha-livro { min-height: 48px; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--cor-texto); }
.linha-livro + .linha-livro { border-top: 1px solid var(--cor-borda); }
.linha-livro .nome { width: 108px; flex-shrink: 0; font-weight: 700; }
.linha-livro .barra { flex: 1; }
.linha-livro .pct { min-width: 44px; text-align: right; font-weight: 800; white-space: nowrap; }
.linha-livro .pct.vazio { color: var(--cor-texto-secundario); font-weight: 600; font-size: 13px; }

.empilhado { display: flex; flex-direction: column; gap: 16px; }
.duas-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.aviso-exemplo { font-size: 13px; color: var(--cor-acento-texto); background: var(--cor-acento-suave); border-radius: 10px; padding: 8px 12px; }

/* ── Telas ─────────────────────────────────────────────────── */
.inicio-grade, .mapa-grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.empilhado > *, .inicio-grade > *, .mapa-grade > * { min-width: 0; }
.mapa-resumo { display: flex; align-items: center; gap: 16px; }

/* ── Tablet ────────────────────────────────────────────────── */
@media (min-width: 600px) {
  .pub-conteudo { padding: 32px 32px calc(100px + env(safe-area-inset-bottom)); }
  .nav-inferior { height: calc(80px + env(safe-area-inset-bottom)); }
  .nav-inferior a { flex-direction: row; gap: 8px; font-size: 15px; }
  .titulo-pagina { font-size: 34px; }
  .mapa-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 20px; }
  .anel { width: 112px; height: 112px; }
  .anel > span { width: 86px; height: 86px; font-size: 28px; }
}

/* ── Computador ────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .nav-inferior { display: none; }
  .pub-lateral {
    display: flex; flex-direction: column; gap: 28px; flex: 0 0 248px;
    background: var(--cor-superficie); border-right: 1px solid var(--cor-borda); padding: 28px 18px;
    position: sticky; top: 0; height: 100vh;
  }
  .pub-lateral .marca { padding: 0 8px; }
  .pub-conteudo { padding: 36px 40px 40px; }
  .titulo-pagina { font-size: 36px; }
  .inicio-grade { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); align-items: start; gap: 24px; }
  .cartao-destaque { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 28px 32px; }
  .cartao-destaque .destaque-texto { flex: 1 1 280px; display: flex; flex-direction: column; gap: 12px; }
  .cartao-destaque .destaque-acoes { flex: 0 1 220px; display: flex; flex-direction: column; gap: 10px; }
  .titulo-destaque { font-size: 34px; }
}

/* ── Formulários e telas de conta (F1) ─────────────────────── */
.pagina-estreita { max-width: 460px; margin: 0 auto; }
.formulario { display: flex; flex-direction: column; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-weight: 700; font-size: 15px; }
.campo .ajuda { font-size: 13px; color: var(--cor-texto-secundario); }
.pub input[type=text], .pub input[type=email], .pub input[type=password], .pub input[type=tel], .pub input[type=date], .pub input[type=number], .pub textarea {
  font: inherit; font-size: 16px; min-height: 50px; padding: 0 14px; width: 100%;
  border: 1.5px solid var(--cor-borda); border-radius: 12px; background: var(--cor-superficie); color: var(--cor-texto);
}
.pub input[type=text]:focus, .pub input[type=email]:focus, .pub input[type=password]:focus, .pub input[type=tel]:focus, .pub input[type=date]:focus, .pub input[type=number]:focus, .pub textarea:focus { border-color: var(--cor-primaria); outline: 2px solid var(--cor-primaria-suave); }
.pub textarea { padding: 12px 14px; min-height: 80px; resize: vertical; line-height: 1.4; }
.marcacao { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.4; cursor: pointer; }
.marcacao input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: var(--cor-primaria); }
.alerta { border-radius: 12px; padding: 12px 14px; font-size: 15px; }
.alerta-erro { background: var(--cor-erro-suave); color: var(--cor-erro); font-weight: 700; }
.alerta-ok { background: var(--cor-acerto-suave); color: var(--cor-acerto); font-weight: 700; }
.alerta-aviso { background: var(--cor-acento-suave); color: var(--cor-acento-texto); }
.separador { display: flex; align-items: center; gap: 12px; color: var(--cor-texto-secundario); font-size: 14px; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--cor-borda); }
.link-discreto { font-size: 15px; font-weight: 700; text-align: center; }
.botao-perigo { background: var(--cor-erro); color: #fff; }
.lista-simples { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.documento h2 { font-family: var(--fonte-titulo); font-size: 20px; margin: 20px 0 6px; }
.documento p { margin: 0 0 12px; }
.rodape { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; padding: 32px 0 8px; font-size: 14px; }
.rodape a { color: var(--cor-texto-secundario); }

/* ── Jogo (F3) ─────────────────────────────────────────────── */
.jogo { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.jogo-topo { display: flex; align-items: center; gap: 12px; }
.jogo-sair { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--cor-texto); text-decoration: none; flex-shrink: 0; }
.segmentos { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.segmentos span { height: 8px; border-radius: 999px; background: var(--cor-borda); }
.segmentos span.feito { background: var(--cor-primaria); }
.segmentos span.atual { background: var(--cor-acento); }
.jogo-posicao { font-weight: 700; color: var(--cor-texto-secundario); white-space: nowrap; }
/* Relógio das respostas (F18): anel que esvazia; vermelho nos últimos 10 s. */
.relogio { position: relative; width: 40px; height: 40px; flex: none; }
.relogio svg { display: block; transform: rotate(-90deg); }
.relogio-fundo, .relogio-anel { fill: none; stroke-width: 4; }
.relogio-fundo { stroke: var(--cor-borda); }
.relogio-anel { stroke: var(--cor-primaria); stroke-linecap: round; transition: stroke-dashoffset .25s linear, stroke .3s; }
.relogio-segundos { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--cor-texto); }
.relogio.acabando .relogio-anel { stroke: var(--cor-erro); }
.relogio.acabando .relogio-segundos { color: var(--cor-erro); }
.relogio.parado { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .relogio-anel { transition: none; } }
.enunciado { font-family: var(--fonte-titulo); font-weight: 600; font-size: 23px; line-height: 1.3; margin: 0; }
.opcoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.opcao {
  width: 100%; min-height: 58px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-align: left;
  border-radius: calc(var(--raio) - 2px); border: 1.5px solid var(--cor-borda); background: var(--cor-superficie);
  font: inherit; font-size: 16px; font-weight: 600; color: var(--cor-texto); cursor: pointer;
}
.opcao:hover:not(:disabled) { border-color: var(--cor-primaria); }
.opcao .letra { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; background: var(--cor-fundo); }
.opcao .texto { flex: 1; }
.opcao:disabled { cursor: default; }
.opcao.apagada { opacity: .55; }
.opcao.certa { background: var(--cor-acerto-suave); border: 2px solid var(--cor-acerto); }
.opcao.certa .letra { background: var(--cor-acerto); color: #fff; }
.opcao.errada { background: var(--cor-erro-suave); border: 2px solid var(--cor-erro); }
.opcao.errada .letra { background: var(--cor-erro); color: #fff; }
.feedback { border-radius: calc(var(--raio) + 2px); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.feedback.acerto { background: var(--cor-acerto-suave); }
.feedback.erro { background: var(--cor-erro-suave); }
.feedback .titulo-feedback { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; }
.feedback.acerto .titulo-feedback { color: var(--cor-acerto); }
.feedback.erro .titulo-feedback { color: var(--cor-erro); }
.feedback .referencia { align-self: flex-start; background: var(--cor-superficie); border-radius: 10px; padding: 6px 10px; font-weight: 800; color: var(--cor-primaria); display: flex; align-items: center; gap: 6px; }
.feedback .pontos.credito { color: var(--cor-texto-secundario); margin-left: 0; }
.feedback .pontos { margin-left: auto; background: var(--cor-superficie); border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 800; color: var(--cor-acerto); }
.jogo-rodape { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.atalhos { font-size: 14px; color: var(--cor-texto-secundario); display: none; }
.atalhos kbd { font-family: inherit; border: 1px solid var(--cor-borda); border-bottom-width: 2px; border-radius: 6px; padding: 1px 7px; background: var(--cor-superficie); font-weight: 800; }
.link-reportar { background: none; border: none; padding: 0; font: inherit; font-size: 14px; color: var(--cor-texto-secundario); text-decoration: underline; cursor: pointer; }
.placar-redondo { width: 148px; height: 148px; border-radius: 50%; border: 8px solid var(--cor-primaria); background: var(--cor-superficie); display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto; }
.placar-redondo strong { font-family: var(--fonte-titulo); font-size: 46px; line-height: 1; }
.tres-colunas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; text-align: center; }
.lista-escolha { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.lista-escolha label { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--cor-borda); border-radius: 12px; padding: 10px 12px; background: var(--cor-superficie); cursor: pointer; min-height: 48px; }
.lista-escolha input { accent-color: var(--cor-primaria); width: 18px; height: 18px; }
.lista-escolha small { color: var(--cor-texto-secundario); margin-left: auto; }
@media (min-width: 600px) {
  .opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enunciado { font-size: 30px; }
  .opcao { min-height: 72px; font-size: 18px; }
}
@media (min-width: 1024px) {
  .atalhos { display: block; }
}
.pub select, .pub textarea { font: inherit; font-size: 16px; width: 100%; padding: 10px 14px; border: 1.5px solid var(--cor-borda); border-radius: 12px; background: var(--cor-superficie); color: var(--cor-texto); }
.pub select { min-height: 50px; }

[hidden] { display: none !important; }

/* ── Carteira e convite (F4) ───────────────────────────────── */
.extrato { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.extrato li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cor-borda); }
.extrato li:last-child { border-bottom: none; }
.extrato li > strong { text-align: right; font-size: 17px; }
.extrato .mais { color: var(--cor-acerto); }
.extrato .menos { color: var(--cor-texto-secundario); }
.link-convite { display: flex; gap: 8px; }
.link-convite input { flex: 1; min-width: 0; }
.passos-convite { display: grid; grid-template-columns: repeat(var(--qtd, 3), minmax(0, 1fr)); gap: 6px; }
.passos-convite span { height: 10px; border-radius: 999px; background: var(--cor-borda); }
.passos-convite span.feito { background: var(--cor-acento); }
.situacao { font-size: 13px; font-weight: 700; border-radius: 999px; padding: 2px 10px; background: var(--cor-fundo); white-space: nowrap; }
.situacao.ok { background: var(--cor-acerto-suave); color: var(--cor-acerto); }

/* ── Progresso (F5) ────────────────────────────────────────── */
.semana .perdoado .marca-dia { border: 1.5px solid var(--cor-acento); background: var(--cor-acento-suave); color: var(--cor-acento-texto); font-weight: 800; }
.selo { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.selo-1 { background: #f1dcc6; color: #7a4a1c; }
.selo-2 { background: #e3e6ea; color: #4a5560; }
.selo-3 { background: #fbe9a8; color: #7a5a00; }
.capitulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.capitulo { min-height: 64px; border-radius: 12px; border: 1.5px solid var(--cor-borda); background: var(--cor-superficie); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.capitulo strong { font-family: var(--fonte-titulo); font-size: 19px; line-height: 1; }
.capitulo small { font-size: 11px; font-weight: 700; color: var(--cor-texto-secundario); }
.capitulo.conhecida { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--cor-primaria-texto); }
.capitulo.conhecida small { color: inherit; opacity: .85; }
.capitulo.andamento { border-color: var(--cor-acento); background: var(--cor-acento-suave); }
.capitulo.vazia { border-style: dashed; opacity: .55; }
.legenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--cor-texto-secundario); }
.nivel-geral { display: flex; flex-direction: column; gap: 8px; }
.conquistas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.conquistas li { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.conquistas li::before { content: "★"; color: var(--cor-acento); }

/* ── Desafio por link (F6) ─────────────────────────────────── */
.confronto { display: flex; align-items: center; justify-content: center; gap: 14px; }
.confronto > div { flex: 1; max-width: 190px; border-radius: calc(var(--raio) + 2px); border: 1.5px solid var(--cor-borda); background: var(--cor-superficie); padding: 16px 10px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.confronto > div.venceu { border: 2.5px solid var(--cor-acerto); background: var(--cor-acerto-suave); }
.confronto strong { font-family: var(--fonte-titulo); font-size: 38px; line-height: 1; }
.confronto span { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.confronto .versus { font-size: 24px; color: var(--cor-texto-secundario); }
.classificacao { list-style: none; margin: 0; padding: 0; }
.classificacao li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--cor-borda); }
.classificacao li:last-child { border-bottom: none; }
.classificacao .posicao { width: 28px; height: 28px; border-radius: 50%; background: var(--cor-fundo); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; flex-shrink: 0; }
.classificacao .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.classificacao li.eu .posicao { background: var(--cor-primaria); color: var(--cor-primaria-texto); }

/* ── Grupos (F7) ───────────────────────────────────────────── */
.abas { display: flex; gap: 6px; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: 999px; padding: 4px; align-self: flex-start; }
.abas a { padding: 8px 14px; border-radius: 999px; font-weight: 700; text-decoration: none; color: var(--cor-texto-secundario); }
.abas a.ativa { background: var(--cor-primaria); color: var(--cor-primaria-texto); }
.membros-hoje { display: flex; flex-wrap: wrap; gap: 6px; }
.membro-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 10px; font-size: 13px; font-weight: 700; background: var(--cor-fundo); color: var(--cor-texto-secundario); }
.membro-chip.jogou { background: var(--cor-acerto-suave); color: var(--cor-acerto); }
.aviso-privacidade { border-left: 4px solid var(--cor-acento); background: var(--cor-acento-suave); border-radius: 10px; padding: 12px 14px; text-align: left; font-size: 15px; }
details.gerenciar > summary { cursor: pointer; font-weight: 800; }
.linha-membro { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--cor-borda); }
.linha-membro:last-child { border-bottom: none; }
.linha-membro .nome { flex: 1; min-width: 120px; font-weight: 700; }
.botao-pequeno { min-height: 36px; padding: 0 12px; font-size: 14px; }
a.chip { text-decoration: none; color: var(--cor-texto); }

/* ── Doe e receba (F8) ─────────────────────────────────────── */
.pacotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.pacote { background: var(--cor-superficie); border: 1.5px solid var(--cor-borda); border-radius: calc(var(--raio) + 2px); padding: 18px 16px; display: flex; flex-direction: column; gap: 8px; text-align: center; }
.pacote.destaque { border: 2.5px solid var(--cor-primaria); }
.pacote .valor { font-family: var(--fonte-titulo); font-size: 30px; font-weight: 600; }
.pacote .creditos { font-size: 17px; }
.pix-qr { width: 240px; max-width: 100%; margin: 0 auto; background: #fff; border-radius: 12px; padding: 10px; border: 1px solid var(--cor-borda); }
.pix-qr svg { display: block; width: 100%; height: auto; }
.copia-cola { font-family: ui-monospace, Consolas, monospace; font-size: 12px; word-break: break-all; background: var(--cor-fundo); border-radius: 10px; padding: 10px; text-align: left; }
.pub input[type=file] { font: inherit; font-size: 15px; width: 100%; }
.extrato li > .situacao { align-self: center; justify-self: end; }

/* Convite "Instalar o app" (F11, js/app.js) — acima da barra inferior no celular. */
.convite-app {
  position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(84px + env(safe-area-inset-bottom));
  max-width: 440px; margin: 0 auto; background: var(--cor-superficie); color: var(--cor-texto);
  border: 1px solid var(--cor-borda); border-radius: calc(var(--raio) + 2px); box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 10px;
}
.convite-app-texto { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.convite-app-texto svg { vertical-align: -3px; }
.convite-app-acoes { display: flex; gap: 8px; justify-content: flex-end; }
@media (min-width: 1024px) { .convite-app { left: auto; right: 24px; bottom: 24px; } }

/* Página "sem internet" e páginas de erro. */
.pagina-aviso { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 24px 16px; }
.pagina-aviso img { width: 72px; height: 72px; }

/* Partilha (F11.1). */
.recado-partilha { margin: 0; padding: 14px 16px; background: var(--cor-acento-suave); color: var(--cor-texto); border-radius: calc(var(--raio) + 2px); font-size: 17px; font-style: italic; text-align: left; }
.recado-partilha cite { display: block; margin-top: 6px; font-size: 14px; font-style: normal; color: var(--cor-texto-secundario); }
.perguntas-partilha { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.perguntas-partilha li { display: flex; flex-direction: column; gap: 4px; }

/* Landing (F11.2) — quem chega pela primeira vez; sem a navegação do app. */
.pub-landing .pub-conteudo { max-width: 1080px; padding-bottom: 32px; }
.landing { display: flex; flex-direction: column; gap: 56px; }
.landing-topo { display: flex; align-items: center; justify-content: space-between; }
.landing-topo .marca { display: flex; align-items: center; gap: 10px; font-family: var(--fonte-titulo); font-size: 20px; font-weight: 600; color: var(--cor-texto); text-decoration: none; }
.landing-topo .marca img { width: 36px; height: 36px; }
.landing-entrar { font-weight: 700; color: var(--cor-primaria); }
.landing-hero { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; padding: 12px 0;
  background: radial-gradient(ellipse at 70% 20%, var(--cor-acento-suave), transparent 60%); }
.landing-hero h1 { font-family: var(--fonte-titulo); font-size: clamp(34px, 8vw, 54px); line-height: 1.08; margin: 0 0 14px; color: var(--cor-primaria); }
.landing-sub { font-size: 19px; color: var(--cor-texto-secundario); margin: 0 0 22px; max-width: 30em; }
.landing-cta { min-height: 58px; font-size: 18px; padding: 0 26px; width: 100%; max-width: 420px; }
.landing-selos { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 16px 0 0; color: var(--cor-acerto); font-weight: 700; font-size: 15px; }
.landing-celular { justify-self: center; width: min(280px, 72vw); border: 10px solid #1d2433; border-radius: 38px; overflow: hidden;
  box-shadow: 0 24px 50px rgba(36, 71, 122, .25); background: #1d2433; }
.landing-celular img { display: block; width: 100%; height: auto; }
.landing-celular-menor { width: min(240px, 64vw); }
.landing-secao h2, .landing-final h2 { font-family: var(--fonte-titulo); font-size: clamp(26px, 5vw, 34px); margin: 0 0 18px; color: var(--cor-texto); }
.landing-passos, .landing-cards { display: grid; grid-template-columns: 1fr; gap: 14px; }
.landing-passo, .landing-cards .cartao { display: flex; flex-direction: column; gap: 6px; }
.landing-passo { background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: calc(var(--raio) + 2px); padding: 18px; }
.landing-num { width: 34px; height: 34px; border-radius: 50%; background: var(--cor-primaria); color: var(--cor-primaria-texto); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.landing-dupla { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.landing-exemplo { display: flex; flex-direction: column; gap: 12px; }
.landing-exemplo-pergunta { font-family: var(--fonte-titulo); font-size: 22px; margin: 0; }
.landing-opcoes { display: flex; flex-direction: column; gap: 8px; }
.landing-opcoes button { font: inherit; text-align: left; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--cor-borda); background: var(--cor-superficie); color: var(--cor-texto); cursor: pointer; }
.landing-opcoes button:hover:not(:disabled) { border-color: var(--cor-primaria); }
.landing-opcoes button.certa { border-color: var(--cor-acerto); background: var(--cor-acerto-suave); font-weight: 700; }
.landing-opcoes button.errada { border-color: var(--cor-erro); background: var(--cor-erro-suave); }
.landing-opcoes button:disabled { cursor: default; }
.landing-exemplo-resposta { display: flex; flex-direction: column; gap: 10px; background: var(--cor-acerto-suave); border-radius: 14px; padding: 14px; }
.landing-instalar { text-align: center; background: var(--cor-primaria-suave); border-radius: calc(var(--raio) + 6px); padding: 28px 18px; }
.landing-instalar p { margin: 0 0 16px; }
.landing-instrucoes { text-align: left; max-width: 520px; margin: 16px auto 0; }
.landing-faq { display: flex; flex-direction: column; gap: 10px; }
.landing-faq summary { font-weight: 700; cursor: pointer; }
.landing-faq p { margin: 10px 0 0; color: var(--cor-texto-secundario); }
.landing-final { text-align: center; background: var(--cor-primaria); color: var(--cor-primaria-texto); border-radius: calc(var(--raio) + 6px); padding: 32px 18px; }
.landing-final h2 { color: inherit; }
@media (min-width: 860px) {
  .landing-hero { grid-template-columns: 1.2fr .8fr; }
  .landing-dupla { grid-template-columns: 1fr 1fr; }
  .landing-invertida { grid-template-columns: .8fr 1.2fr; }
  .landing-passos, .landing-cards { grid-template-columns: repeat(3, 1fr); }
}

/* Outubro Rosa (landing): paleta rosa só na página de apresentação — o app segue com as cores do tema.
   Contraste conferido: #A3134F × branco = 7,6:1; #A3134F × #FCE4EE = 6,4:1. */
.landing-rosa {
  --cor-primaria: #A3134F; --cor-primaria-texto: #FFFFFF; --cor-primaria-suave: #FCE4EE;
  --cor-fundo: #FDF5F8; --cor-borda: #F1D3DF;
  --cor-acento: #D6337A; --cor-acento-suave: #FBDDEA; --cor-acento-texto: #8E1243;
}
.landing-rosa .landing-selos { color: var(--cor-primaria); }
.landing-rosa .landing-celular { box-shadow: 0 24px 50px rgba(163, 19, 79, .25); }

/* Landing: fotos (Pexels, licença livre — ver temas/biblia/landing/CREDITOS.md). */
.landing-foto { margin: 0; position: relative; border-radius: calc(var(--raio) + 6px); overflow: hidden; }
.landing-foto img { display: block; width: 100%; height: clamp(200px, 42vw, 420px); object-fit: cover; }
.landing-foto-baixa { margin-bottom: 18px; }
.landing-foto-baixa img { height: clamp(180px, 34vw, 340px); object-position: center 30%; }
.landing-foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; color: #fff; font-weight: 700; font-size: 17px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .62)); }
.landing-instalar-foto { display: block; width: min(260px, 70vw); height: auto; aspect-ratio: 1; object-fit: cover; object-position: center 35%; border-radius: 50%; margin: 0 auto 18px;
  border: 6px solid var(--cor-superficie); box-shadow: 0 12px 30px rgba(0, 0, 0, .12); }
@media (min-width: 860px) {
  .landing-instalar-com-foto { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: center; text-align: left; padding: 32px; }
  .landing-instalar-com-foto .landing-instalar-foto { margin: 0; }
  .landing-instalar-com-foto .landing-instrucoes { margin-left: 0; }
}
.landing-foto-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.landing-foto-dupla img { height: clamp(170px, 38vw, 400px); }
@media (max-width: 599px) {
  .landing-foto-dupla { overflow: visible; }
  .landing-foto-dupla img { height: 190px; border-radius: 14px; }
  .landing-foto-dupla figcaption { position: static; grid-column: 1 / -1; background: none; color: var(--cor-texto-secundario); padding: 6px 2px 0; font-size: 15px; font-weight: 600; }
}

/* Cadastro (F11.3): dados pessoais opcionais */
.grupo-opcional { border: 1px solid var(--cor-borda); border-radius: 12px; padding: 12px 14px 4px; margin: 4px 0 8px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.grupo-opcional legend { font-weight: 600; padding: 0 6px; }
.grupo-opcional .ajuda { margin: 0; font-size: 13px; color: var(--cor-texto-secundario); }
.cidade-uf { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; }
@media (max-width: 380px) { .cidade-uf { grid-template-columns: 1fr; } }

/* Medalhas (F12) */
.medalhas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.medalha { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 12px 6px; border-radius: var(--raio); border: 1px dashed var(--cor-borda); color: var(--cor-texto-secundario); }
.medalha-icone { position: relative; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--cor-borda); color: var(--cor-texto-secundario); opacity: .55; }
.medalha-nivel { position: absolute; right: -4px; bottom: -4px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; font-size: 12px; font-weight: 800; line-height: 22px; background: var(--cor-superficie); border: 1px solid var(--cor-borda); color: var(--cor-texto-secundario); }
.medalha-nome { font-weight: 700; font-size: 14px; line-height: 1.2; }
.medalha-info { font-size: 12px; line-height: 1.25; }
.medalha.alcancada { border-style: solid; border-color: var(--cor-acento); background: var(--cor-acento-suave); color: var(--cor-texto); }
.medalha.alcancada .medalha-icone { background: var(--cor-acento); color: #fff; opacity: 1; }
.medalha.alcancada .medalha-nivel { border-color: var(--cor-acento); color: var(--cor-acento-texto); }
.medalha.proxima { border-style: solid; border-color: var(--cor-primaria); }
.medalha.proxima .medalha-icone { opacity: .85; }
.linha-medalha { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--cor-texto); text-decoration: none; padding-top: 10px; border-top: 1px solid var(--cor-borda); }

/* Avisos (F13) */
.botao-link { background: none; border: 0; padding: 0; color: var(--cor-primaria); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.lista-aparelhos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lista-aparelhos li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--cor-borda); }
.lista-aparelhos li:last-child { border-bottom: 0; padding-bottom: 0; }
.convite-avisos { gap: 10px; border-color: var(--cor-primaria); }
.convite-app-nota { display: block; margin-top: 4px; font-size: 13px; opacity: .85; }
.faixa-app { position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 10px;
  background: var(--cor-primaria); color: var(--cor-primaria-texto); border-radius: 14px; padding: 12px 14px; font-size: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.faixa-app[hidden] { display: none; }
.faixa-app-fechar { margin-left: auto; background: none; border: 0; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
@media (min-width: 900px) { .faixa-app { left: auto; right: 24px; bottom: 24px; max-width: 420px; } }

/* Início (F14): logotipo + livro de hoje, citação do dia, três indicadores */
.livro-hoje { display: flex; align-items: center; gap: 12px; }
.livro-hoje img { width: 44px; height: 44px; flex: none; border-radius: 12px; background: #fff; padding: 4px; object-fit: contain; }
.livro-hoje-titulo { margin: 0; font-family: var(--fonte-titulo); font-weight: 500; font-size: 20px; line-height: 1.2; }
.livro-hoje-titulo strong { font-weight: 600; }
.livro-hoje-detalhe { display: block; font-size: 13px; opacity: .85; margin-top: 2px; }
.livro-hoje-detalhe a { font-weight: 700; }
.citacao-dia { margin: 0; padding: 12px 14px; border-left: 3px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .08); border-radius: 0 10px 10px 0; }
.citacao-dia p { margin: 0; font-family: var(--fonte-titulo); font-size: 16px; line-height: 1.4; font-style: italic; }
.citacao-dia cite { display: block; margin-top: 6px; font-size: 13px; font-style: normal; opacity: .85; }
.indicadores-inicio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.indicadores-inicio .cartao { padding: 12px; }
.indicadores-inicio .numero-grande { font-size: 26px; }
.indicador-compartilhar { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-decoration: none; color: var(--cor-primaria); }
.indicador-compartilhar:hover { border-color: var(--cor-primaria); }
@media (min-width: 900px) { .cartao-destaque .destaque-texto { flex: 1 1 360px; } }

/* Livro em estudo e recomendações (F14) */
.em-estudo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lista-recomendacoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lista-recomendacoes li { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; background: var(--cor-primaria-suave); }
.acoes-recomendacao { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }

/* Card de compartilhamento (F14): prévia proporcional ao formato */
.cartao-previa { margin: 0 auto; width: min(100%, 360px); }
.cartao-previa.quadrado { width: min(100%, 460px); }
.cartao-previa canvas { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }

/* Menu de baixo com 6 itens (F14): rótulo menor no celular estreito; ícone em cima até 800 px */
@media (max-width: 380px) { .nav-inferior a { font-size: 11px; letter-spacing: -.1px; } .nav-inferior svg { width: 22px; height: 22px; } }
@media (min-width: 600px) and (max-width: 799px) { .nav-inferior a { flex-direction: column; gap: 4px; font-size: 13px; } }

/* Ajuda (F14): sumário em botões grandes e perguntas que abrem e fecham */
.ajuda-sumario { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ajuda-sumario a { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--cor-borda);
  background: var(--cor-superficie); color: var(--cor-texto); text-decoration: none; font-weight: 700; }
.ajuda-secao { gap: 10px; scroll-margin-top: 16px; }
.ajuda-secao h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 20px; color: var(--cor-primaria); }
.ajuda-secao > p { margin: 0; }
.ajuda details { border-top: 1px solid var(--cor-borda); padding: 12px 0 0; }
.ajuda summary { cursor: pointer; font-weight: 700; min-height: 32px; list-style-position: outside; }
.ajuda details p { margin: 8px 0 4px; line-height: 1.5; }

/* ── Início com a vela (F15.1, parâmetro Inicio.Layout = vela) ───────────────
   O Início clássico com a vela da caminhada no lugar do quadro da sequência e o campo de gratidão.
   Vale nas duas aparências; data-tom="escuro" vem do layout quando a aparência é escura. */
:root { --vela-halo-1: #F6DFA9; --vela-halo-2: #FBF1DE; --vela-corpo: #EAD9BC; --vela-contorno: #D8C6A6; --vela-apagada: #D8CCB6; }
[data-tom="escuro"] { --vela-halo-1: #5F431E; --vela-halo-2: #3E2D17; --vela-corpo: #EAD9BC; --vela-contorno: #EAD9BC; --vela-apagada: #3A2E24; }
[data-tom="escuro"] .barra-acento { background: rgba(255, 255, 255, .1); }
[data-tom="escuro"] .cartao-previa canvas, [data-tom="escuro"] .faixa-app { box-shadow: none; }
.vela-caminhada { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.vela-desenho { display: block; line-height: 0; }
.vela-desenho svg { width: 150px; height: auto; overflow: visible; }
.halo-fora { fill: var(--vela-halo-2); }
.halo-dentro { fill: var(--vela-halo-1); }
.vela-corpo, .vela-topo { fill: var(--vela-corpo); stroke: var(--vela-contorno); stroke-width: 1.5; }
.vela-topo { fill: #F5ECDC; }
.vela-pavio { stroke: #3B2A1C; }
.vela-chama { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(var(--escala-chama, 1)); animation: tremular 3.2s ease-in-out infinite; }
.vela-halo { animation: respirar 4.5s ease-in-out infinite; }
.vela-caminhada.apagada .vela-chama, .vela-caminhada.apagada .vela-halo { display: none; }
@keyframes tremular {
  0%, 100% { transform: scale(var(--escala-chama, 1)) rotate(0deg); }
  30% { transform: scale(calc(var(--escala-chama, 1) * 1.04), calc(var(--escala-chama, 1) * .97)) rotate(-1.5deg); }
  60% { transform: scale(calc(var(--escala-chama, 1) * .98), calc(var(--escala-chama, 1) * 1.05)) rotate(1.2deg); }
}
@keyframes respirar { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
@media (prefers-reduced-motion: reduce) { .vela-chama, .vela-halo { animation: none; } }
.vela-dias { font-family: var(--fonte-titulo); font-weight: 600; font-size: 30px; line-height: 1.15; margin-top: 8px !important; }
.vela-frase { margin: 0; font-size: 17px; }
.vela-detalhe { margin: 0; font-size: 13px; color: var(--cor-texto-secundario); display: flex; flex-direction: column; gap: 2px; }
.semana-velas { list-style: none; margin: 14px 0 0; padding: 0 0 18px; width: 100%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--cor-borda); }
.semana-velas li { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--cor-texto-secundario); }
.velinha { position: relative; width: 30px; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.velinha-corpo { position: relative; width: 12px; height: 26px; border-radius: 3px; background: var(--vela-apagada); }
.velinha-chama { position: absolute; z-index: 1; top: 4px; left: 50%; width: 9px; height: 13px; margin-left: -4.5px; border-radius: 50% 50% 45% 45% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 50% 70%, #FFF3D1 0 25%, #F6B13F 45%, #E8862A 100%); display: none; }
.semana-velas .feito .velinha-corpo { background: var(--vela-corpo); box-shadow: inset 0 0 0 1px var(--vela-contorno); }
.semana-velas .feito .velinha-chama { display: block; }
.semana-velas .perdoado .velinha-corpo { background: var(--vela-corpo); opacity: .55; }
.semana-velas .perdoado .velinha-chama { display: block; transform: scale(.6); transform-origin: 50% 100%; opacity: .7; }
.semana-velas .hoje .velinha::before { content: ""; position: absolute; top: -1px; left: 50%; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: var(--vela-halo-1); }
.semana-velas .hoje { color: var(--cor-texto); font-weight: 800; }
.intencao { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.intencao label { font-weight: 800; }
.intencao input { width: 100%; min-height: 50px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--cor-borda); background: var(--cor-fundo);
  color: var(--cor-texto); font: inherit; font-size: 17px; }
[data-tom="escuro"] .intencao input { border-color: #5A4A3A; }
.intencao input::placeholder { color: var(--cor-texto-secundario); opacity: .8; }
.intencao small { font-size: 12px; }

.inicio-vela .vela-caminhada { padding: 20px 16px 16px; }
.inicio-vela .vela-desenho svg { width: 120px; }
.inicio-vela .vela-dias { font-size: 26px; margin-top: 4px !important; }
.inicio-vela .vela-frase { font-size: 15px; }
.inicio-vela .semana-velas { margin-top: 10px; padding-bottom: 4px; border-bottom: 0; }
.inicio-vela .linha-medalha { align-self: stretch; text-align: left; margin-top: 6px; }
.inicio-vela .vela-detalhe:empty { display: none; }
/* Computador: quadros à esquerda; vela e mapa à direita (como a sequência e o mapa no clássico). */
@media (min-width: 1024px) {
  .inicio-vela .inicio-grade { grid-template-areas: "principal vela" "principal mapa"; grid-template-rows: auto 1fr; }
  .inicio-vela .inicio-principal { grid-area: principal; }
  .inicio-vela .vela-caminhada { grid-area: vela; }
  .inicio-vela .inicio-mapa { grid-area: mapa; }
}
/* Perfil › Aparência: amostra das cores de cada opção */
.opcao-aparencia { align-items: center; }
.amostra-aparencia { flex: none; width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid var(--cor-borda); background: #F8F5EF; }
.amostra-aparencia::after { content: ""; display: block; width: 12px; height: 12px; margin: 10px; border-radius: 50%; background: #24477A; }
.amostra-vela { background: #1B1511; }
.amostra-vela::after { background: #F2C46D; box-shadow: 0 0 0 4px #5F431E; }
.amostra-auto { background: linear-gradient(135deg, #F8F5EF 50%, #1B1511 50%); }
.amostra-auto::after { display: none; }

/* ── F16: Comente e ganhe ───────────────────────────────────────── */
.comente-valores { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.4; }
.comente-valores li { display: flex; align-items: baseline; gap: 10px; }
.comente-valores .situacao { flex: none; min-width: 42px; text-align: center; }
.comente-tipos { border: 0; margin: 0; padding: 0; gap: 10px; }
.comente-tipos legend { font-weight: 700; font-size: 15px; padding: 0; margin-bottom: 6px; }
.comentario-cabeca { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; font-size: 13px; }
.comentario-texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.comentario-resposta { border-left: 3px solid var(--cor-primaria); background: var(--cor-primaria-suave); border-radius: 0 10px 10px 0; padding: 10px 12px; font-size: 15px; }
.comentario-resposta p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.rodape .link-comente { flex-basis: 100%; text-align: center; color: var(--cor-primaria); font-weight: 700; }

/* ── F19: Enquetes ──────────────────────────────────────────────── */
/* Destaque no topo do Início (sazonal): borda forte na cor de acento, para ser notado de cara. */
.destaque-enquete { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: calc(var(--raio) + 2px);
  background: var(--cor-acento-suave); border: 2px solid var(--cor-acento); color: var(--cor-texto); text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.destaque-enquete-icone { flex: none; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--cor-acento); color: #fff; }
[data-tom="escuro"] .destaque-enquete-icone { color: var(--cor-fundo); }
.destaque-enquete-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.destaque-enquete-texto strong { font-size: 17px; line-height: 1.25; }
.destaque-enquete-texto small { font-size: 13px; color: var(--cor-texto-secundario); }
.destaque-enquete-selo { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cor-acento-texto); }
[data-tom="escuro"] .destaque-enquete-selo { color: var(--cor-acento); }
.destaque-enquete-botao { flex: none; padding: 9px 14px; border-radius: 999px; background: var(--cor-primaria); color: var(--cor-primaria-texto);
  font-weight: 800; font-size: 14px; }
.destaque-enquete.respondida { border-width: 1px; box-shadow: none; padding: 10px 14px; }
.destaque-enquete.respondida .destaque-enquete-icone { width: 32px; height: 32px; }
@media (max-width: 420px) { .destaque-enquete { flex-wrap: wrap; } .destaque-enquete-botao { width: 100%; text-align: center; } }
@media (prefers-reduced-motion: no-preference) {
  .destaque-enquete:not(.respondida) .destaque-enquete-icone { animation: chamar-enquete 2.4s ease-in-out 3; }
}
@keyframes chamar-enquete { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* Página da enquete. */
.enquete-pergunta { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.enquete-pergunta legend { font-family: var(--fonte-titulo); font-weight: 600; font-size: 20px; line-height: 1.3; padding: 0; margin-bottom: 2px; }
.enquete-instrucao { font-size: 13px; color: var(--cor-texto-secundario); margin-top: -4px; }
.enquete-opcao { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; border: 1.5px solid var(--cor-borda);
  border-radius: 14px; background: var(--cor-superficie); cursor: pointer; }
.enquete-opcao input { width: 20px; height: 20px; flex: none; accent-color: var(--cor-primaria); }
.enquete-opcao:has(input:checked) { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); }
[data-tom="escuro"] .enquete-opcao:has(input:checked) { background: rgba(255, 255, 255, .06); }
.enquete-explicar { align-self: flex-start; background: none; border: 0; padding: 4px 0; color: var(--cor-texto-secundario); font-size: 14px;
  text-decoration: underline; cursor: pointer; font: inherit; }
.enquete-explicacao textarea { width: 100%; min-height: 84px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--cor-borda);
  background: var(--cor-fundo); color: var(--cor-texto); font: inherit; }
.enquete-resultado { display: flex; flex-direction: column; gap: 8px; }
.enquete-barra { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; font-size: 15px; }
.enquete-barra .trilho { grid-column: 1 / -1; height: 10px; border-radius: 999px; background: var(--cor-borda); overflow: hidden; }
.enquete-barra .trilho span { display: block; height: 100%; border-radius: 999px; background: var(--cor-primaria); }
.enquete-barra strong { font-variant-numeric: tabular-nums; }

/* ── F20: aparência Pergaminho (proposta images/novo.jpeg) ─────────────────
   As cores vêm do tema (tema.json, aparência "pergaminho"). Aqui só o que é desenho: papel envelhecido,
   molduras douradas duplas, cartão principal azul-marinho com filete dourado, botão dourado, vitrais e
   Bíblia com vela no Início (artes em temas/biblia/pergaminho/). Nas outras aparências nada disto vale. */
[data-aparencia="pergaminho"] {
  --moldura: #C9A25E; --moldura-clara: #E3CA94; --papel: #FCF6E8;
  --ouro-claro: #F7E3A6; --ouro: #E2BC6A; --ouro-escuro: #C0913F; --ouro-texto: #E8C77A;
  --marinho: #1E2944; --marinho-claro: #2B3B62; --creme: #F4E4BF;
}
[data-aparencia="pergaminho"] body.pub {
  background-color: #EFE2C4;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .14 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23p)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 90% 60% at 20% 0%, rgba(255, 249, 230, .85), transparent 60%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(190, 150, 85, .22), transparent 65%),
    radial-gradient(ellipse 70% 50% at 0% 100%, rgba(170, 130, 70, .14), transparent 60%);
  background-attachment: fixed;
}

/* Cartões cor de papel com moldura dupla dourada. */
[data-aparencia="pergaminho"] .cartao,
[data-aparencia="pergaminho"] .cartao-acento {
  background: linear-gradient(180deg, var(--papel), #F7EDD6);
  border: 1.5px solid var(--moldura); border-radius: 10px;
  box-shadow: inset 0 0 0 4px var(--papel), inset 0 0 0 5px var(--moldura-clara), 0 3px 10px rgba(90, 60, 20, .08);
}
[data-aparencia="pergaminho"] .cartao-acento { background: linear-gradient(180deg, #FBF0D6, #F4E4C1); }
[data-aparencia="pergaminho"] .nav-inferior,
[data-aparencia="pergaminho"] .pub-lateral { background: #F6ECD4; border-color: var(--moldura); }

/* Cartão principal: azul-marinho com filete dourado (como na proposta). */
[data-aparencia="pergaminho"] .cartao-destaque {
  background: radial-gradient(ellipse 120% 80% at 50% 0%, var(--marinho-claro), var(--marinho) 70%);
  color: var(--creme); border: 2px solid var(--moldura); border-radius: 10px;
  box-shadow: inset 0 0 0 5px var(--marinho), inset 0 0 0 6px rgba(227, 202, 148, .7), 0 10px 24px rgba(40, 28, 10, .25);
  flex-direction: column; align-items: stretch;
}
[data-aparencia="pergaminho"] .cartao-destaque .destaque-texto,
[data-aparencia="pergaminho"] .cartao-destaque .destaque-acoes { flex: none; }
[data-aparencia="pergaminho"] .cartao-destaque a:not(.botao) { color: var(--ouro-texto); }
[data-aparencia="pergaminho"] .livro-hoje img { background: var(--marinho-claro); box-shadow: 0 0 0 2px var(--moldura); }
[data-aparencia="pergaminho"] .citacao-dia { position: relative; background: var(--marinho-citacao, #3A5075); border-left: 4px solid var(--ouro-escuro); border-radius: 0 8px 8px 0; }
[data-aparencia="pergaminho"] .citacao-dia:has(.pergaminho-biblia) { padding-right: 112px; min-height: 96px; }
.pergaminho-biblia { position: absolute; right: -6px; bottom: -14px; width: 118px; height: auto; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
[data-aparencia="pergaminho"] .cartao-destaque .botao-claro {
  background: linear-gradient(180deg, var(--ouro-claro) 0%, var(--ouro) 48%, var(--ouro-escuro) 100%);
  color: var(--marinho); border: 1px solid #A87C32; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 2px 6px rgba(0, 0, 0, .25);
}
[data-aparencia="pergaminho"] .cartao-destaque .destaque-acoes > span { color: #E9D9B4; }

/* Os três quadros dentro do cartão principal: sem moldura, números dourados. */
.indicadores-no-destaque { margin: 2px 0; }
.indicadores-no-destaque .cartao { background: none !important; border: 0 !important; box-shadow: none !important; padding: 6px 4px; text-align: center; }
.indicadores-no-destaque .numero-grande { font-family: var(--fonte-titulo); color: var(--ouro-texto); font-size: 32px; }
.indicadores-no-destaque .texto-secundario { color: #E9D9B4 !important; }
.indicadores-no-destaque .indicador-compartilhar { color: var(--ouro-texto); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }

/* Topo do Início: vitrais à direita e arabescos ao lado da saudação. */
.inicio-cabecalho { position: relative; }
[data-aparencia="pergaminho"] .inicio-cabecalho { min-height: 132px; padding-top: 18px; }
[data-aparencia="pergaminho"] .inicio-cabecalho > :not(.pergaminho-vitrais) { position: relative; z-index: 1; }
.pergaminho-vitrais { position: absolute; z-index: 0; top: -24px; right: -16px; width: 44%; max-width: 250px; height: auto; pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%), linear-gradient(to top, transparent 0%, #000 28%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to left, #000 55%, transparent 100%), linear-gradient(to top, transparent 0%, #000 28%);
  mask-composite: intersect; opacity: .92; }
[data-aparencia="pergaminho"] .saudacao-texto::after {
  content: ""; display: inline-block; width: 26px; height: 26px; margin-left: 8px; vertical-align: middle; opacity: .8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%23B8893A' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M2 13h7M17 13h7'/%3E%3Cpath d='M13 4c-2 3-2 6 0 9 2-3 2-6 0-9zM13 22c-2-3-2-6 0-9 2 3 2 6 0 9z'/%3E%3Ccircle cx='13' cy='13' r='1.6' fill='%23B8893A'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Os cartões ficam por cima da arte (no computador ela é alta e chegaria à coluna da direita). */
[data-aparencia="pergaminho"] .inicio-grade { position: relative; z-index: 1; }
@media (min-width: 1024px) {
  .pergaminho-vitrais { right: 0; max-width: 230px; top: -36px; }
  [data-aparencia="pergaminho"] .inicio-cabecalho { min-height: 150px; }
}

/* Amostra no Perfil › Aparência. */
.amostra-pergaminho { background: #EFE2C4; border-color: #C9A25E; }
.amostra-pergaminho::after { background: #1F2A44; box-shadow: 0 0 0 3px #E2BC6A; }

/* ── F22: acervos de estudo — abas no Mapa ─────────────────────────── */
.abas-acervo { display: flex; gap: 6px; flex-wrap: wrap; margin-top: -8px; }
.abas-acervo a { padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--cor-borda); color: var(--cor-texto); text-decoration: none;
  font-weight: 700; font-size: 14px; background: var(--cor-superficie); }
.abas-acervo a.ativa { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--cor-primaria-texto); }
.escolha-acervo { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--cor-borda); font-family: var(--fonte-titulo); font-size: 19px; }
.escolha-acervo:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

/* ── F23: comunidades — faixa com o nome no endereço da comunidade ───── */
.faixa-comunidade { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 8px 14px; border-radius: var(--raio, 12px);
  background: var(--cor-primaria-suave); color: var(--cor-texto); font-size: 14px; line-height: 1.3; border: 1px solid var(--cor-borda); }
.convite-comunidade { border-color: var(--cor-acento); }

/* ── F24: identidade da comunidade — logo na faixa, frase de boas-vindas e página de apresentação ───── */
.faixa-comunidade img { flex: none; width: 28px; height: 28px; border-radius: 6px; object-fit: contain; }
.faixa-comunidade .faixa-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.faixa-comunidade .faixa-frase { color: var(--cor-texto-secundario); }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.landing-previa { background: var(--cor-acento-suave); color: var(--cor-texto); border: 1px solid var(--cor-acento); border-radius: 12px; padding: 10px 14px; margin-bottom: 18px; font-size: 14px; }
.landing-comunidade .landing-topo .marca img { width: 44px; height: 44px; border-radius: 8px; object-fit: contain; }
.landing-de { margin: 0 0 8px; font-weight: 800; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--cor-acento-texto); }
.landing-comunidade a.landing-cta { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.landing-experimentar { margin: 12px 0 0; }
.landing-link { background: none; border: 0; padding: 6px 0; font: inherit; font-weight: 700; color: var(--cor-primaria); text-decoration: underline; cursor: pointer; }
.landing-palavra { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: center; background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-left: 5px solid var(--cor-acento); border-radius: calc(var(--raio) + 4px); padding: 24px 20px; }
.landing-palavra-foto { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; justify-self: center; }
.landing-palavra figure { margin: 0; }
.landing-palavra blockquote { margin: 0; font-family: var(--fonte-titulo); font-size: 19px; line-height: 1.5; color: var(--cor-texto); }
.landing-palavra blockquote p { margin: 0 0 12px; }
.landing-palavra figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.landing-palavra figcaption span { color: var(--cor-texto-secundario); font-size: 15px; }
.landing-avisos { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.landing-avisos dt { font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--cor-acento-texto); }
.landing-avisos dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.varias-linhas { white-space: pre-line; }
.landing-assinatura { text-align: center; color: var(--cor-texto-secundario); font-size: 14px; margin: -28px 0 0; }
@media (min-width: 900px) {
  .landing-palavra { grid-template-columns: auto 1fr; padding: 32px; gap: 28px; }
  .landing-palavra-foto { width: 150px; height: 150px; }
  .landing-passos-1 { grid-template-columns: 1fr; }
  .landing-passos-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ── F28: dicas e novidades (js/dicas.js) ───── */
.dica-lugar:empty { display: none; }
.dica { position: relative; display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; padding: 14px 44px 14px 14px;
  background: var(--cor-superficie); color: var(--cor-texto); border: 1px solid var(--cor-borda); border-left: 4px solid var(--cor-acento);
  border-radius: calc(var(--raio) + 2px); }
.dica-novidade { background: var(--cor-primaria-suave); border-left-color: var(--cor-primaria); }
.dica-importante { background: var(--cor-acento-suave); border-color: var(--cor-acento); border-left-width: 6px; }
.dica-icone { flex: none; display: flex; color: var(--cor-primaria); }
.dica-corpo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dica-titulo { font-family: var(--fonte-titulo); font-size: 17px; line-height: 1.3; }
.dica-texto { margin: 0; line-height: 1.45; }
.dica-botao { align-self: flex-start; margin-top: 4px; padding: 8px 16px; font-size: 15px; }
.dica-fechar { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent;
  color: var(--cor-texto-secundario); font-size: 24px; line-height: 1; cursor: pointer; }
.dica-fechar:hover { background: var(--cor-fundo); }
.dica-fundo { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .45); display: flex; align-items: flex-end; justify-content: center; }
.dica-janela { position: relative; width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 10px; padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
  background: var(--cor-superficie); color: var(--cor-texto); border-radius: calc(var(--raio) + 8px) calc(var(--raio) + 8px) 0 0;
  border-top: 4px solid var(--cor-acento); animation: dica-sobe .25s ease-out; outline: none; }
.dica-janela .dica-icone { color: var(--cor-acento-texto, var(--cor-primaria)); }
.dica-janela .dica-titulo { font-size: 20px; padding-right: 32px; }
.dica-janela .dica-botao { align-self: stretch; text-align: center; padding: 12px 16px; font-size: 16px; }
body.com-dica-janela { overflow: hidden; }
@keyframes dica-sobe { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dica-janela { animation: none; } }
@media (min-width: 600px) {
  .dica-fundo { align-items: center; padding: 16px; }
  .dica-janela { border-radius: calc(var(--raio) + 8px); padding-bottom: 22px; }
}

/* ── F29: leitor do modo estudo (js/leitor.js) — a caixa azul com o filete dourado ocupando a tela ───── */
.pub-leitor .rodape, .pub-leitor .faixa-comunidade, .pub-leitor .convite-app { display: none; }
.pub-leitor .pub-conteudo { padding: 0; max-width: none; }
.leitor { display: flex; flex-direction: column; gap: 10px; min-height: 100vh; padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
  background: var(--cor-primaria); color: var(--cor-primaria-texto); border: 2px solid var(--cor-acento);
  box-shadow: inset 0 0 0 5px var(--cor-primaria), inset 0 0 0 6px var(--cor-acento); border-radius: calc(var(--raio) + 6px); }
.pub .leitor a { color: var(--cor-primaria-texto); }
.leitor-topo { display: flex; align-items: center; gap: 10px; padding: 4px 6px 0; }
.leitor-titulo { flex: 1; margin: 0; font-family: var(--fonte-titulo); font-size: 21px; line-height: 1.2; text-align: center; min-width: 0; }
.leitor-fechar { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 28px; text-decoration: none; border-radius: 50%; }
.leitor-letra { display: flex; gap: 4px; }
.leitor-letra button, .leitor-paginas button { min-width: 44px; height: 40px; border-radius: 999px; border: 1.5px solid var(--cor-acento);
  background: transparent; color: var(--cor-primaria-texto); font-weight: 800; font-size: 15px; cursor: pointer; }
.leitor-paginas button:disabled { opacity: .35; cursor: default; }
.leitor-janela { flex: 1; overflow: auto; padding: 0 8px; }
.leitor-texto { font-family: var(--fonte-texto); font-size: 19px; line-height: 1.65; }
.leitor-paginado { height: 100vh; height: 100dvh; min-height: 0; }
.leitor-paginado .leitor-janela { overflow: hidden; padding: 0; margin: 0 6px; }   /* a coluna tem a largura exata da janela */
.leitor-paginado .leitor-texto { transition: transform .25s ease-out; }
@media (prefers-reduced-motion: reduce) { .leitor-paginado .leitor-texto { transition: none; } }
.leitor-texto p { margin: 0 0 .8em; }
.leitor-aviso { font-size: .78em; line-height: 1.45; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--raio); }
.leitor-licenca { display: block; margin-top: 4px; opacity: .8; }
.leitor-secao { font-family: var(--fonte-titulo); font-size: 1.05em; font-weight: 600; margin: 1em 0 .5em; break-after: avoid; }
.leitor-subtitulo { font-style: italic; opacity: .85; }
.leitor-poesia { margin: 0 0 .15em !important; padding-left: 1.2em; text-indent: -1.2em; }
.leitor-poesia-2 { padding-left: 2.4em; }
.leitor-verso { font-family: var(--fonte-texto); font-size: .62em; font-weight: 800; vertical-align: super; line-height: 0; margin-right: .2em; opacity: .8; }
.leitor-fim { text-align: center; font-style: italic; opacity: .8; margin-top: 1.5em !important; }
.leitor-rodape { display: flex; flex-direction: column; gap: 10px; padding: 0 6px; }
.leitor-paginas { display: flex; align-items: center; justify-content: center; gap: 16px; font-weight: 700; font-size: 15px; }
.leitor-botao { background: var(--cor-acento-suave); color: var(--cor-primaria); border: 2px solid var(--cor-acento); }
@media (min-width: 1024px) {
  .leitor { margin: 18px auto; max-width: 860px; min-height: calc(100vh - 36px); }
  .leitor-paginado { height: calc(100vh - 36px); }
  .leitor-janela { padding: 0 28px; }
  .leitor-paginado .leitor-janela { padding: 0; margin: 0 28px; }
}
.leitura-hoje { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px;
  border: 1px solid var(--cor-acento); border-radius: var(--raio); }
.leitura-hoje .botao { padding: 8px 18px; }
a.capitulo-ler { text-decoration: none; color: inherit; }
a.capitulo-ler:hover { outline: 2px solid var(--cor-acento); outline-offset: -2px; }

/* Perfil: mini-páginas — cada atalho mostra só o seu bloco (/conta?s=<seção>); o atual fica marcado */
.atalhos-perfil { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.atalho-perfil { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 10px 4px;
  border: 1px solid var(--cor-borda); border-radius: var(--raio); background: var(--cor-superficie);
  color: var(--cor-primaria); text-decoration: none; font-size: 12.5px; font-weight: 700; text-align: center; line-height: 1.2; }
.atalho-perfil span { color: var(--cor-texto); overflow-wrap: break-word; }
.atalho-perfil:hover, .atalho-perfil:focus-visible { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); }
.atalho-perfil.atual { border-color: var(--cor-primaria); background: var(--cor-primaria-suave); box-shadow: inset 0 0 0 1px var(--cor-primaria); }
.atalho-perfil.atual span { color: var(--cor-primaria); }

/* Modo de uso: chave Quiz | Estudo (F29) */
.chave-modo-titulo { font-weight: 700; }
.chave-modo-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chave-modo-linha { display: flex; align-items: center; gap: 12px; }
.chave-modo-lado { font-weight: 800; cursor: pointer; color: var(--cor-texto-secundario); user-select: none; }
.chave-modo-trilho { position: relative; width: 56px; height: 30px; flex-shrink: 0; border-radius: 15px; cursor: pointer;
  background: var(--cor-borda); transition: background .15s; }
.chave-modo-botao { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--cor-superficie); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .15s; }
.chave-modo-input:checked ~ .chave-modo-linha .chave-modo-trilho { background: var(--cor-primaria); }
.chave-modo-input:checked ~ .chave-modo-linha .chave-modo-botao { transform: translateX(26px); }
.chave-modo-input:not(:checked) ~ .chave-modo-linha .lado-quiz,
.chave-modo-input:checked ~ .chave-modo-linha .lado-estudo { color: var(--cor-primaria); }
.chave-modo-input:focus-visible ~ .chave-modo-linha .chave-modo-trilho { outline: 3px solid var(--cor-acento); outline-offset: 2px; }
.chave-modo-input:disabled ~ .chave-modo-linha .chave-modo-trilho,
.chave-modo-input:disabled ~ .chave-modo-linha .chave-modo-lado { cursor: not-allowed; opacity: .6; }
.chave-modo-explica { margin: 0; font-size: 14px; }
.chave-modo-input:checked ~ div .explica-quiz,
.chave-modo-input:not(:checked) ~ div .explica-estudo { display: none; }

/* F31.1/F31.2 — leituras do dia (_LeiturasDoDia: quadro dos sites e app). As cores litúrgicas são conteúdo, não tema:
   exceção consciente à regra "só variáveis do tema" — cada uma com texto branco ou escuro para dar contraste. */
.leituras-cabecalho { gap: 8px; }
.leituras-selos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.leituras-grau { font-size: 13px; font-weight: 600; color: var(--cor-texto-secundario); }
.cor-liturgica { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; }
.cor-liturgica-verde { background: #2E7D32; color: #fff; }
.cor-liturgica-roxo { background: #5E35B1; color: #fff; }
.cor-liturgica-branco { background: #fff; color: #333; border: 1px solid #C9C2B4; }
.cor-liturgica-vermelho { background: #C62828; color: #fff; }
.cor-liturgica-rosa { background: #F48FB1; color: #3A1020; }
.cor-liturgica-preto { background: #222; color: #fff; }
.leituras-titulo { font-family: var(--fonte-titulo); font-size: 21px; line-height: 1.25; }
.leituras-frase { margin: 0; font-family: var(--fonte-titulo); font-style: italic; font-size: 17px; color: var(--cor-texto-secundario); }
.leituras-indice { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.leituras-indice span { display: inline-block; min-width: 9.5em; color: var(--cor-texto-secundario); font-size: 14px; }
.leitura-do-dia { display: flex; flex-direction: column; gap: 10px; }
.leitura-do-dia-titulo { font-family: var(--fonte-titulo); font-size: 18px; line-height: 1.3; margin: 0; }
.leitura-do-dia-titulo small { font-family: var(--fonte-texto); font-size: 14px; font-weight: 600; color: var(--cor-texto-secundario); margin-left: 4px; }
.leitura-contexto { background: var(--cor-acento-suave); border-radius: 10px; padding: 8px 12px; }
.leitura-contexto summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--cor-acento-texto); }
.leitura-contexto p { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--cor-texto); }
.leitura-refrao { margin: 0; font-style: italic; }
.leitura-texto { display: flex; flex-direction: column; gap: 6px; }
.leitura-paragrafo, .leitura-poesia { margin: 0; font-size: 17px; line-height: 1.6; }
.leitura-poesia { padding-left: 12px; }
.leitura-poesia-2 { padding-left: 28px; }
.leitura-verso { font-size: 11px; font-weight: 700; color: var(--cor-acento-texto); margin-right: 2px; }
.leituras-fio p { margin: 0; line-height: 1.5; }
.leituras-credito { margin: 0; font-size: 12px; color: var(--cor-texto-secundario); }
.chave-modo-leitura { border: 0; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; }
.chave-modo-leitura legend { font-weight: 700; font-size: 14px; padding: 0; margin-bottom: 2px; }
.chave-modo-leitura label { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.leituras-atalho { display: inline-flex; gap: 6px; align-items: baseline; font-size: 14px; color: var(--cor-texto-secundario); text-decoration: none; }
.leituras-atalho strong { color: var(--cor-primaria); }
/* F31.3: leituras de outros dias */
.leituras-navegacao { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; font-size: 14px; }
.leituras-navegacao a { color: var(--cor-primaria); text-decoration: none; font-weight: 600; padding: 6px 0; }
.leituras-navegacao > :first-child { justify-self: start; }
.leituras-navegacao > :last-child { justify-self: end; }
.leituras-semana { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.leituras-semana-dia { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--cor-texto); min-width: 0; }
.leituras-semana-dia.hoje { border-color: var(--cor-acento); }
.leituras-semana-data { font-size: 13px; color: var(--cor-texto-secundario); }
.leituras-semana-data::first-letter { text-transform: uppercase; }
.leituras-semana-rotulo { margin-left: 6px; font-weight: 700; color: var(--cor-acento-texto); background: var(--cor-acento-suave); border-radius: 999px; padding: 1px 8px; }
.leituras-semana-titulo { font-family: var(--fonte-titulo); font-size: 17px; color: var(--cor-primaria); }
.leituras-semana-referencias { font-size: 14px; color: var(--cor-texto-secundario); overflow-wrap: anywhere; }
.leituras-semana-feita { font-size: 13px; color: var(--cor-acerto); font-weight: 600; }
.leituras-selos .quadro-selo { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cor-acento-texto); background: var(--cor-acento-suave); border-radius: 999px; padding: 3px 10px; }