/* THUMOS — A Ciência do Homem que Decide
   Leitor PWA · tokens derivados do livro impresso */

@font-face { font-family: 'EB Garamond'; src: url('fonts/eb-garamond-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'EB Garamond'; src: url('fonts/eb-garamond-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Noto Serif'; src: url('fonts/noto-serif-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Serif'; src: url('fonts/noto-serif-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Noto Serif'; src: url('fonts/noto-serif-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/lato-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('fonts/lato-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --bronze: #C08A3E;
  --bronze-dim: #8d6a35;
  --serif: 'Noto Serif', Georgia, serif;
  --display: 'EB Garamond', Georgia, serif;
  --ui: 'Lato', system-ui, sans-serif;
  --fs-body: 1.0625rem;
  --measure: 38rem;
}
html[data-theme="noite"] {
  --bg: #15130E; --surface: #1E1A12; --raise: #28231A;
  --text: #EDE5D3; --muted: #A39884; --line: #3a332617;
  --line-strong: #463d2c; --quote-bg: #1B1812;
  color-scheme: dark;
}
html[data-theme="papel"] {
  --bg: #F5F0E4; --surface: #EDE6D5; --raise: #E4DCC8;
  --text: #241F15; --muted: #6E6450; --line: #241f1514;
  --line-strong: #cfc4ab; --quote-bg: #EFE8D8;
  color-scheme: light;
}
html[data-theme="sepia"] {
  --bg: #ECDFBE; --surface: #E3D3A9; --raise: #D9C794;
  --text: #3B2E19; --muted: #7E6E49; --line: #3b2e1916;
  --line-strong: #C3AE7F; --quote-bg: #E6D7AF;
  color-scheme: light;
}

/* ---------- papel envelhecido (tema clássico) ---------- */
html[data-theme="sepia"] body {
  background:
    radial-gradient(ellipse 130% 100% at 50% 0%, rgba(255, 248, 222, .5), transparent 60%),
    radial-gradient(ellipse 90% 70% at 85% 90%, rgba(166, 124, 54, .10), transparent 65%),
    radial-gradient(ellipse 80% 60% at 8% 75%, rgba(150, 110, 45, .09), transparent 60%),
    radial-gradient(ellipse 145% 125% at 50% 45%, transparent 52%, rgba(110, 78, 30, .20) 100%),
    var(--bg);
  background-attachment: fixed;
}
html[data-theme="sepia"] body::after {
  content: ""; position: fixed; inset: 0; z-index: 99; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--serif); font-size: var(--fs-body); line-height: 1.78;
  min-height: 100dvh;
  transition: background-color .35s ease, color .35s ease;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.eyebrow {
  font-family: var(--ui); font-weight: 700; font-size: .6875rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--bronze);
}

/* ---------- fio de bronze (progresso de leitura) ---------- */
#fio {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--bronze-dim), var(--bronze));
  z-index: 60; transition: transform .1s linear; pointer-events: none;
}

/* ---------- barra superior do leitor ---------- */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: none; align-items: center; gap: .25rem;
  padding: calc(env(safe-area-inset-top) + .4rem) .65rem .4rem;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
body.lendo #topbar { display: flex; }
#topbar .tb-titulo {
  flex: 1; text-align: center; font-family: var(--ui); font-weight: 700;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-btn {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 10px; color: var(--muted); flex: none;
}
.tb-btn:active { background: var(--raise); }
.tb-btn svg { width: 21px; height: 21px; }

/* ---------- capa / sumário ---------- */
#app { min-height: 100dvh; }
.capa {
  max-width: var(--measure); margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 3.2rem) 1.4rem 4rem;
}
.capa-hero { text-align: center; padding-bottom: 2.4rem; }
.theta {
  width: 64px; height: 78px; margin: 0 auto 1.6rem; display: block;
  color: var(--bronze);
}
.capa-hero h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2.9rem, 11vw, 3.8rem); letter-spacing: .14em;
  text-indent: .14em; line-height: 1.05;
}
.capa-hero .sub {
  font-family: var(--serif); font-style: italic; font-size: 1.05rem;
  color: var(--muted); margin-top: .55rem;
}
.capa-hero .autor { margin-top: 1.5rem; }
.acoes { display: grid; gap: .7rem; margin: 2.2rem 0 0; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--ui); font-weight: 700; font-size: .82rem;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 1.02rem 1.2rem; border-radius: 12px;
  transition: transform .12s ease, opacity .2s;
}
.btn:active { transform: scale(.985); }
.btn-bronze { background: var(--bronze); color: #15130E; }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--text); }
.btn svg { width: 17px; height: 17px; flex: none; }


/* sumário */
.sumario { margin-top: 3rem; }
.parte-head {
  display: flex; align-items: baseline; gap: .8rem;
  margin: 2.3rem 0 .4rem; padding-bottom: .55rem;
  border-bottom: 1px solid var(--line-strong);
}
.parte-head .eyebrow { flex: none; }
.parte-head h2 { font-family: var(--display); font-weight: 600; font-size: 1.25rem; }
.parte-head .pd { font-style: italic; font-size: .85rem; color: var(--muted); margin-left: auto; text-align: right; display: none; }
@media (min-width: 560px) { .parte-head .pd { display: block; } }

.cap-item {
  width: 100%; display: flex; align-items: center; gap: .9rem;
  text-align: left; padding: .92rem .35rem;
  border-bottom: 1px solid var(--line);
}
.cap-item:active { background: var(--surface); }
.cap-num {
  font-family: var(--display); font-weight: 500; font-size: 1.3rem;
  color: var(--bronze); width: 1.7rem; text-align: center; flex: none;
}
.cap-meta { flex: 1; min-width: 0; }
.cap-meta .t { font-family: var(--serif); font-weight: 700; font-size: .98rem; line-height: 1.3; }
.cap-meta .s { font-style: italic; font-size: .84rem; color: var(--muted); line-height: 1.35; margin-top: .1rem; }
.cap-prog { flex: none; font-family: var(--ui); font-size: .7rem; letter-spacing: .08em; color: var(--muted); }
.cap-prog.lido { color: var(--bronze); }

.estante-nota {
  margin-top: 3.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line-strong);
  text-align: center; font-style: italic; font-size: .9rem; color: var(--muted);
}

/* ---------- leitor ---------- */
.leitor {
  max-width: var(--measure); margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 5.2rem) 1.45rem 3rem;
}
.cap-abertura { margin-bottom: 2.6rem; }
.cap-abertura .parte-label { color: var(--muted); display: block; margin-bottom: 1.6rem; }
.cap-abertura h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(2rem, 7.5vw, 2.6rem); line-height: 1.12; margin-top: .55rem;
}
.cap-abertura .cap-sub {
  font-style: italic; font-size: 1.08rem; color: var(--muted); margin-top: .7rem;
}
.cap-abertura::after {
  content: ""; display: block; width: 56px; height: 2px;
  background: var(--bronze); margin-top: 1.7rem;
}

.texto p { margin: 0 0 1.06em; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.texto p.lead::first-letter {
  font-family: var(--display); font-weight: 600; color: var(--bronze);
  font-size: 3.05em; float: left; line-height: .82;
  padding: .07em .12em 0 0;
}
.texto h2 {
  font-family: var(--display); font-weight: 600; font-size: 1.45rem;
  line-height: 1.25; margin: 2.4em 0 .8em;
}
.texto h3 {
  font-family: var(--ui); font-weight: 700; font-size: .78rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--bronze);
  margin: 2.6em 0 1em;
}
.texto blockquote {
  margin: 1.7em 0; padding: 1.05em 1.2em;
  background: var(--quote-bg); border-left: 2px solid var(--bronze);
  border-radius: 0 10px 10px 0;
  font-style: italic; font-size: .98em; text-align: left;
}
.texto blockquote cite {
  display: block; margin-top: .65em; font-style: normal;
  font-family: var(--ui); font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.texto blockquote cite::before { content: "— "; color: var(--bronze); }

.cap-fim { margin-top: 3.2rem; border-top: 1px solid var(--line-strong); padding-top: 1.3rem; }
.cap-nav { display: flex; gap: .7rem; }
.cap-nav .btn { flex: 1; padding: .95rem .6rem; font-size: .74rem; }
.cap-fim .marca {
  text-align: center; color: var(--bronze); font-family: var(--display);
  font-size: 1.3rem; margin-bottom: 1.3rem; letter-spacing: .4em; text-indent: .4em;
}

/* ---------- folha de ajustes (Aa) ---------- */
#veu {
  position: fixed; inset: 0; background: rgba(8,7,4,.5); z-index: 70;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
#ajustes {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 71;
  background: var(--surface); border-radius: 18px 18px 0 0;
  padding: 1.3rem 1.4rem calc(env(safe-area-inset-bottom) + 1.5rem);
  transform: translateY(105%); transition: transform .3s cubic-bezier(.3,.9,.3,1);
  max-width: 30rem; margin: 0 auto;
  border: 1px solid var(--line-strong); border-bottom: 0;
}
body.ajustes-aberto #veu { opacity: 1; pointer-events: auto; }
body.ajustes-aberto #ajustes { transform: translateY(0); }
#ajustes .grupo { margin-top: 1.2rem; }
#ajustes .grupo:first-child { margin-top: .2rem; }
.chips { display: flex; gap: .55rem; margin-top: .6rem; }
.chip {
  flex: 1; padding: .72rem .4rem; border-radius: 10px;
  border: 1px solid var(--line-strong);
  font-family: var(--ui); font-weight: 700; font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.chip[aria-pressed="true"] { border-color: var(--bronze); color: var(--bronze); background: var(--raise); }
.tam-controle { display: flex; align-items: center; gap: 1rem; margin-top: .6rem; }
.tam-controle button {
  width: 52px; height: 46px; border-radius: 10px; border: 1px solid var(--line-strong);
  font-family: var(--serif); color: var(--text);
}
.tam-controle .menor { font-size: .85rem; }
.tam-controle .maior { font-size: 1.25rem; }
.tam-amostra { flex: 1; text-align: center; font-family: var(--ui); font-size: .8rem; color: var(--muted); letter-spacing: .08em; }

/* ---------- folha "como instalar" ---------- */
#como-instalar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 71;
  background: var(--surface); border-radius: 18px 18px 0 0;
  padding: 1.4rem 1.4rem calc(env(safe-area-inset-bottom) + 1.4rem);
  transform: translateY(105%); transition: transform .3s cubic-bezier(.3,.9,.3,1);
  max-width: 30rem; margin: 0 auto;
  border: 1px solid var(--line-strong); border-bottom: 0;
}
body.passos-aberto #veu { opacity: 1; pointer-events: auto; }
body.passos-aberto #como-instalar { transform: translateY(0); }
.passos-intro { margin-top: .7rem; font-size: .95rem; line-height: 1.6; }
.passos { margin: 1rem 0 0; padding: 0; list-style: none; counter-reset: passo; }
.passos li {
  counter-increment: passo; position: relative;
  padding: .55rem 0 .55rem 2.5rem; font-size: .93rem; line-height: 1.55;
  border-bottom: 1px solid var(--line);
}
.passos li:last-child { border-bottom: 0; }
.passos li::before {
  content: counter(passo); position: absolute; left: 0; top: .62rem;
  width: 1.65rem; height: 1.65rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  color: var(--bronze); border: 1px solid var(--bronze);
}
.passos .ico { width: 16px; height: 16px; vertical-align: -3px; color: var(--bronze); }