/*
 * estilo.css — OuveBíblia365, página de apresentação.
 *
 * O conceito: a página inteira é uma noite, e a Bíblia é papel iluminado por
 * uma lâmpada. Tudo o que é texto bíblico ou conteúdo do aplicativo aparece
 * em "papel"; tudo o que é conversa com o visitante fica na noite. É o mesmo
 * par do aplicativo no tema escuro (grafite-noite e o dourado das ondas do
 * símbolo), levado ao limite.
 *
 * Um tema só, de propósito: o site é a noite. Por isso cada cor é pintada
 * explicitamente, inclusive o fundo do body.
 *
 * Tipografia: Literata (serifa feita para leitura longa, hospedada aqui
 * mesmo — nada é carregado do Google, por privacidade) para a Palavra e os
 * títulos; a fonte do sistema para a interface, como no aplicativo.
 */

@font-face {
  font-family: 'Literata';
  src: url('fontes/literata-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Literata';
  src: url('fontes/literata-latin-wght-italic.woff2') format('woff2');
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* A noite */
  --noite: #0c1219;
  --noite-2: #111923;
  --noite-3: #17212c;
  --noite-4: #1e2a37;
  --fio: #253141;
  --fio-forte: #354559;
  --luar: #ece6d6;
  --luar-2: #b4bdb3;
  --luar-3: #919c93;

  /* A lâmpada */
  --ouro: #d5b258;
  --ouro-vivo: #ecca6e;
  --verde: #5fb287;
  --verde-forte: #7cc39d;
  --sobre-verde: #08130e;
  --sobre-ouro: #1a1406;

  /* O papel */
  --papel: #f3ead8;
  --papel-2: #eadfc6;
  --papel-fio: #d6c6a2;
  --tinta: #1f2a1e;
  --tinta-2: #4b5649;
  --tinta-ouro: #77590f;
  --tinta-verde: #1f5c46;

  /* Grupos de livros (mapa dos 180 dias) */
  --g-pentateuco: #6dbb92;
  --g-historicos: #4fa3a5;
  --g-poeticos: #d8b45c;
  --g-profetas-maiores: #d38a63;
  --g-profetas-menores: #a98bc4;
  --g-evangelhos: #ece6d6;
  --g-historia-nt: #8fb8de;
  --g-cartas: #7d8a98;
  --g-apocaliptico: #e07b6e;

  --fonte-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-livro: "Literata", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --sombra-papel: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 26px 60px rgba(0, 0, 0, 0.5), 0 6px 16px rgba(0, 0, 0, 0.35);
  --margem: 16px;
  /* Nas laterais, a margem nunca fica menor que o recorte da tela (celular deitado). */
  --margem-esq: max(var(--margem), env(safe-area-inset-left, 0px));
  --margem-dir: max(var(--margem), env(safe-area-inset-right, 0px));
  color-scheme: dark;
  --largura: 1180px;
  --altura-topo: 61px;
}

@media (min-width: 720px) {
  :root { --margem: 28px; }
}

/* ------------------------------------------------------------------ */
/* Base                                                                 */
/* ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  /* O clarão ao tocar (celular) combina com a lâmpada, em vez do cinza-azulado padrão. */
  -webkit-tap-highlight-color: rgba(213, 178, 88, 0.22);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--altura-topo) + 52px);
  background: var(--noite);
}

body {
  margin: 0;
  background: var(--noite);
  color: var(--luar);
  font-family: var(--fonte-ui);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { overflow-wrap: break-word; }

:focus-visible {
  outline: 3px solid var(--ouro);
  outline-offset: 3px;
  border-radius: 6px;
}

.pular {
  position: absolute;
  left: var(--margem-esq);
  top: -80px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--ouro);
  color: var(--sobre-ouro);
  font-weight: 700;
  text-decoration: none;
}
.pular:focus { top: 12px; }

.sobretitulo,
.miudo {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sobretitulo { color: var(--ouro); }
.miudo { color: var(--luar-3); }
.pagina .miudo { color: var(--tinta-ouro); }

.lead {
  margin: 0;
  max-width: 40em;
  color: var(--luar-2);
  font-size: 1.0625rem;
  text-wrap: pretty;
}

/* ------------------------------------------------------------------ */
/* Botões                                                               */
/* ------------------------------------------------------------------ */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--verde);
  color: var(--sobre-verde);
  font: 700 1rem/1.2 var(--fonte-ui);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.botao:hover { background: var(--verde-forte); }
.botao:active { transform: translateY(1px); }

.botao-contorno {
  background: transparent;
  color: var(--luar);
  border-color: var(--fio-forte);
}
.botao-contorno:hover { background: var(--noite-3); border-color: var(--luar-3); }

.botao-pequeno {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.9375rem;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.acoes-centro { justify-content: center; }
/* No celular os dois botões da abertura têm a mesma largura: lado a lado se couberem, um embaixo do outro (cada um com a linha toda) se não. */
@media (max-width: 479px) {
  .abertura .acoes .botao { flex: 1 1 160px; }
}

/* ------------------------------------------------------------------ */
/* Topo                                                                 */
/* ------------------------------------------------------------------ */

/* A faixa da área segura acima do topo grudado (iPhone com recorte). */
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: env(safe-area-inset-top, 0px);
  background: var(--noite);
}

.topo {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 50;
  background: rgba(12, 18, 25, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--fio);
}

.topo-dentro {
  display: flex;
  /* Rede de segurança: se um dia a marca e os botões não couberem (letra grande
   * demais, tela muito estreita), os botões descem para a linha de baixo em vez
   * de ficarem por cima do nome. */
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 10px var(--margem-dir) 10px var(--margem-esq);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--luar);
  text-decoration: none;
}
.marca-simbolo { width: 34px; height: 34px; flex: none; }

.marca-nome {
  font-family: var(--fonte-livro);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--verde-forte);
  white-space: nowrap;
}
.marca-nome b { font-weight: inherit; color: var(--luar); }
.marca-nome i { font-style: normal; color: var(--ouro); }

.topo-nav { display: none; }

.topo-acoes {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.topo-entrar {
  color: var(--luar-2);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  padding: 8px 2px;
}
.topo-entrar:hover { color: var(--luar); }

.so-estreito { display: none; }
@media (max-width: 400px) {
  .so-largo { display: none; }
  .so-estreito { display: inline; }
  .marca-nome { font-size: 1.0625rem; }
  .topo-acoes { gap: 10px; }
}
/* Telas de 320 px: a marca, "Entrar" e "Planos" somavam 31 px a mais do que a
 * tela tem, e o nome ficava por baixo do "Entrar". Aqui tudo encolhe um pouco
 * (a conta está no teste "o cabeçalho cabe em 320 e 300 px"). */
@media (max-width: 350px) {
  .topo-dentro { gap: 4px 8px; }
  .topo .marca { gap: 8px; }
  .topo .marca-simbolo { width: 30px; height: 30px; }
  .topo .marca-nome { font-size: 0.9375rem; }
  .topo-acoes { gap: 6px; }
  .topo-entrar { padding: 8px 0; font-size: 0.875rem; }
  .topo-acoes .botao-pequeno { padding: 8px 12px; font-size: 0.875rem; }
}
/* Abaixo disso nem assim cabe: "Entrar" sai do topo (continua em "Já tenho conta", no fim da página). */
@media (max-width: 309px) {
  .topo-entrar[data-app] { display: none; }
}

@media (min-width: 1024px) {
  .topo-nav {
    display: flex;
    gap: 24px;
    margin-left: 28px;
  }
  .topo-nav a {
    color: var(--luar-2);
    font-size: 0.9375rem;
    text-decoration: none;
    padding: 6px 0;
  }
  .topo-nav a:hover { color: var(--luar); }
}

/* A etapa atual, no celular, enquanto o Dia 1 está na tela */
.trilho-celular {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px var(--margem-dir) 9px var(--margem-esq);
  border-top: 1px solid var(--fio);
}
.trilho-celular-passos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  flex: none;
  width: 96px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.trilho-celular-passos li {
  position: relative;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--fio-forte);
}
/* O preenchimento: verde nas etapas feitas; dourado na etapa atual, que enche
 * conforme ela passa pela tela (--progresso, calculado no site.js). Sem o
 * JavaScript, ou com movimento reduzido, a etapa atual fica cheia. */
.trilho-celular-passos li::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ouro);
  transform: scaleX(0);
  transform-origin: left center;
  transition: background-color 0.3s ease;
}
.trilho-celular-passos li.feito::after { background: var(--verde); transform: scaleX(1); }
/* Piso de 22%: no começo da etapa ainda se vê um pedaço dourado marcando onde você está. */
.trilho-celular-passos li.atual::after { transform: scaleX(max(var(--progresso, 1), 0.22)); }
.trilho-celular-rotulo {
  margin: 0;
  color: var(--luar-2);
  font-size: 0.8125rem;
  font-weight: 600;
}
@media (min-width: 1024px) {
  .trilho-celular { display: none !important; }
}

/* ------------------------------------------------------------------ */
/* Papel                                                                */
/* ------------------------------------------------------------------ */

.pagina {
  position: relative;
  color: var(--tinta);
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, var(--papel) 0%, var(--papel-2) 100%);
  border-radius: 4px;
  box-shadow: var(--sombra-papel);
}

.pagina-dia {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  color: var(--tinta-ouro);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Abertura                                                             */
/* ------------------------------------------------------------------ */

.abertura {
  position: relative;
  display: grid;
  gap: 40px;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 44px var(--margem-dir) 72px var(--margem-esq);
  isolation: isolate;
}

/* A lâmpada: um halo quente atrás da página do salmo. */
.abertura::before {
  content: '';
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 0;
  width: min(760px, 100%);
  height: 78%;
  background: radial-gradient(closest-side, rgba(236, 202, 110, 0.17), rgba(236, 202, 110, 0));
  pointer-events: none;
}

/* A linha de cima diz o que é ("Aplicativo para ler a Bíblia em 180 dias"): no celular ocupa duas linhas, e elas ficam do mesmo tamanho. */
.abertura .sobretitulo { line-height: 1.4; text-wrap: balance; }
.abertura h1 {
  margin: 12px 0 18px;
  font-family: var(--fonte-livro);
  font-size: clamp(2.55rem, 10.5vw, 4.75rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.abertura h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--ouro);
}

.chamada {
  max-width: 34em;
  margin: 0;
  color: var(--luar-2);
  font-size: 1.125rem;
}

.selos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  color: var(--luar-3);
  font-size: 0.875rem;
}
.selos li { display: inline-flex; align-items: center; gap: 8px; }
.selos li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--verde);
}

.pagina-salmo {
  justify-self: center;
  width: 100%;
  max-width: 540px;
  padding: 22px 20px 18px;
}
.pagina-cabeca {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--papel-fio);
}
.pagina-leituras {
  margin: 6px 0 0;
  font-family: var(--fonte-livro);
  font-size: 1.0625rem;
}
.pagina-titulo {
  margin: 0 0 8px;
  font-family: var(--fonte-livro);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

@media (min-width: 960px) {
  .abertura {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 64px;
    padding: 40px var(--margem-dir) 104px var(--margem-esq);
  }
  /* A página do salmo cabe inteira na primeira tela de um notebook comum. */
  .pagina-salmo { padding: 24px 30px 20px; }
  .pagina-salmo .pagina-cabeca { margin-bottom: 10px; padding-bottom: 10px; }
  .pagina-salmo .versiculos { font-size: 1rem; line-height: 1.62; }
  .pagina-salmo .versiculos li { padding-block: 3px; }
  .pagina-salmo .ouvir { margin-bottom: 10px; }
  .pagina-salmo .credito { margin-top: 12px; }
}

/* Os versículos — e o que acende quando é lido */
.versiculos {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--fonte-livro);
  font-size: 1.0625rem;
  line-height: 1.7;
}
.versiculos li {
  margin: 0 -10px;
  padding: 4px 10px;
  border-radius: 3px;
  transition: background-color 0.45s ease, box-shadow 0.45s ease, color 0.45s ease;
}
.versiculos sup {
  margin-right: 2px;
  color: var(--tinta-ouro);
  font-family: var(--fonte-ui);
  font-size: 0.68em;
  font-weight: 700;
}
.versiculos li.lendo,
.historia-texto li.lendo {
  background: linear-gradient(90deg, rgba(213, 178, 88, 0.38), rgba(213, 178, 88, 0.14));
  box-shadow: inset 3px 0 0 #a8801f;
}
.versiculos.em-leitura li:not(.lendo),
.historia-texto.em-leitura li:not(.lendo) { color: var(--tinta-2); }

/* Sem JavaScript, nada de botão que não faz nada. */
.sem-js .ouvir,
.sem-js .acao-ouvir,
.sem-js .leitor-barra,
.sem-js .idades,
.sem-js .interruptor,
.sem-js .modos-opcoes,
.sem-js .modo-desc { display: none; }

.ouvir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 16px;
}
/* No cartão do Salmo 1 o botão fica logo abaixo do título, antes do texto: a primeira coisa
 * que o visitante pode fazer é ouvir, sem rolar a página até o fim do salmo. */
.pagina-salmo .ouvir { margin: 0 0 14px; }
/* Na coluna única o aviso de estado fica sempre numa linha própria, embaixo do botão: assim o
 * texto do Salmo não sobe nem desce quando o botão troca de "Ouvir o Salmo 1" para "Parar". */
@media (max-width: 959px) {
  .pagina-salmo .ouvir-estado { flex-basis: 100%; }
}
/* Lado a lado (computador): base menor, para o aviso caber ao lado do botão tanto com "Ouvir o Salmo 1" quanto com "Parar". */
@media (min-width: 960px) {
  .pagina-salmo .ouvir-estado { flex-basis: 8em; }
}
.botao-ouvir {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 10px 20px 10px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--tinta-verde);
  color: #f6f1e7;
  font: 700 1rem/1.2 var(--fonte-ui);
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.12s ease;
}
.botao-ouvir:hover { background: #16452f; }
.botao-ouvir:focus-visible { outline-color: var(--tinta-ouro); }
.botao-ouvir-claro { background: var(--verde); color: var(--sobre-verde); }
.botao-ouvir-claro:hover { background: var(--verde-forte); }
.botao-ouvir-claro:focus-visible { outline-color: var(--ouro); }

.icone-ondas {
  width: 22px;
  height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}
.icone-ondas path { transform-origin: center; transform-box: fill-box; }
.botao-ouvir[aria-pressed="true"] .icone-ondas path { animation: onda 0.9s ease-in-out infinite alternate; }
.botao-ouvir[aria-pressed="true"] .icone-ondas path:nth-child(2) { animation-delay: 0.15s; }
.botao-ouvir[aria-pressed="true"] .icone-ondas path:nth-child(3) { animation-delay: 0.3s; }
.botao-ouvir[aria-pressed="true"] .icone-ondas path:nth-child(4) { animation-delay: 0.45s; }
@keyframes onda {
  from { transform: scaleY(0.45); }
  to { transform: scaleY(1); }
}

.ouvir-estado {
  flex: 1 1 12em;
  /* A altura de uma linha fica sempre reservada (min-height = line-height): quando o aviso aparece, nada embaixo se mexe. */
  min-height: 1.35em;
  margin: 0;
  color: var(--tinta-2);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.credito {
  margin: 16px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--papel-fio);
  color: var(--tinta-2);
  font-size: 0.75rem;
}

/* ------------------------------------------------------------------ */
/* O Dia 1, em cinco etapas                                             */
/* ------------------------------------------------------------------ */

.dia {
  padding: 72px var(--margem-dir) 48px var(--margem-esq);
  background: linear-gradient(180deg, var(--noite) 0, var(--noite-2) 160px, var(--noite-2) calc(100% - 160px), var(--noite) 100%);
}
.dia-abertura {
  max-width: var(--largura);
  margin: 0 auto 36px;
}

.dia h2,
.secao h2,
.fim h2 {
  margin: 10px 0 16px;
  font-family: var(--fonte-livro);
  font-size: clamp(2rem, 6vw, 3.1rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.dia-corpo {
  display: grid;
  gap: 8px;
  max-width: var(--largura);
  margin: 0 auto;
}

.trilho { display: none; }

@media (min-width: 1024px) {
  .dia-corpo {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 56px;
  }
  .trilho { display: block; }
  .trilho ol {
    position: sticky;
    top: calc(var(--altura-topo) + 36px);
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid var(--fio);
  }
  .trilho a {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-left: -1px;
    padding: 11px 0 11px 18px;
    border-left: 2px solid transparent;
    color: var(--luar-3);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease, border-color 0.3s ease;
  }
  .trilho a:hover { color: var(--luar-2); }
  .trilho-n {
    min-width: 1ch;
    font-family: var(--fonte-livro);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
  }
  .trilho a.feito .trilho-n { color: var(--verde); }
  .trilho a.atual { color: var(--luar); border-left-color: var(--ouro); }
  .trilho a.atual .trilho-n { color: var(--ouro); }
}

.etapa {
  padding: 36px 0 64px;
  border-top: 1px solid var(--fio);
}
.etapa:first-child { border-top: 0; padding-top: 8px; }

.etapa-rotulo {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0;
  color: var(--ouro);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.etapa-n {
  font-family: var(--fonte-livro);
  font-size: 3.25rem;
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: 0;
}
.etapa h3 {
  margin: 14px 0 10px;
  font-family: var(--fonte-livro);
  font-size: clamp(1.5rem, 4.4vw, 2.125rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.etapa-texto {
  max-width: 40em;
  margin: 0 0 26px;
  color: var(--luar-2);
  text-wrap: pretty;
}

/* Etapa 1: o contexto em papel */
.pagina-contexto { padding: 24px 20px; }
.contexto-livro {
  margin: 0 0 10px;
  color: var(--tinta-verde);
  font-family: var(--fonte-livro);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1.1;
}
.contexto-ctx {
  max-width: 36em;
  margin: 0 0 24px;
  font-family: var(--fonte-livro);
  font-size: 1.125rem;
  line-height: 1.6;
}
.fichas {
  display: grid;
  gap: 14px 32px;
  margin: 0;
}
.fichas div {
  padding-top: 10px;
  border-top: 1px solid var(--papel-fio);
}
.fichas dt {
  color: var(--tinta-ouro);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.fichas dd {
  margin: 4px 0 0;
  font-size: 0.9375rem;
}
.ficha-larga dd {
  font-family: var(--fonte-livro);
  font-size: 1.125rem;
}
.contexto-pers { margin-top: 22px; }
.fichinhas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.fichinhas li {
  padding: 4px 11px;
  border: 1px solid var(--papel-fio);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.45);
  font-size: 0.875rem;
}
.contexto-conexao {
  margin: 22px 0 0;
  color: var(--tinta-2);
  font-family: var(--fonte-livro);
  font-style: italic;
}
@media (min-width: 720px) {
  .pagina-contexto { padding: 34px 38px; }
  .fichas { grid-template-columns: 1fr 1fr; }
  .ficha-larga { grid-column: 1 / -1; }
}

.outros-livros {
  margin-top: 24px;
  color: var(--luar-2);
}
.outros-livros p { margin: 0; }
.outros-livros ul {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.outros-livros strong {
  color: var(--luar);
  font-family: var(--fonte-livro);
  font-weight: 600;
}

/* Etapa 2: o que observar */
.observar {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.observar li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 14px;
  padding: 15px 18px;
  border: 1px solid var(--fio);
  border-radius: 10px;
  background: var(--noite-3);
  font-family: var(--fonte-livro);
  font-size: 1.0625rem;
}
.observar-livro {
  color: var(--ouro);
  font-family: var(--fonte-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.observar-texto { min-width: 0; }
/* O que procurar no texto, grifado como quem lê de caneta na mão. */
.grifo {
  padding: 0 0.1em;
  margin: 0 -0.1em;
  background-image: linear-gradient(transparent 56%, rgba(213, 178, 88, 0.36) 56%, rgba(213, 178, 88, 0.36) 94%, transparent 94%);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: var(--luar);
}
@media (max-width: 480px) {
  .observar li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* Etapa 3: leitura */
.leitura-grade {
  display: grid;
  gap: 20px;
}
.leitura-coluna {
  display: grid;
  gap: 16px;
  align-content: start;
}
@media (min-width: 900px) {
  .leitura-grade {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: start;
  }
}

/* A página do leitor, com letra e papel como no aplicativo */
.leitor {
  --leitor-tinta: var(--tinta);
  --leitor-tinta-2: var(--tinta-2);
  --leitor-fio: var(--papel-fio);
  --leitor-ouro: var(--tinta-ouro);
  --leitor-fundo: var(--papel);
  padding: 14px 20px 22px;
  color: var(--leitor-tinta);
  transition: background-color 0.35s ease, color 0.35s ease;
}
.leitor[data-papel="claro"] {
  --leitor-tinta: #1d2329;
  --leitor-tinta-2: #4f5a63;
  --leitor-fio: #e2ded3;
  --leitor-ouro: #7d6216;
  --leitor-fundo: #fdfbf6;
  background: #fdfbf6;
}
.leitor[data-papel="escuro"] {
  --leitor-tinta: #e9e6da;
  --leitor-tinta-2: #aab4ab;
  --leitor-fio: #2f3b4a;
  --leitor-ouro: #d5b258;
  --leitor-fundo: #19222d;
  background: #19222d;
  box-shadow: inset 0 0 0 1px #263344, 0 26px 60px rgba(0, 0, 0, 0.5);
}
.leitor-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--leitor-fio);
}
.leitor-letra,
.leitor-papel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.leitor-barra button {
  min-width: 40px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--leitor-fio);
  border-radius: 8px;
  background: transparent;
  color: var(--leitor-tinta);
  font: 600 0.875rem/1 var(--fonte-ui);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.leitor-letra button { font-family: var(--fonte-livro); font-size: 1rem; }
.leitor-barra button:hover { border-color: var(--leitor-tinta-2); }
.leitor-barra button:focus-visible { outline-color: var(--leitor-ouro); }
.leitor-barra button[aria-disabled="true"] { opacity: 0.38; cursor: default; }
.leitor-barra button[aria-checked="true"] {
  border-color: var(--leitor-tinta);
  background: var(--leitor-tinta);
  color: var(--leitor-fundo);
}
.leitor-letra output {
  min-width: 4.2ch;
  color: var(--leitor-tinta-2);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.leitor-livro {
  margin: 0 0 6px;
  font-family: var(--fonte-livro);
  font-size: 1.375rem;
  font-weight: 600;
}
.leitor-texto {
  margin: 0;
  font-family: var(--fonte-livro);
  font-size: calc(1.0625rem * var(--escala, 1));
  line-height: 1.7;
  transition: font-size 0.2s ease;
}
.leitor-texto sup {
  color: var(--leitor-ouro);
  font-family: var(--fonte-ui);
  font-size: 0.68em;
  font-weight: 700;
}

.pagina-capitulos { padding: 20px; }
.capitulos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0 16px;
  padding: 0;
  list-style: none;
}
.capitulos label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--papel-fio);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.4);
  font-family: var(--fonte-livro);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}
.capitulos label:hover { background: rgba(255, 255, 255, 0.7); }
/* Em 320 px duas colunas deixam só ~95 px para "Gênesis 1" e o nome quebrava em duas linhas: uma coluna. */
@media (max-width: 340px) {
  .capitulos { grid-template-columns: 1fr; }
}
.capitulos input {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid var(--tinta-verde);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.capitulos input:checked { background: var(--tinta-verde); }
.capitulos input:checked::after {
  content: '';
  width: 6px;
  height: 11px;
  border: solid #f6f1e7;
  border-width: 0 2.5px 2.5px 0;
  transform: translate(0, -1px) rotate(45deg);
}
.capitulos input:focus-visible { outline: 3px solid var(--tinta-ouro); outline-offset: 2px; }
.capitulos label:has(input:checked) { border-color: rgba(31, 92, 70, 0.45); background: rgba(31, 92, 70, 0.08); }

.barra {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(31, 42, 30, 0.12);
}
.barra span {
  position: relative;
  display: block;
  width: 0;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--tinta-verde), #3f8a64);
  transition: width 0.45s ease;
}

.modos {
  padding: 22px 20px;
  border: 1px solid var(--fio);
  border-radius: 14px;
  background: var(--noite-3);
}
.modos-titulo {
  margin: 0 0 14px;
  font-family: var(--fonte-livro);
  font-size: 1.375rem;
  font-weight: 600;
}
.modos-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.modos-opcoes button {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--fio-forte);
  border-radius: 999px;
  background: transparent;
  color: var(--luar-2);
  font: 600 0.9375rem/1.2 var(--fonte-ui);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.modos-opcoes button:hover { border-color: var(--luar-3); color: var(--luar); }
.modos-opcoes button[aria-checked="true"] {
  border-color: var(--ouro);
  background: var(--ouro);
  color: var(--sobre-ouro);
}
.modo-desc {
  min-height: 3.2em;
  margin: 14px 0;
  color: var(--luar-2);
  font-size: 0.9375rem;
}
.versiculos-demo {
  padding: 14px 18px;
  border-radius: 4px;
  background: var(--papel);
  color: var(--tinta);
  font-size: 1rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.modos .ouvir-estado { color: var(--luar-3); }
.modos-nota {
  margin-top: 16px;
  color: var(--luar-3);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* Etapa 4: entenda */
.entenda-grade {
  display: grid;
  gap: 16px;
}
@media (min-width: 900px) {
  .entenda-grade { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .cartao-perguntas { grid-column: 1 / -1; }
}
.cartao-entenda { padding: 22px 20px; }
.entenda-forte {
  margin: 8px 0 0;
  font-family: var(--fonte-livro);
  font-size: 1.125rem;
  font-weight: 600;
}
.linha-tempo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 20px 0 16px;
  padding: 0;
  list-style: none;
}
.linha-tempo li {
  position: relative;
  padding: 24px 6px 0 0;
  font-size: 0.875rem;
}
.linha-tempo li::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 0;
  width: 12px;
  height: 12px;
  border: 2px solid var(--papel-fio);
  border-radius: 50%;
  background: var(--papel);
  z-index: 1;
}
.linha-tempo li::after {
  content: '';
  position: absolute;
  top: 9px;
  left: 12px;
  right: 0;
  height: 2px;
  background: var(--papel-fio);
  transform-origin: left center;
}
.linha-tempo li:last-child::after { display: none; }
.linha-tempo li.agora::before {
  border-color: var(--tinta-ouro);
  background: var(--tinta-ouro);
  box-shadow: 0 0 0 5px rgba(119, 89, 15, 0.16);
}
.linha-tempo span {
  display: block;
  font-family: var(--fonte-livro);
  font-weight: 600;
  line-height: 1.25;
}
.linha-tempo small { color: var(--tinta-2); }
.entenda-resumo { margin: 0; }

.glossario { margin-top: 6px; }
.glossario details { border-top: 1px solid var(--papel-fio); }
.glossario details:last-child { border-bottom: 1px solid var(--papel-fio); }
.glossario summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 2px;
  font-family: var(--fonte-livro);
  font-size: 1.0625rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.glossario summary::-webkit-details-marker { display: none; }
.glossario summary::after {
  content: '+';
  color: var(--tinta-ouro);
  font-family: var(--fonte-ui);
  font-size: 1.25rem;
  font-weight: 400;
}
.glossario details[open] summary::after { content: '−'; }
.glossario summary:focus-visible { outline-color: var(--tinta-ouro); }
.glossario p {
  margin: 0 0 14px;
  color: var(--tinta-2);
  font-size: 0.9375rem;
}

.perguntas {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding-left: 1.4em;
  font-family: var(--fonte-livro);
  font-size: 1.0625rem;
}
.perguntas li::marker {
  color: var(--tinta-ouro);
  font-family: var(--fonte-ui);
  font-weight: 700;
}
@media (min-width: 900px) {
  .perguntas { grid-template-columns: 1fr 1fr; column-gap: 36px; }
}

/* Etapa 5: reflita */
.reflexao {
  margin: 10px 0 24px;
  padding: 2px 0 2px 22px;
  border-left: 3px solid var(--ouro);
}
.reflexao p {
  margin: 0;
  color: var(--luar);
  font-family: var(--fonte-livro);
  font-size: clamp(1.45rem, 4.2vw, 2.1rem);
  font-style: italic;
  line-height: 1.3;
  text-wrap: balance;
}

.revisoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.revisoes li {
  position: relative;
  padding: 30px 10px 0 0;
}
.revisoes li::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 0;
  z-index: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ouro);
  box-shadow: 0 0 0 6px rgba(213, 178, 88, 0.14);
}
.revisoes li::after {
  content: '';
  position: absolute;
  top: 11px;
  left: 16px;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ouro), rgba(213, 178, 88, 0.15));
  transform-origin: left center;
}
.revisoes li:last-child::after { display: none; }
.revisao-quando {
  display: block;
  font-family: var(--fonte-livro);
  font-size: 1.25rem;
  font-weight: 600;
}
.revisao-o-que {
  display: inline-block;
  color: var(--luar-3);
  font-size: 0.8125rem;
}

.passagens {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.passagens li {
  display: grid;
  gap: 4px;
  padding: 15px 18px;
  border: 1px solid var(--fio);
  border-radius: 10px;
  background: var(--noite-3);
}
.passagens strong {
  color: var(--ouro);
  font-family: var(--fonte-livro);
  font-size: 1.0625rem;
  font-weight: 600;
}
.passagens span { color: var(--luar-2); }
@media (min-width: 900px) {
  .passagens { grid-template-columns: 1fr 1fr; }
}

.dia-fim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 24px;
  padding: 28px 24px;
  border: 1px solid var(--fio);
  border-radius: 16px;
  background:
    radial-gradient(90% 140% at 0% 0%, rgba(213, 178, 88, 0.16), rgba(213, 178, 88, 0) 60%),
    var(--noite-3);
}
.dia-fim-texto {
  max-width: 28em;
  margin: 0;
  font-family: var(--fonte-livro);
  font-size: 1.3125rem;
  line-height: 1.4;
  text-wrap: pretty;
}

/* ------------------------------------------------------------------ */
/* Seções                                                               */
/* ------------------------------------------------------------------ */

.secao { padding: 84px var(--margem-dir) 84px var(--margem-esq); }
.secao-dentro {
  max-width: var(--largura);
  margin: 0 auto;
}
.secao-estreita { max-width: 780px; }
@media (min-width: 960px) {
  .secao { padding: 120px var(--margem-dir) 120px var(--margem-esq); }
}

/* Depoimentos: bilhetes de papel, logo depois da abertura */
.depoimentos {
  padding-top: 8px;
  padding-bottom: 64px;
  background: var(--noite);
}
@media (min-width: 960px) {
  .depoimentos { padding-top: 0; padding-bottom: 72px; }
}
.depoimentos-aviso {
  max-width: 44em;
  margin: 14px 0 0;
  padding: 10px 14px;
  border: 1px dashed rgba(213, 178, 88, 0.6);
  border-radius: 10px;
  color: var(--ouro);
  font-size: 0.9375rem;
}
/* No celular, um trilho que rola de lado e encaixa cartão a cartão; no computador, três lado a lado. */
.depoimentos-trilho {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(82vw, 340px);
  gap: 14px;
  margin: 28px calc(-1 * var(--margem-dir)) 0 calc(-1 * var(--margem-esq));
  padding: 8px var(--margem-dir) 18px var(--margem-esq);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margem-esq);
  scrollbar-width: thin;
  scrollbar-color: var(--fio-forte) transparent;
}
@media (min-width: 900px) {
  .depoimentos-trilho {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 36px 0 0;
    padding: 8px 0 0;
    overflow: visible;
  }
}
.depoimento {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 22px 20px;
  scroll-snap-align: start;
}
.depoimento-texto {
  margin: 0;
  flex: 1;
}
.depoimento-texto::before {
  content: '\201C';
  display: block;
  height: 0.55em;
  color: var(--tinta-ouro);
  font-family: var(--fonte-livro);
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
}
.depoimento-texto p {
  margin: 0;
  font-family: var(--fonte-livro);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-wrap: pretty;
}
.depoimento-quem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--papel-fio);
}
.depoimento-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--tinta-verde);
  color: #f6f1e7;
  font: 700 0.9375rem/1 var(--fonte-ui);
  letter-spacing: 0.02em;
}
.depoimento-avatar img { width: 100%; height: 100%; object-fit: cover; }
.depoimento-nome {
  display: block;
  font-weight: 700;
}
.depoimento-sobre {
  display: block;
  color: var(--tinta-2);
  font-size: 0.875rem;
}
/* Um exemplo nunca passa por depoimento: a etiqueta vem sempre junto. */
.depoimento-exemplo {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 9px;
  border: 1px solid var(--tinta-ouro);
  border-radius: 999px;
  color: var(--tinta-ouro);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Os 180 dias */
.secao-180 {
  background: linear-gradient(180deg, var(--noite) 0%, #0e1620 100%);
}
.mapa-bloco {
  display: grid;
  gap: 20px;
  margin-top: 36px;
}
.legenda {
  display: grid;
  gap: 8px 32px;
}
.legenda-itens {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.legenda-dica {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.legenda button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--fio-forte);
  border-radius: 999px;
  background: transparent;
  color: var(--luar-2);
  font: 600 0.8125rem/1.2 var(--fonte-ui);
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.legenda button:hover { color: var(--luar); border-color: var(--luar-3); }
.legenda button[aria-pressed="true"] {
  border-color: var(--luar-2);
  background: var(--noite-4);
  color: var(--luar);
}
.legenda .cor {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--c);
}
.legenda .cor-linha { height: 4px; border-radius: 2px; }
@media (min-width: 900px) {
  .legenda { grid-template-columns: auto auto; grid-auto-flow: column; grid-template-rows: auto auto; justify-content: start; }
}

.mapa {
  --mapa-gap: 4px;
  display: grid;
  grid-template-columns: repeat(15, minmax(0, 1fr));
  gap: var(--mapa-gap);
}
@media (min-width: 760px) {
  .mapa { --mapa-gap: 5px; grid-template-columns: repeat(30, minmax(0, 1fr)); }
}
.dia-celula {
  --c-at: var(--fio-forte);
  --c-nt: var(--fio-forte);
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--c-at);
  box-shadow: inset 0 -4px 0 var(--c-nt), inset 0 -5px 0 rgba(12, 18, 25, 0.55);
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.3s ease;
}
.dia-celula:hover { transform: scale(1.15); z-index: 2; }
.dia-celula:focus-visible {
  z-index: 3;
  outline: 2px solid var(--luar);
  outline-offset: 2px;
  border-radius: 4px;
}
.dia-celula[aria-pressed="true"] {
  z-index: 2;
  outline: 2px solid var(--ouro);
  outline-offset: 2px;
}
.mapa.filtrando .dia-celula:not(.destaque) { opacity: 0.16; }

.at-pentateuco { --c-at: var(--g-pentateuco); }
.at-historicos { --c-at: var(--g-historicos); }
.at-poeticos { --c-at: var(--g-poeticos); }
.at-profetas-maiores { --c-at: var(--g-profetas-maiores); }
.at-profetas-menores { --c-at: var(--g-profetas-menores); }
.nt-evangelhos { --c-nt: var(--g-evangelhos); }
.nt-historia-nt { --c-nt: var(--g-historia-nt); }
.nt-cartas { --c-nt: var(--g-cartas); }
.nt-apocaliptico { --c-nt: var(--g-apocaliptico); }

/* O ano se desenrolando: os dias acendem em sequência na primeira vez.
 * Antes disso o mapa já está lá, apagado — nada fica invisível esperando a rolagem. */
@media (prefers-reduced-motion: no-preference) {
  .mapa.a-revelar .dia-celula { opacity: 0.32; transform: scale(0.82); }
  /* "backwards", e não "both": no fim o dia volta a obedecer ao resto do CSS.
   * Com "both" a animação seguraria opacidade 1 e escala 1 para sempre, e o
   * filtro da legenda e o toque no dia deixariam de aparecer. */
  .mapa.revelado .dia-celula {
    animation: surgir 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(var(--i, 0) * 5ms);
  }
}
@keyframes surgir {
  from { opacity: 0.32; transform: scale(0.82); }
  to { opacity: 1; transform: scale(1); }
}

.mapa-detalhe {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 22px;
  margin-top: 18px;
  padding: 16px 20px;
}
.mapa-detalhe-dia {
  margin: 0;
  font-family: var(--fonte-livro);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.mapa-detalhe-leituras {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--fonte-livro);
}
.mapa-detalhe-leituras li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mapa-detalhe-leituras li::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ponto, var(--tinta-2));
  box-shadow: 0 0 0 1.5px rgba(31, 42, 30, 0.42);
}
.mapa-detalhe-min {
  margin: 0;
  color: var(--tinta-2);
  font-size: 0.9375rem;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .mapa-detalhe { grid-template-columns: auto auto; }
  .mapa-detalhe-leituras { grid-column: 1 / -1; grid-row: 2; flex-direction: column; }
  .mapa-detalhe-min { justify-self: end; }
}
.mapa-sem-js { color: var(--luar-2); grid-column: 1 / -1; }

/* Dia anterior / Próximo dia: alvos grandes para o dedo, ao lado da ficha do dia. */
.mapa-passos {
  display: flex;
  gap: 12px;
  max-width: 28rem;
  margin-top: 12px;
}
/* Folga pequena nos lados e liberdade para encolher: em 320 px os dois botões, com 12 px entre eles, têm de caber em 288 px. */
.mapa-passos .botao { flex: 1 1 0; min-width: 0; min-height: 48px; padding: 10px 12px; }
.mapa-passos .botao[aria-disabled="true"] { opacity: 0.38; cursor: default; }
.mapa-passos .botao[aria-disabled="true"]:hover { background: transparent; border-color: var(--fio-forte); }
.mapa-passos .botao[aria-disabled="true"]:active { transform: none; }
.sem-js .mapa-passos { display: none; }

.baixar-plano {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 28px 0 0;
  color: var(--luar-3);
  font-size: 0.9375rem;
}
.duas-notas {
  display: grid;
  gap: 16px 40px;
  margin-top: 40px;
}
.duas-notas p { margin: 0; color: var(--luar-2); }
.duas-notas strong { color: var(--luar); font-family: var(--fonte-livro); font-weight: 600; font-size: 1.125rem; }
@media (min-width: 760px) {
  .duas-notas { grid-template-columns: 1fr 1fr; }
}

/* Família: a seção que anoitece.
 * O interruptor "Hora de dormir" faz a seção virar noite de verdade: o céu
 * escurece, as estrelas acendem, a lua aparece e a página da história troca
 * pela leitura da noite, num papel escuro — como o modo dormir do aplicativo. */
.familia {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #0e1620 0%, #0c1524 50%, #0a1120 100%);
}
.familia::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(38% 30% at 94% 4%, rgba(234, 220, 178, 0.07), rgba(234, 220, 178, 0)),
    linear-gradient(180deg, #060a12 0%, #070c16 60%, #0a1120 100%);
  opacity: 0;
  transition: opacity 0.9s ease;
}
.familia.dormindo::before { opacity: 1; }

/* Estrelas: camadas com tamanhos de ladrilho diferentes, para não formar padrão. */
.ceu,
.ceu::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.ceu {
  opacity: 0.5;
  background-image:
    radial-gradient(1.6px 1.6px at 22px 34px, rgba(236, 230, 214, 0.95), transparent 70%),
    radial-gradient(1.1px 1.1px at 140px 96px, rgba(236, 230, 214, 0.75), transparent 70%),
    radial-gradient(1.3px 1.3px at 260px 18px, rgba(236, 230, 214, 0.85), transparent 70%),
    radial-gradient(1px 1px at 90px 210px, rgba(236, 230, 214, 0.6), transparent 70%),
    radial-gradient(1.9px 1.9px at 330px 150px, rgba(246, 230, 186, 0.95), transparent 70%),
    radial-gradient(1px 1px at 400px 260px, rgba(236, 230, 214, 0.65), transparent 70%),
    radial-gradient(1.2px 1.2px at 190px 300px, rgba(236, 230, 214, 0.8), transparent 70%);
  background-size: 360px 280px, 430px 330px, 510px 390px, 290px 350px, 610px 470px, 470px 300px, 380px 420px;
  transition: opacity 0.9s ease;
}
.ceu::after {
  content: '';
  opacity: 0;
  background-image:
    radial-gradient(1.4px 1.4px at 60px 80px, rgba(246, 230, 186, 0.95), transparent 70%),
    radial-gradient(1.1px 1.1px at 250px 200px, rgba(236, 230, 214, 0.85), transparent 70%),
    radial-gradient(1.7px 1.7px at 380px 40px, rgba(236, 230, 214, 0.9), transparent 70%);
  background-size: 520px 340px, 450px 410px, 690px 520px;
  transition: opacity 0.9s ease;
}
.familia.dormindo .ceu { opacity: 1; }
.familia.dormindo .ceu::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .familia.dormindo .ceu::after { animation: piscar 5.5s ease-in-out 0.9s infinite alternate; }
}
@keyframes piscar {
  from { opacity: 1; }
  to { opacity: 0.25; }
}

/* A lua: um crescente feito com a sombra de um círculo. */
.lua {
  position: absolute;
  z-index: -1;
  top: 26px;
  right: max(5vw, 18px);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 10px -7px 0 0 #eadcb2;
  opacity: 0.18;
  transform: translateY(16px);
  transition: opacity 0.9s ease, transform 0.9s ease, filter 0.9s ease;
  pointer-events: none;
}
.familia.dormindo .lua {
  opacity: 1;
  transform: none;
  filter: drop-shadow(0 0 16px rgba(234, 220, 178, 0.4));
}
@media (min-width: 960px) {
  .lua { top: 56px; width: 60px; height: 60px; box-shadow: 15px -10px 0 0 #eadcb2; }
}

.familia-dentro {
  display: grid;
  gap: 36px;
}
@media (min-width: 960px) {
  .familia-dentro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 64px;
  }
}

.trilhas { margin-top: 30px; }
.trilhas-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.trilhas-lista li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  background: rgba(30, 42, 55, 0.7);
  color: var(--luar-2);
  font-size: 0.875rem;
  line-height: 1.3;
}
/* O selo de cada trilha, com a cor que ela tem no aplicativo. */
.trilhas-lista li::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 60%), var(--c);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.22);
}
.familia-gratis {
  margin: 26px 0 0;
  color: var(--ouro);
  font-weight: 600;
}

.noite-controle {
  display: grid;
  gap: 4px;
  margin-bottom: 18px;
}
.noite-explica {
  max-width: 34em;
  margin: 0;
  color: var(--luar-3);
  font-size: 0.9375rem;
}
.interruptor {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 12px;
  min-height: 44px;
  padding: 4px 6px 4px 0;
  border: 0;
  background: none;
  color: var(--luar);
  font: 700 1.0625rem/1.2 var(--fonte-ui);
  cursor: pointer;
  transition: transform 0.12s ease;
}
.interruptor-trilho {
  position: relative;
  flex: none;
  width: 50px;
  height: 30px;
  border-radius: 999px;
  background: var(--fio-forte);
  transition: background-color 0.3s ease;
}
.interruptor-trilho span {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--luar);
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.interruptor[aria-pressed="true"] .interruptor-trilho { background: var(--ouro); }
.interruptor[aria-pressed="true"] .interruptor-trilho span { transform: translateX(20px); background: var(--sobre-ouro); }

/* A página da história */
.pagina-historia {
  padding: 16px 20px 22px;
  transition: background 0.9s ease, color 0.9s ease, box-shadow 0.9s ease;
}
@media (min-width: 720px) {
  .pagina-historia { padding: 18px 28px 26px; }
}
.idades {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(31, 42, 30, 0.08);
}
.idades button {
  min-height: 36px;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--tinta-2);
  font: 600 0.875rem/1.2 var(--fonte-ui);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.idades button:hover { color: var(--tinta); }
.idades button:focus-visible { outline-color: var(--tinta-ouro); }
.idades button[aria-checked="true"] { background: var(--tinta-verde); color: #f6f1e7; }
.historia-titulo {
  margin: 10px 0 2px;
  font-family: var(--fonte-livro);
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.historia-ref {
  margin: 0 0 14px;
  color: var(--tinta-2);
  font-size: 0.875rem;
}
.historia-texto {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--fonte-livro);
  font-size: 1.0625rem;
  line-height: 1.65;
}
.historia-texto li {
  margin: 0 -10px;
  padding: 4px 10px;
  border-radius: 3px;
  transition: background-color 0.45s ease, box-shadow 0.45s ease, color 0.45s ease;
}
/* O último parágrafo esmaece: a história continua no aplicativo. */
.historia-texto:not(.em-leitura) li:last-child {
  -webkit-mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, 0.3));
  mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, 0.3));
}
.historia-continua {
  margin: 8px 0 0;
  color: var(--tinta-2);
  font-family: var(--fonte-livro);
  font-size: 0.9375rem;
  font-style: italic;
}
.historia-pergunta {
  margin: 18px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--papel-fio);
  font-family: var(--fonte-livro);
  font-size: 1.0625rem;
}
.historia-pergunta .miudo { display: block; margin-bottom: 4px; }

/* A mesma página, à noite */
.familia.dormindo .pagina-historia {
  color: #d9d0b8;
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(234, 220, 178, 0.07), rgba(234, 220, 178, 0) 55%),
    linear-gradient(180deg, #161d29 0%, #111722 100%);
  box-shadow: inset 0 0 0 1px rgba(234, 220, 178, 0.1), 0 26px 60px rgba(0, 0, 0, 0.55);
}
.familia.dormindo .pagina-historia .pagina-dia { color: #c4a75e; }
.familia.dormindo .historia-ref,
.familia.dormindo .historia-continua,
.familia.dormindo .ouvir-estado { color: #9aa29a; }
.familia.dormindo .historia-texto li.lendo {
  background: linear-gradient(90deg, rgba(213, 178, 88, 0.2), rgba(213, 178, 88, 0.05));
  box-shadow: inset 3px 0 0 #b8973f;
}
.familia.dormindo .historia-texto.em-leitura li:not(.lendo) { color: #7f8790; }
.familia.dormindo .botao-ouvir { background: #2a3442; color: #eadcb2; }
.familia.dormindo .botao-ouvir:hover { background: #334052; }
.familia.dormindo .botao-ouvir:focus-visible { outline-color: var(--ouro); }

/* Para quem ensina */
.ensinar {
  background: linear-gradient(180deg, #0a1120 0%, var(--noite) 100%);
}
.ensinar-grade {
  display: grid;
  gap: 1px;
  margin-top: 36px;
  overflow: hidden;
  border: 1px solid var(--fio);
  border-radius: 16px;
  background: var(--fio);
}
.ensinar-grade article {
  padding: 26px 24px 28px;
  background: var(--noite-2);
}
.ensinar-grade h3 {
  margin: 0 0 8px;
  font-family: var(--fonte-livro);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
}
.ensinar-grade p { margin: 0; color: var(--luar-2); }
@media (min-width: 760px) {
  .ensinar-grade { grid-template-columns: 1fr 1fr; }
  .ensinar-grade article { padding: 32px 32px 34px; }
}

/* Planos */
.planos {
  background:
    radial-gradient(56% 36% at 50% 46%, rgba(95, 178, 135, 0.09), rgba(95, 178, 135, 0)),
    var(--noite);
}
.planos-casa {
  max-width: 40em;
  margin: 14px 0 0;
  color: var(--luar);
  font-family: var(--fonte-livro);
  font-size: 1.125rem;
  text-wrap: pretty;
}
.planos-grade {
  display: grid;
  gap: 16px;
  margin-top: 36px;
}
@media (min-width: 760px) {
  .planos-grade { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
.plano {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px;
  border: 1px solid var(--fio);
  border-radius: 18px;
  background: var(--noite-3);
}
.plano > p { margin: 0; }
.plano-destaque {
  border-color: transparent;
  color: var(--tinta);
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, var(--papel) 0%, var(--papel-2) 100%);
  box-shadow: var(--sombra-papel);
}
.plano-fita {
  margin: 0 0 4px;
  color: var(--luar-3);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.plano-destaque .plano-fita { color: var(--tinta-ouro); }
/* A oferta com prazo ganha uma etiqueta de verdade, não só a cor. */
.plano-fita-oferta {
  justify-self: start;
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(213, 178, 88, 0.16);
  color: var(--ouro);
}
.plano-destaque .plano-fita-oferta { background: rgba(119, 89, 15, 0.12); color: var(--tinta-ouro); }
.plano-depois { font-size: 0.875rem; }
.plano-economia { color: var(--verde-forte); font-weight: 600; }
.plano-destaque .plano-economia { color: var(--tinta-verde); }
.plano-nome {
  margin: 0;
  font-family: var(--fonte-livro);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
}
.plano-preco {
  font-family: var(--fonte-livro);
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}
.plano-preco small {
  /* "por mês" desce junto para a linha de baixo, sem separar "por" de "mês". */
  white-space: nowrap;
  margin-left: 2px;
  color: var(--luar-2);
  font-family: var(--fonte-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
}
.plano-conta { color: var(--luar-2); font-size: 0.9375rem; }
.plano-destaque .plano-preco small,
.plano-destaque .plano-conta { color: var(--tinta-2); }
.plano .botao { margin-top: auto; }
.plano-destaque .botao { background: var(--tinta-verde); color: #f6f1e7; }
.plano-destaque .botao:hover { background: #16452f; }
.plano-destaque .botao:focus-visible { outline-color: var(--tinta-ouro); }
.plano-reserva p { color: var(--luar-2); }

.incluso { margin-top: 40px; }
.incluso ul {
  display: grid;
  gap: 16px 40px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.incluso li {
  position: relative;
  padding-left: 30px;
  color: var(--luar-2);
}
.incluso li::before {
  content: '';
  position: absolute;
  top: 0.35em;
  left: 4px;
  width: 7px;
  height: 13px;
  border: solid var(--verde);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.incluso strong {
  display: block;
  color: var(--luar);
  font-weight: 700;
}
@media (min-width: 760px) {
  .incluso ul { grid-template-columns: 1fr 1fr; }
}

.garantia {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 28px;
  padding: 24px;
  border: 1px solid rgba(213, 178, 88, 0.35);
  border-radius: 18px;
  background: rgba(213, 178, 88, 0.07);
}
.garantia-selo {
  display: grid;
  place-content: center;
  flex: none;
  width: 88px;
  height: 88px;
  margin: 0;
  border: 2px solid var(--ouro);
  border-radius: 50%;
  color: var(--ouro);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}
.garantia-selo span {
  display: block;
  font-family: var(--fonte-livro);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
.garantia h3 {
  margin: 0 0 6px;
  font-family: var(--fonte-livro);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
}
.garantia p { margin: 0; color: var(--luar-2); }
@media (max-width: 540px) {
  .garantia { flex-direction: column; align-items: flex-start; }
}

/* O que acontece ao tocar em "Assinar" e, quando existir, o contato: pequenos, logo abaixo da garantia. */
.planos-nota,
.planos-contato {
  max-width: 40em;
  margin: 16px 0 0;
  color: var(--luar-2);
  font-size: 0.9375rem;
}
.planos-nota + .planos-contato { margin-top: 6px; }
.planos-contato a {
  color: var(--ouro);
  font-weight: 700;
  text-underline-offset: 3px;
}

.gratis {
  margin: 28px 0 0;
  color: var(--luar-2);
}
.gratis a {
  color: var(--ouro);
  font-weight: 700;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* Dúvidas */
.duvidas {
  padding-top: 24px;
  padding-bottom: 40px;
  background: var(--noite);
}
.duvidas h2 { margin-bottom: 28px; }
.duvidas details { border-bottom: 1px solid var(--fio); }
.duvidas details:first-of-type { border-top: 1px solid var(--fio); }
.duvidas summary {
  position: relative;
  padding: 20px 44px 20px 0;
  font-family: var(--fonte-livro);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
.duvidas summary::-webkit-details-marker { display: none; }
.duvidas summary::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 8px;
  width: 11px;
  height: 11px;
  border: solid var(--ouro);
  border-width: 0 2px 2px 0;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}
.duvidas details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.duvidas details p {
  max-width: 44em;
  margin: 0 0 22px;
  color: var(--luar-2);
}
.duvidas details a { color: var(--ouro); }

/* Fim */
.fim {
  padding: 96px var(--margem-dir) 104px var(--margem-esq);
  text-align: center;
  background:
    radial-gradient(60% 70% at 50% 100%, rgba(213, 178, 88, 0.15), rgba(213, 178, 88, 0)),
    var(--noite);
}
.fim h2 { font-size: clamp(2.1rem, 7vw, 3.75rem); }
.fim h2 em {
  color: var(--ouro);
  font-style: italic;
  font-weight: 500;
}

/* Rodapé */
.rodape {
  padding: 44px var(--margem-dir) calc(44px + env(safe-area-inset-bottom)) var(--margem-esq);
  border-top: 1px solid var(--fio);
  background: #090d12;
  color: var(--luar-3);
  font-size: 0.875rem;
}
.rodape-dentro {
  display: grid;
  gap: 18px;
}
.rodape-marca p { margin: 4px 0 0; }
.rodape-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}
.rodape-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--luar-2);
  text-underline-offset: 3px;
}
.rodape-responsavel,
.rodape-credito,
.rodape-ano { margin: 0; }
.rodape-credito a { color: var(--luar-2); }
@media (min-width: 880px) {
  .rodape-dentro { grid-template-columns: 1fr auto; align-items: start; }
  .rodape-links { justify-content: flex-end; }
  .rodape-responsavel,
  .rodape-credito,
  .rodape-ano { grid-column: 1 / -1; }
}

/* Barra de compra (só no celular) */
.barra-celular {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--margem-dir) calc(10px + env(safe-area-inset-bottom)) var(--margem-esq);
  border-top: 1px solid var(--fio);
  background: rgba(17, 25, 35, 0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
}
.barra-celular.visivel {
  transform: none;
  visibility: visible;
  transition: transform 0.3s ease, visibility 0s;
}
.barra-celular p {
  margin: 0;
  min-width: 0;
  color: var(--luar-2);
  font-size: 0.875rem;
  line-height: 1.35;
}
.barra-celular p strong { color: var(--luar); font-weight: 700; }
/* Se o texto não couber numa linha, quebra entre as duas frases, nunca no meio de "Faltam 179.". */
.barra-celular p span { white-space: nowrap; }
/* O botão nunca quebra em duas linhas ("Ver / planos"): era isso que fazia a barra crescer em 320 px. */
.barra-celular .botao { flex: none; white-space: nowrap; }
@media (min-width: 1024px) {
  .barra-celular { display: none !important; }
}

/* ------------------------------------------------------------------ */
/* Toque: alvos de pelo menos 44 px                                     */
/*                                                                      */
/* Só em aparelhos em que o dedo é o ponteiro principal. O topo e a      */
/* barra de baixo ganham 44 px de botão e perdem 2 px de folga em cada   */
/* lado, então continuam com os mesmos 61 px de antes.                   */
/* ------------------------------------------------------------------ */
@media (pointer: coarse) {
  .topo-dentro { padding-top: 8px; padding-bottom: 8px; }
  .marca,
  .topo-entrar,
  .topo-nav a,
  .botao-pequeno { min-height: 44px; }
  .topo-entrar,
  .topo-nav a { display: inline-flex; align-items: center; }
  .barra-celular { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .leitor-barra button { min-width: 44px; min-height: 44px; }
  .modos-opcoes button,
  .idades button,
  .legenda button { min-height: 44px; }

  /* Cada dia do mapa tem 18 a 20 px. A área de toque passa a ocupar também metade do vão até
   * o vizinho: nenhum toque no espaço entre as células se perde, e em 390 px a área é de 24 px. */
  .dia-celula::before {
    content: '';
    position: absolute;
    inset: calc(var(--mapa-gap, 4px) / -2);
  }
}

/* ------------------------------------------------------------------ */
/* Movimento que explica                                                */
/*                                                                      */
/* Cada animação existe para mostrar uma ideia do método, não para      */
/* enfeitar: a lâmpada que acende, o contexto que se monta, o grifo no  */
/* que procurar, o visto que se desenha, o "você está aqui" do livro e  */
/* as revisões que voltam em 1, 7 e 30 dias. Regras de todas:           */
/*  - só transform e opacity (a exceção é o grifo, pequeno e único);    */
/*  - nada fica invisível esperando a rolagem: o estado de partida      */
/*    (.espera) é sempre legível, e o site.js só o arma para quem não   */
/*    pediu menos movimento;                                            */
/*  - sem JavaScript, ou com movimento reduzido, a página mostra o      */
/*    estado final, parado.                                             */
/* ------------------------------------------------------------------ */

/* Lugar de cada item na fila (0, 1, 2…), para entrarem um depois do outro. */
.linha-tempo > li, .revisoes > li { --i: 0; }
.linha-tempo > li:nth-child(2), .revisoes > li:nth-child(2) { --i: 1; }
.linha-tempo > li:nth-child(3), .revisoes > li:nth-child(3) { --i: 2; }
.linha-tempo > li:nth-child(4) { --i: 3; }

/* Etapa 3, ao ler o último capítulo: o dia vira um selo verde. */
.pagina-capitulos.completo #capitulos-conta {
  margin: -2px 0;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--tinta-verde);
  color: #f6f1e7;
}

@media (prefers-reduced-motion: no-preference) {
  /* Início: a lâmpada acende — o halo cresce atrás da página do salmo e o papel clareia.
   * No notebook a página já está na tela e acende ao abrir. No celular ela está
   * abaixo da dobra: a animação do início passa sem ninguém ver, e o site.js
   * acende de novo (.reacende) quando você chega nela. */
  .abertura::before {
    transform-origin: 72% 58%;
    animation: lampada-acende 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
  }
  .pagina-salmo::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--noite);
    pointer-events: none;
    animation: papel-clareia 1.6s ease-out 0.25s both;
  }
  .abertura.reacende::before { animation-name: lampada-acende-de-novo; animation-delay: 0.05s; }
  .abertura.reacende .pagina-salmo::after { animation-name: papel-clareia-de-novo; animation-delay: 0.1s; }
  /* Enquanto a voz lê, a luz respira em volta da página. Só opacidade, e nunca além
   * da margem da tela: um brilho que passasse dela faria a página rolar de lado. */
  .pagina-salmo::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -14px;
    border-radius: 22px;
    background: radial-gradient(closest-side, rgba(236, 202, 110, 0.22), rgba(236, 202, 110, 0));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease;
  }
  .pagina-salmo:has(.botao-ouvir[aria-pressed="true"])::before {
    opacity: 1;
    animation: lampada-respira 3.4s ease-in-out infinite alternate;
  }

  /* O convite: dois anéis saem do botão de ouvir, três vezes, quando ele aparece na tela. */
  .convida .botao-ouvir::before,
  .convida .botao-ouvir::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--tinta-verde);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    animation: convite 1.9s ease-out 3;
  }
  .convida .botao-ouvir::after { animation-delay: 0.6s; }
  .convida .botao-ouvir[aria-pressed="true"]::before,
  .convida .botao-ouvir[aria-pressed="true"]::after { animation: none; }

  /* Etapa 1 — o contexto se monta: o resumo, as fichas e quem você vai encontrar. */
  .contexto-ctx.espera,
  .contexto-conexao.espera,
  .fichas > div.espera { opacity: 0.4; transform: translateY(14px); }
  .fichinhas > li.espera { opacity: 0.4; transform: scale(0.8); }
  .contexto-ctx.visto,
  .contexto-conexao.visto,
  .fichas > div.visto {
    transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--ordem, 0) * 110ms);
  }
  .fichinhas > li.visto {
    transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc(var(--ordem, 0) * 60ms);
  }

  /* Etapa 2 — cada ponto sobe e o grifo passa pelo que procurar. */
  .observar > li.espera { opacity: 0.4; transform: translateY(12px); }
  .observar > li.espera .grifo { background-size: 0% 100%; }
  .observar > li.visto {
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--ordem, 0) * 140ms);
  }
  .observar > li.visto .grifo {
    transition: background-size 0.85s cubic-bezier(0.5, 0.1, 0.2, 1);
    transition-delay: calc(var(--ordem, 0) * 140ms + 450ms);
  }

  /* Etapa 3 — marcar um capítulo: a bolinha enche com um salto e o visto se desenha. */
  .capitulos input:checked { animation: marcou 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
  .capitulos input:checked::after { animation: desenhar-visto 0.36s ease-out 0.06s backwards; }
  /* … e ao fechar o dia: o selo salta, a barra brilha e um anel se abre em volta do cartão. */
  .pagina-capitulos.completo #capitulos-conta { animation: lido 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
  .pagina-capitulos.completo .barra span::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
    animation: brilho-da-barra 0.9s ease-out 0.4s backwards;
  }
  .pagina-capitulos.completo::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--tinta-verde);
    border-radius: inherit;
    pointer-events: none;
    animation: anel-do-dia 0.9s ease-out both;
  }

  /* Etapa 4 — "você está aqui": a linha do livro se desenha e o ponto atual pulsa. */
  .linha-tempo.espera > li::before { transform: scale(0.4); }
  .linha-tempo.espera > li::after { transform: scaleX(0); }
  .linha-tempo.visto > li::before {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc(var(--i) * 300ms);
  }
  .linha-tempo.visto > li::after {
    transition: transform 0.55s ease-out;
    transition-delay: calc(var(--i) * 300ms + 150ms);
  }
  .linha-tempo.visto > li.agora > span::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 0;
    width: 12px;
    height: 12px;
    border: 2px solid var(--tinta-ouro);
    border-radius: 50%;
    pointer-events: none;
    animation: voce-esta-aqui 2.2s ease-out 1.4s 5 backwards;
  }

  /* Etapa 5 — a memória volta: a linha avança e acende amanhã, em 7 e em 30 dias. */
  .revisoes.espera > li::before { transform: scale(0.3); }
  .revisoes.espera > li::after { transform: scaleX(0); }
  .revisoes.espera :is(.revisao-quando, .revisao-o-que) { opacity: 0.4; transform: translateY(8px); }
  .revisoes.visto > li::before {
    transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc(var(--i) * 700ms);
  }
  .revisoes.visto > li::after {
    transition: transform 0.7s ease-out;
    transition-delay: calc(var(--i) * 700ms + 250ms);
  }
  .revisoes.visto :is(.revisao-quando, .revisao-o-que) {
    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i) * 700ms + 150ms);
  }

  /* Os 180 dias — o dia escolhido solta um anel e a ficha de baixo troca de leitura. */
  .dia-celula[aria-pressed="true"]::after {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid var(--ouro);
    border-radius: 6px;
    pointer-events: none;
    animation: dia-escolhido 0.7s ease-out;
  }
  .mapa-detalhe .entra { animation: detalhe-entra 0.34s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
  .mapa-detalhe .entra:nth-child(2) { animation-delay: 50ms; }
  .mapa-detalhe .entra:nth-child(3) { animation-delay: 100ms; }

  /* Família e planos — os selos das trilhas e o selo dos 7 dias carimbam ao aparecer. */
  .trilhas-lista > li.espera::before { transform: scale(0.3); }
  .trilhas-lista > li.visto::before {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc(var(--ordem, 0) * 70ms);
  }
  .garantia.espera .garantia-selo { opacity: 0.4; transform: scale(1.5) rotate(-18deg); }
  .garantia.visto .garantia-selo {
    transition: opacity 0.3s ease, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 0.15s;
  }

  /* Respostas das dúvidas e do glossário abrem com um leve deslize. */
  .duvidas details[open] > p,
  .glossario details[open] > p { animation: resposta-abre 0.3s ease-out; }

  /* Toque: o botão afunda um pouco, para o dedo sentir que pegou. */
  .botao-ouvir:active,
  .modos-opcoes button:active,
  .idades button:active,
  .leitor-barra button:active,
  .legenda button:active,
  .interruptor:active { transform: scale(0.96); }
  .capitulos label:active { transform: scale(0.985); }
  .dia-celula:active { transform: scale(0.88); }
}

@keyframes lampada-acende {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: none; }
}
@keyframes papel-clareia {
  from { opacity: 0.55; }
  to { opacity: 0; }
}
/* Os mesmos dois quadros, com outro nome: trocar o nome é o que faz a animação recomeçar. */
@keyframes lampada-acende-de-novo {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: none; }
}
@keyframes papel-clareia-de-novo {
  from { opacity: 0.55; }
  to { opacity: 0; }
}
@keyframes lampada-respira {
  from { opacity: 0.55; }
  to { opacity: 1; }
}
@keyframes convite {
  0% { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.16, 1.7); }
}
@keyframes marcou {
  0% { transform: scale(0.8); }
  55% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
/* O visto é desenhado: primeiro o traço curto, depois o longo, subindo. */
@keyframes desenhar-visto {
  0% { clip-path: polygon(0 70%, 0 70%, 0 100%, 0 100%); }
  40% { clip-path: polygon(0 70%, 100% 70%, 100% 100%, 0 100%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes lido {
  from { transform: scale(0.7); }
  to { transform: none; }
}
@keyframes brilho-da-barra {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
@keyframes anel-do-dia {
  from { opacity: 0.8; transform: scale(1); }
  to { opacity: 0; transform: scale(1.06); }
}
@keyframes voce-esta-aqui {
  0% { opacity: 0.7; transform: scale(1); }
  75%, 100% { opacity: 0; transform: scale(2.8); }
}
@keyframes dia-escolhido {
  from { opacity: 0.9; transform: scale(1); }
  to { opacity: 0; transform: scale(1.9); }
}
@keyframes detalhe-entra {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes resposta-abre {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* Impresso: tudo no estado final, sem esperar a rolagem. */
@media print {
  .espera, .espera *, .espera::before, .espera::after, .espera *::before, .espera *::after {
    opacity: 1 !important;
    transform: none !important;
    background-size: 100% 100% !important;
    transition: none !important;
  }
}

/*
 * Impresso: o tema é escuro (letra clara sobre fundo escuro), e o navegador não
 * imprime fundos se a pessoa não marcar essa opção. Sem os fundos, a letra clara
 * saía em cinza-claro sobre o papel branco: no Chromium, cerca de 3:1 nos títulos,
 * nas perguntas e nos benefícios, e 2,6:1 nos botões; os outros navegadores não
 * corrigem a cor sozinhos e podem sair pior. Aqui o papel é branco e a letra é preta.
 * O que só existe na tela some, e o que é "grudado" volta ao fluxo (impresso depois
 * de rolar a página, o topo saía no meio do texto, no pé de uma folha do meio).
 */
@media print {
  *, *::before, *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  /* O fundo da folha: sem isto, quem marca "imprimir fundos" recebe a folha inteira na cor da noite. */
  :root { background: #fff !important; color-scheme: light; }
  .pular, .topo-nav, .topo-acoes, .trilho, .trilho-celular, .barra-celular, .ceu, .lua { display: none !important; }
  .topo { position: static !important; }
  /* No papel não dá para tocar: os links do meio do texto mostram o endereço (botões e marca, não). */
  p a, li a { text-decoration: underline; }
  a[href^="http"]:not(.botao):not(.marca)::after {
    content: "(" attr(href) ")";
    margin-left: 0.3em;
    font-size: 0.85em;
    overflow-wrap: anywhere;
  }
  /* Respostas e definições fechadas na tela também saem no papel. */
  details::details-content { content-visibility: visible !important; }
  /* Pergunta e resposta ficam na mesma folha; título não fica sozinho no pé da folha. */
  details, .rodape { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  /* Nos Termos, o espaço ainda por preencher continua se distinguindo do resto do texto. */
  .a-preencher { border-color: #666 !important; }
  /* O aviso de rascunho tem uma regra própria com !important, mais forte que a de cima. */
  p.aviso-rascunho { color: #000 !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Páginas de texto (termos, privacidade) */
.texto-legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px var(--margem-dir) 88px var(--margem-esq);
}
.texto-legal h1 {
  margin: 10px 0 8px;
  font-family: var(--fonte-livro);
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.texto-legal h2 {
  margin: 36px 0 10px;
  font-family: var(--fonte-livro);
  font-size: 1.375rem;
  font-weight: 600;
}
.texto-legal p,
.texto-legal li { color: var(--luar-2); }
.texto-legal ul { padding-left: 1.2em; }
.texto-legal li { margin: 6px 0; }
.texto-legal a { color: var(--ouro); }
.texto-legal .atualizado { color: var(--luar-3); font-size: 0.875rem; }
.aviso-rascunho {
  margin: 24px 0 8px;
  padding: 14px 16px;
  border: 1px solid rgba(213, 178, 88, 0.4);
  border-radius: 10px;
  background: rgba(213, 178, 88, 0.08);
  color: var(--luar) !important;
}
.texto-legal strong { color: var(--luar); }
.texto-legal .sobretitulo { margin-bottom: 2px; }
/* Dado da empresa que ainda falta (config.js): impossível de não ver. */
.a-preencher {
  padding: 0 5px;
  border: 1px dashed rgba(213, 178, 88, 0.75);
  border-radius: 4px;
  color: var(--ouro);
}
.legal-veja {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--fio);
}