/* ============================================================
   UP Agência · eBook v2 — Premium Edition
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,400&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --blue:  #313CF0; --blue-h: #2730D0; --blue-deep: #1B1F8C;
  --ink:   #0A0A0F; --dark:   #05050F; --graphite: #1A1A22;
  --slate: #3D3D47; --steel: #6B6B75;
  --mute:  #9A9AA3; --line:  #E4E4E9; --paper: #F4F4F6; --bone: #FAFAFB; --white: #fff;
  --fh: 'Montserrat', system-ui, sans-serif;
  --fb: 'Inter', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* === VIEWER === */
html, body { height: 100%; background: #090909; overflow: hidden; font-family: var(--fb); }
.viewer { height: 100vh; display: flex; align-items: center; justify-content: center; }
.stage  { width: 794px; height: 1123px; transform-origin: center; position: relative; }

/* === NAV === */
.nav {
  position: fixed; bottom: 0; left: 0; right: 0; height: 54px;
  background: rgba(3,3,3,0.97); backdrop-filter: blur(20px);
  display: flex; align-items: center; justify-content: center; gap: 20px;
  z-index: 300; border-top: 1px solid rgba(255,255,255,0.04);
}
.nav-btn {
  width: 38px; height: 38px; border-radius: 6px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
  color: #fff; font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .1s;
}
.nav-btn:hover  { background: var(--blue); border-color: transparent; }
.nav-btn:active { transform: scale(.93); }
.nav-btn:disabled { opacity: .18; pointer-events: none; }
.nav-ctr { font-size: 11px; color: rgba(255,255,255,.35); letter-spacing: .14em; min-width: 66px; text-align: center; }
.nav-dots { display: flex; gap: 4px; align-items: center; }
.nav-dot  { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.14); transition: all .2s; }
.nav-dot.on { width: 16px; border-radius: 2px; background: var(--blue); }

/* === PAGE === */
.page {
  width: 794px; height: 1123px; position: absolute; top: 0; left: 0;
  overflow: hidden; display: none;
}
.page.active { display: block; }

/* Themes */
.pg-blue  { background: var(--blue); color: #fff; }
.pg-ink   { background: var(--ink);  color: #fff; }
.pg-dark  { background: var(--dark); color: #fff; }
.pg-white { background: #fff; color: var(--ink); }
.pg-paper { background: var(--paper); color: var(--ink); }

/* Premium dot grid on light pages */
.pg-white { background-color: #fff; background-image: radial-gradient(circle, rgba(49,60,240,.07) 1px, transparent 1px); background-size: 22px 22px; }
.pg-paper { background-color: var(--paper); background-image: radial-gradient(circle, rgba(49,60,240,.05) 1px, transparent 1px); background-size: 22px 22px; }

/* === CHROME === */
.pch {
  position: absolute; top: 0; left: 0; right: 0; height: 44px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 52px;
  font-family: var(--fb); font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.28);
}
.pg-white .pch { color: rgba(49,60,240,.5); border-bottom: 1px solid rgba(49,60,240,.1); }
.pg-paper .pch { color: var(--mute); border-bottom: 1px solid var(--line); }
.pg-ink .pch, .pg-dark .pch { border-bottom: 1px solid rgba(49,60,240,.14); }
.pg-blue .pch { color: rgba(255,255,255,.4); border-bottom: 1px solid rgba(255,255,255,.12); }

.pft {
  position: absolute; bottom: 0; left: 0; right: 0; height: 40px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 52px;
  font-family: var(--fb); font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.28);
}
.pg-white .pft { color: rgba(49,60,240,.4); border-top: 1px solid rgba(49,60,240,.1); }
.pg-paper .pft { color: var(--mute); border-top: 1px solid var(--line); }
.pg-ink .pft, .pg-dark .pft { border-top: 1px solid rgba(49,60,240,.18); }
.pg-blue .pft { color: rgba(255,255,255,.4); border-top: 1px solid rgba(255,255,255,.12); }

.pb {
  position: absolute; top: 44px; left: 0; right: 0; bottom: 40px;
  padding: 44px 52px; overflow: hidden;
}
.pb-full { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }

/* === TYPOGRAPHY === */
.eye  { font-family: var(--fb); font-size: 9px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,255,255,.45); display: block; margin-bottom: 12px; }
.pg-white .eye, .pg-paper .eye { color: var(--blue); }

.tdisp { font-family: var(--fh); font-weight: 900; font-size: 80px; line-height: .86; letter-spacing: -.04em; text-wrap: balance; }
.th1   { font-family: var(--fh); font-weight: 800; font-size: 50px; line-height: .91; letter-spacing: -.035em; text-wrap: balance; }
.th2   { font-family: var(--fh); font-weight: 700; font-size: 38px; line-height: .97; letter-spacing: -.025em; text-wrap: balance; }
.th3   { font-family: var(--fh); font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -.015em; }
.th4   { font-family: var(--fh); font-weight: 700; font-size: 15px; line-height: 1.3; letter-spacing: -.01em; }
.tlead { font-family: var(--fh); font-size: 19px; font-weight: 400; line-height: 1.5; color: rgba(255,255,255,.82); }
.pg-white .tlead, .pg-paper .tlead { color: var(--slate); }
.tbody { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.76); }
.pg-white .tbody, .pg-paper .tbody { color: var(--slate); }
.tsm   { font-size: 12px; line-height: 1.55; color: rgba(255,255,255,.5); }
.pg-white .tsm, .pg-paper .tsm { color: var(--mute); }
.tblue { color: var(--blue); }
strong { font-weight: 700; }

.div { width: 36px; height: 3px; background: var(--blue); border-radius: 2px; margin: 16px 0; }
.pg-blue .div { background: rgba(255,255,255,.45); }
.sep { width: 100%; height: 1px; background: rgba(255,255,255,.07); margin: 14px 0; }
.pg-white .sep, .pg-paper .sep { background: rgba(49,60,240,.1); }

/* === PULL QUOTE === */
.pull {
  font-family: var(--fh); font-weight: 700; font-size: 21px; line-height: 1.28;
  color: var(--blue); padding: 18px 0 18px 24px;
  border-left: 3px solid var(--blue); margin: 14px 0;
}
.pg-ink .pull, .pg-dark .pull { color: rgba(255,255,255,.9); border-left-color: var(--blue); }
.pg-blue .pull { color: rgba(255,255,255,.9); border-left-color: rgba(255,255,255,.5); }

/* === CARDS === */
.card {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 20px 22px;
}
.pg-white .card, .pg-paper .card {
  background: rgba(255,255,255,.9); border: 1px solid rgba(49,60,240,.12);
  box-shadow: 0 2px 14px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
.cnum { font-family: var(--fh); font-weight: 900; font-size: 40px; line-height: 1; color: var(--blue); margin-bottom: 6px; display: block; }
.pg-blue .cnum, .pg-ink .cnum, .pg-dark .cnum { color: rgba(255,255,255,.88); }

.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.g3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.col2 { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }

/* === LIST ITEMS === */
.li {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.07); font-size: 14px; line-height: 1.55;
}
.pg-white .li, .pg-paper .li { border-bottom-color: rgba(49,60,240,.08); color: var(--slate); }
.linum { font-family: var(--fh); font-weight: 800; font-size: 10px; color: var(--blue); min-width: 22px; padding-top: 2px; flex-shrink: 0; }
.pg-blue .linum { color: rgba(255,255,255,.65); }
.dot {
  width: 18px; height: 18px; border-radius: 50%; background: var(--blue);
  color: #fff; font-size: 8px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}
.pg-blue .dot { background: rgba(255,255,255,.22); }

/* === STATS === */
.srow { display: flex; align-items: stretch; }
.sblk { flex: 1; text-align: center; padding: 26px 14px; border-right: 1px solid rgba(255,255,255,.09); }
.sblk:last-child { border-right: none; }
.pg-white .sblk, .pg-paper .sblk { border-right-color: rgba(49,60,240,.1); }
.snum {
  font-family: var(--fh); font-weight: 900; font-size: 64px; line-height: .88;
  letter-spacing: -.04em; color: var(--blue); display: block; margin-bottom: 10px;
}
.pg-blue .snum, .pg-ink .snum, .pg-dark .snum { color: #fff; }

/* === HBOX / TIP === */
.hbox { background: var(--blue); color: #fff; border-radius: 12px; padding: 22px 26px; }
.pg-blue .hbox  { background: rgba(255,255,255,.14); }
.pg-ink  .hbox  { background: var(--blue); }
.pg-dark .hbox  { background: rgba(49,60,240,.22); border: 1px solid rgba(49,60,240,.4); }
.tip {
  border-left: 3px solid var(--blue); padding: 12px 18px;
  background: rgba(49,60,240,.07); border-radius: 0 8px 8px 0; font-size: 13px; line-height: 1.6;
}
.pg-white .tip, .pg-paper .tip { background: rgba(49,60,240,.05); }

/* === CHAPTER OPENER (no chrome) === */
.chapnum {
  font-family: var(--fh); font-weight: 900; font-size: 360px; line-height: 1; letter-spacing: -.08em;
  color: rgba(255,255,255,.035); position: absolute; right: -30px; bottom: 0;
  pointer-events: none; user-select: none; z-index: 0;
}
.opener-content {
  position: absolute; left: 52px; bottom: 80px; right: 400px; z-index: 2;
}
.opener-svg {
  position: absolute; right: 52px; top: 50%; transform: translateY(-52%); z-index: 2;
}

/* === ARROW DECO === */
.adeco { position: absolute; pointer-events: none; background-size: contain; background-repeat: no-repeat; background-position: center; }

/* === TOC === */
.trow { display: flex; align-items: center; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.pg-white .trow, .pg-paper .trow { border-bottom-color: rgba(49,60,240,.09); }
.tch  { font-family: var(--fb); font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--blue); min-width: 56px; }
.pg-blue .tch { color: rgba(255,255,255,.65); }
.ttit { font-family: var(--fh); font-weight: 600; font-size: 14.5px; flex: 1; padding: 0 14px; }
.tdots { flex: 1; height: 1px; border-bottom: 1px dashed rgba(255,255,255,.14); margin: 0 10px; }
.pg-white .tdots, .pg-paper .tdots { border-bottom-color: rgba(49,60,240,.14); }
.tpg  { font-family: var(--fh); font-weight: 800; font-size: 13px; color: var(--blue); }
.pg-blue .tpg { color: #fff; }

/* === BADGE === */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  background: rgba(255,255,255,.11); color: rgba(255,255,255,.75);
}
.pg-white .badge, .pg-paper .badge { background: var(--blue); color: #fff; }

/* === COVER VARIANTS === */
.cov-opt { position: absolute; inset: 0; display: none; overflow: hidden; }
.cov-opt.on { display: block; }
.split-l { position: absolute; top: 0; left: 0; bottom: 0; width: 52%; background: var(--blue); overflow: hidden; }
.split-r { position: absolute; top: 0; right: 0; bottom: 0; width: 48%; background: #fff; overflow: hidden; }