/* tokens da marca Imagine (copiados do app em produção) */
:root {
  /* manual de marca 2026 */
  --creme: #FEF6EC;
  --grafite: #212121;
  --laranja: #E7691D;
  --azul: #0152ED;
  --azul-suave: #C8E5FC;
  /* tons do símbolo, do azul ao laranja */
  --raio-1: #0152ED; --raio-2: #3B9CFD; --raio-3: #72CAFD; --raio-4: #C8E5FC;
  --raio-5: #FDD7B1; --raio-6: #FD8931; --raio-7: #E7691D;
  /* nomes herdados da v3, agora apontando para a paleta nova */
  --coral: var(--laranja);
  --coral-fundo: var(--laranja);
  --coral-escuro: var(--azul);
  --tinta-coral: var(--grafite);
  --ceu: var(--azul);
  --sol: var(--laranja);
  --noite: var(--grafite);
  --noite-2: #2E2E2E;
  --papel: var(--creme);
  --tinta-papel: var(--grafite);
  /* Fellix (manual) é paga: Figtree é a substituta aprovada no comparativo de 22/09 */
  --ui: 'Fellix', 'Figtree', system-ui, sans-serif;
  --livro: 'Andika', system-ui, sans-serif;
  --enfase: var(--ui);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--ui); font-weight: 300; letter-spacing: -.01em; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
h1, .lead { text-wrap: balance; }
em.enfase { font-family: var(--enfase); font-style: italic; font-weight: 600; letter-spacing: -.01em; }
.logo img { height: 34px; width: auto; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 999px; font-weight: 600; letter-spacing: -.02em; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; white-space: nowrap; }
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--ceu); outline-offset: 3px; }
.btn-lg { font-size: 19px; padding: 16px 30px; min-height: 58px; }

/* tablet da demonstração */
.tablet { margin: 0; width: 100%; }
.tablet-vidro { background: var(--grafite); border-radius: 30px; padding: 14px; box-shadow: 0 40px 80px -30px rgba(33, 33, 33, .55), inset 0 0 0 1px rgba(255,255,255,.08); }
.livro { background: var(--papel); border-radius: 18px; overflow: hidden; color: var(--tinta-papel); }
.livro-cena { aspect-ratio: 400 / 250; background: var(--azul-suave); }
.cena { width: 100%; height: 100%; display: block; }
.parte { opacity: 0; transform: translateY(10px) scale(.94); transform-box: fill-box; transform-origin: center; }
.parte.on { opacity: 1; transform: none; transition: opacity .5s ease, transform .6s cubic-bezier(.2, .9, .3, 1.3); }
.livro-texto { padding: 16px 20px 6px; }
.frase { margin: 0; font-family: var(--livro); font-size: 19px; line-height: 1.7; }
.frase span { padding: 1px 3px; border-radius: 5px; transition: color .2s, background-color .2s; }
.frase .aguarda { color: #B3AA9E; }
.frase .lida { color: #6B645C; }
.frase .lendo { color: var(--tinta-papel); background: var(--azul-suave); font-weight: 700; }
.livro-rodape { display: flex; justify-content: space-between; align-items: center; padding: 6px 20px 16px; font-size: 13px; }
.ouvindo { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--coral-escuro); }
.barras { display: inline-flex; align-items: flex-end; gap: 3px; height: 14px; }
.barras i { width: 3px; height: 5px; border-radius: 2px; background: var(--coral); animation: pulsa 1s ease-in-out infinite; }
.barras i:nth-child(2) { animation-delay: .15s; } .barras i:nth-child(3) { animation-delay: .3s; } .barras i:nth-child(4) { animation-delay: .45s; }
.ouvindo.parado .barras i { animation: none; }
.pagina { color: #6B645C; }
@keyframes pulsa { 50% { height: 14px; } }

@media (prefers-reduced-motion: reduce) {
  .parte { opacity: 1; transform: none; }
  .btn:hover { transform: none; }
}

/* barra de CTA do mobile: só aparece quando o botão do topo sai da tela */
.barra-cta { transform: translateY(160%); transition: transform .3s ease; }
.barra-cta.aparece { transform: none; }