/* ─────────────────────────────────────────────────────────────────────
   MarketBook — design system compartilhado.

   Os templates continuam autocontidos (cada um com seu <style> inline e
   sem base template), mas todos carregam este arquivo logo DEPOIS do
   <style> inline — então os tokens e componentes daqui sobrescrevem os
   de lá por ordem de cascata. Só mexa aqui em classes que são de fato
   compartilhadas entre páginas (nav, botões, cartão de ebook, modal,
   formulário, paginação, rodapé); layout específico de uma página fica
   no <style> da própria página.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --ink:      #14161B;
  --ink-2:    #262A33;
  --paper:    #FAF8F4;
  --cream:    #F2EEE6;
  --gold:     #D99A2B;
  --gold-lt:  #F0B44C;
  --amber:    #A86B12;
  --rust:     #B42318;
  --forest:   #1E7A55;
  --mist:     #676B73;
  --card-bg:  #FFFFFF;
  --border:   #E7E1D5;
  --shadow:   0 1px 2px rgba(20,22,27,.05), 0 10px 28px -10px rgba(20,22,27,.18);
  --radius:   12px;
  --serif:    'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:     'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:     'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --link:     #0B6E83;
  --ring:     0 0 0 3px rgba(217,154,43,.28);
  --nav-bg:   rgba(16,18,23,.94);
}

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01';
}
::selection { background: rgba(240,180,76,.35); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

h1, h2, h3, .section-title, .modal-title {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 600;
  letter-spacing: -.015em;
}

/* ── NAV ─────────────────────────────────────────── */
nav {
  background: var(--nav-bg) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.nav-brand {
  display: inline-flex; align-items: center; gap: 0;
  font-family: var(--serif) !important;
  font-weight: 600; font-size: 1.32rem !important;
  letter-spacing: -.02em; color: #fff !important;
  text-decoration: none;
}
.nav-brand::before {
  content: '\f02d';
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  font-size: .78rem; color: var(--ink);
  width: 30px; height: 30px; border-radius: 9px; margin-right: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--gold-lt), var(--gold));
  box-shadow: 0 4px 14px -4px rgba(240,180,76,.6), inset 0 1px 0 rgba(255,255,255,.35);
}
.nav-brand span { color: var(--gold-lt) !important; font-style: italic; font-weight: 500; }

.nav-btn {
  font-family: var(--sans) !important;
  font-size: .84rem !important; font-weight: 500;
  border-radius: 999px !important;
  letter-spacing: .005em;
  display: inline-flex; align-items: center; gap: 8px;
}
nav .nav-btn.ghost, #nav-links .nav-btn.ghost, .nav-right .nav-btn.ghost { color: rgba(255,255,255,.78) !important; }
nav .nav-btn.ghost:hover, #nav-links .nav-btn.ghost:hover, .nav-right .nav-btn.ghost:hover { color: #fff !important; background: rgba(255,255,255,.08) !important; }
.nav-btn.primary, .nav-btn.accent {
  background: linear-gradient(180deg, var(--gold-lt), var(--gold)) !important;
  color: var(--ink) !important; font-weight: 600;
  box-shadow: 0 6px 18px -8px rgba(240,180,76,.7), inset 0 1px 0 rgba(255,255,255,.35);
}
.nav-btn.primary:hover, .nav-btn.accent:hover { filter: brightness(1.05); }
.nav-user, .nav-user strong { color: rgba(255,255,255,.72); }
nav .nav-user strong { color: #fff !important; }

/* O drawer mobile reaproveita o HTML dos links do desktop (que são claros
   sobre fundo escuro) — então ele também é escuro, pra não sumir texto. */
.mobile-drawer {
  background: #16181E !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-top: none !important;
  box-shadow: -12px 24px 48px rgba(0,0,0,.35) !important;
  padding: 14px !important;
}
.mobile-drawer .nav-btn { justify-content: flex-start; border-radius: 10px !important; padding: 11px 14px !important; }
.mobile-drawer .nav-btn.ghost { color: rgba(255,255,255,.82) !important; }
.mobile-drawer .nav-btn.ghost:hover { background: rgba(255,255,255,.07) !important; color: #fff !important; }
.mobile-drawer .nav-btn i { width: 18px; text-align: center; color: var(--gold-lt); opacity: .9; }
.mobile-drawer hr { border-top-color: rgba(255,255,255,.08) !important; }
.mobile-drawer .nav-user { padding: 6px 14px 10px !important; }
.mobile-overlay { background: rgba(10,11,14,.5) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* ── BUTTONS ─────────────────────────────────────── */
.btn {
  font-family: var(--sans);
  font-weight: 600;
  border-radius: 10px;
  letter-spacing: .005em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn-sm { border-radius: 9px; }
.btn-gold {
  background: linear-gradient(180deg, var(--gold-lt), var(--gold)) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(168,107,18,.35) !important;
  box-shadow: 0 8px 22px -10px rgba(217,154,43,.8), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-gold:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 12px 26px -10px rgba(217,154,43,.9), inset 0 1px 0 rgba(255,255,255,.35) !important; }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--ink-2); transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(20,22,27,.5); }
.btn-outline { background: var(--card-bg); border: 1px solid var(--border); color: var(--ink); }
.btn-outline:hover { border-color: #CFC6B5; background: var(--cream); }
.btn-forest { background: var(--forest); }
.btn-forest:hover { background: #17664A; }
.btn-danger { background: var(--rust) !important; color: #fff !important; border: 1px solid var(--rust) !important; }
.btn-danger:hover { background: #912018 !important; border-color: #912018 !important; }

/* ── PAGE HERO — cabeçalho escuro das páginas de listagem
   (/series, /series/<id>, /catalogo) ─────────────── */
.page-hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(55% 90% at 90% 0%, rgba(240,180,76,.18), transparent 60%),
    radial-gradient(45% 70% at 0% 120%, rgba(11,110,131,.20), transparent 60%),
    linear-gradient(180deg, #101217, #171A21);
  color: #fff;
  padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 48px) clamp(36px, 5vw, 56px);
}
.page-hero-inner { max-width: 1200px; margin: 0 auto; }
.page-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-lt); margin-bottom: 14px;
}
.page-hero-eyebrow a { color: rgba(255,255,255,.6); text-decoration: none; }
.page-hero-eyebrow a:hover { color: #fff; }
.page-hero-title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.06; letter-spacing: -.035em;
  margin-bottom: 14px;
}
.page-hero-title em { font-style: italic; font-weight: 400; color: var(--gold-lt); }
.page-hero-sub { color: rgba(255,255,255,.66); font-size: 1.02rem; line-height: 1.7; max-width: 620px; }
.page-hero-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.page-hero-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10);
  font-size: .8rem; color: rgba(255,255,255,.82);
}
.page-hero-chip i { color: var(--gold-lt); font-size: .78rem; }

/* ── EBOOK CARD — capa com cara de livro físico ──── */
.ebook-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none; color: inherit;
}
.ebook-cover {
  aspect-ratio: 2/3 !important;
  border-radius: 3px 7px 7px 3px;
  overflow: hidden;
  background: linear-gradient(160deg, #EFE9DE, #E3DBCC);
  box-shadow:
    0 1px 1px rgba(20,16,10,.08),
    0 6px 12px -4px rgba(20,16,10,.18),
    0 18px 30px -14px rgba(20,16,10,.35);
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease;
}
.ebook-cover::after {
  /* lombada + brilho sutil, dá volume à capa */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.22) 0, rgba(255,255,255,.18) 2px, rgba(0,0,0,.06) 5px, transparent 9px),
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 30%);
  border-radius: inherit;
}
.ebook-card:hover .ebook-cover {
  transform: translateY(-5px);
  box-shadow:
    0 2px 2px rgba(20,16,10,.08),
    0 14px 24px -8px rgba(20,16,10,.25),
    0 30px 44px -20px rgba(20,16,10,.45);
}
.ebook-cover-icon { font-size: 2.4rem !important; opacity: .35 !important; }
.ebook-body { padding: 12px 2px 0 !important; background: transparent; }
.ebook-title {
  font-family: var(--sans) !important;
  font-size: .86rem !important; font-weight: 600;
  line-height: 1.35 !important; color: var(--ink);
  letter-spacing: -.003em;
}
.ebook-card:hover .ebook-title { text-decoration: none; color: var(--amber); }
.ebook-price { font-family: var(--sans); font-size: .9rem !important; font-weight: 700; color: var(--ink); margin-top: 2px; }
.ebook-price.free { color: var(--forest); }
.ebook-author { color: var(--mist); }

/* ── TAGS / PILLS ────────────────────────────────── */
.tag {
  background: var(--cream); color: #5A5E66;
  border: 1px solid var(--border);
  font-weight: 500; letter-spacing: .01em;
}

/* ── SECTION HEADERS ─────────────────────────────── */
.section-header { border-bottom-color: var(--border) !important; }
.section-title { font-size: clamp(1.55rem, 2.6vw, 2rem) !important; font-weight: 600 !important; }

/* ── MODAL ───────────────────────────────────────── */
.modal-backdrop { background: rgba(14,15,19,.55) !important; }
.modal {
  border: 1px solid rgba(20,22,27,.06) !important;
  border-radius: 18px !important;
  box-shadow: 0 40px 90px -20px rgba(14,15,19,.45) !important;
}
.modal-close { background: var(--cream) !important; }
.modal-close:hover { background: #E7E0D2 !important; }

/* ── FORMS ───────────────────────────────────────── */
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=url], input[type=search], textarea, select {
  font-family: var(--sans);
  border-color: var(--border);
  background: var(--card-bg);
  border-radius: 10px;
}
input:focus, textarea:focus, select:focus { border-color: var(--gold) !important; box-shadow: var(--ring); outline: none; }
label { color: #4D5159; }

.select2-container--default .select2-selection--single { border: 1px solid var(--border) !important; border-radius: 10px !important; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single { border-color: var(--gold) !important; box-shadow: var(--ring) !important; }
.select2-dropdown { border: 1px solid var(--border) !important; border-radius: 12px !important; box-shadow: var(--shadow) !important; }
.select2-container--default .select2-results__option[aria-selected=true] { background: var(--cream) !important; color: var(--ink) !important; font-weight: 600; }
.select2-container--default .select2-results__option--highlighted { background: #FBF3E3 !important; color: var(--ink) !important; }

/* ── PAGINATION ──────────────────────────────────── */
.page-btn {
  border: 1px solid var(--border) !important; border-radius: 10px !important;
  background: var(--card-bg); color: var(--ink);
  font-weight: 500;
}
.page-btn:hover:not(:disabled) { border-color: #CFC6B5 !important; background: var(--cream) !important; }
.page-btn.active { background: var(--ink) !important; border-color: var(--ink) !important; color: #fff !important; }

/* ── FEEDBACK ────────────────────────────────────── */
.spinner { border-color: var(--cream) !important; border-top-color: var(--gold) !important; }
.toast { border-radius: 12px !important; box-shadow: 0 18px 40px -12px rgba(14,15,19,.5) !important; font-family: var(--sans); }
.empty-block .icon { color: var(--gold); opacity: .55 !important; }

/* ── FOOTER ──────────────────────────────────────── */
footer.site-footer, .site-footer {
  background: var(--ink) !important;
  color: rgba(255,255,255,.55) !important;
  border-top: none !important;
  padding: 36px clamp(16px,4vw,48px) !important;
  font-size: .82rem !important;
  margin-top: 24px;
}
footer.site-footer a, .site-footer a, .site-footer-links a { color: rgba(255,255,255,.72) !important; text-decoration: none; }
footer.site-footer a:hover, .site-footer a:hover { color: var(--gold-lt) !important; text-decoration: none !important; }
.site-footer-legal { opacity: .7; }

/* ── SCROLLBARS ──────────────────────────────────── */
* { scrollbar-color: rgba(20,22,27,.22) transparent; }
*::-webkit-scrollbar-thumb { background: rgba(20,22,27,.2); }
*::-webkit-scrollbar-thumb:hover { background: rgba(20,22,27,.35); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── NAVEGAÇÃO NO CELULAR ─────────────────────────────────────────
   Barra inferior fixa com os destinos principais (partials/_bottom_nav.html).
   Em telas pequenas, o bloco de login do topo some: a barra inferior
   já tem "Conta", e o hambúrguer continua com o resto.
   Seletor nav.bottom-nav + !important: as páginas têm uma regra global de
   "nav" (fundo escuro, sticky no topo) que sem isso venceria esta barra. */
:root { --bottom-nav-h: 0px; }
nav.bottom-nav { display: none; }
@media (max-width: 767.98px) {
  :root { --bottom-nav-h: calc(60px + env(safe-area-inset-bottom)); }
  .nav-right { display: none !important; }
  nav.bottom-nav {
    position: fixed !important; top: auto !important; left: 0; right: 0; bottom: 0; z-index: 990;
    display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr));
    height: var(--bottom-nav-h); padding: 0 0 env(safe-area-inset-bottom);
    background: #fff !important; border: 0 !important; border-top: 1px solid var(--border, #e5e7eb) !important;
    box-shadow: 0 -4px 16px -8px rgba(15,23,42,.18);
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  nav.bottom-nav a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-height: 56px; min-width: 44px; padding: 6px 2px;
    color: #5b6170 !important; text-decoration: none; font-size: .68rem; line-height: 1.1;
  }
  nav.bottom-nav a i { font-size: 1.05rem; }
  nav.bottom-nav a[aria-current="page"] { color: #14161B !important; font-weight: 600; }
  nav.bottom-nav a[aria-current="page"] i { color: #D99A2B; }
  body { padding-bottom: var(--bottom-nav-h); }
}

/* modo foco (leitor): sem barra inferior, a leitura usa a tela inteira */
body.modo-foco { --bottom-nav-h: 0px; }
body.modo-foco nav.bottom-nav { display: none !important; }

/* ── UTILITÁRIOS (valores que se repetiam como style="" inline) ─── */
.flex-1 { flex: 1; }
.pt-32 { padding-top: 32px; }
.mt-12 { margin-top: 12px; }
.mb-16 { margin-bottom: 16px; }
.eyebrow-sm { font-size: .72rem; color: var(--mist); font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.titulo-sm { font-family: var(--serif); font-size: 1.5rem; margin-top: 4px; }
.kicker-gold { font-family: var(--mono); font-size: .7rem; color: var(--gold); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 4px; }
.divisor { border: none; border-top: 1px solid var(--border); margin: 8px 0; }
.caixa-stat { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 20px; flex: 1; min-width: 140px; }
.col-tudo { grid-column: 1 / -1; }
.mb-20 { margin-bottom: 20px; }
.mt-16 { margin-top: 16px; }
.mt-10 { margin-top: 10px; }
.linha-centro { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.texto-branco { color: #fff; }

/* ── COMPONENTES ──────────────────────────────────────────────────
   :where() tem especificidade zero: uma página que ainda define a regra
   com a sua (ex.: empty-block de 64px) continua vencendo esta. */
:where(.page-eyebrow) { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; color: var(--gold); text-transform: uppercase; margin-bottom: 10px; }
:where(.page-title) { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.4rem); letter-spacing: -.02em; margin-bottom: 8px; }
:where(.page-sub) { color: var(--mist); font-size: .92rem; margin-bottom: 24px; max-width: 560px; }
:where(.empty-block) { text-align: center; padding: 48px 16px; color: var(--mist); }
:where(.empty-block .icon) { font-size: 2.4rem; margin-bottom: 10px; opacity: .4; }

/* Esqueleto: placeholder de carregamento no lugar do spinner (respeita reduced-motion) */
.skeleton {
  background: linear-gradient(90deg, #ece8df 25%, #f7f5f0 50%, #ece8df 75%);
  background-size: 200% 100%; border-radius: 12px;
  animation: skel-brilho 1.3s ease-in-out infinite;
}
.skel-capa { aspect-ratio: 2 / 3; }
@keyframes skel-brilho { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
.skel-serie { aspect-ratio: 4 / 5; }

/* Pílula de status: sempre com texto (cor nunca é o único sinal) */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 100px;
        font-size: .7rem; font-weight: 600; letter-spacing: .03em; line-height: normal; white-space: nowrap; }
.pill-ok { background: rgba(45,90,61,.12); color: var(--forest); }
.pill-alerta { background: rgba(240,136,4,.12); color: var(--amber); }


/* ── ALVOS DE TOQUE NO CELULAR (Etapa 4) ─────────────────────────
   Botão, paginação, fechar, menu e links de ação com 44px no mínimo.
   Campos com 16px: abaixo disso o Safari do iPhone dá zoom ao focar. */
@media (max-width: 767.98px) {
  .btn, .btn-sm { min-height: 44px; }
  .page-btn, .modal-close, .hamburger { min-width: 44px; min-height: 44px; }
  .page-btn { display: inline-flex; align-items: center; justify-content: center; }
  .nav-brand { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-control, .form-select { min-height: 44px; font-size: 16px; }
  .band-link, .shelf-see-all, .shelf-title a, .page-hero-eyebrow a, .hero-eyebrow a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
}

/* ── MODAL DE COMPRA NO CELULAR (folha que sobe de baixo) ───────────
   Só o modal de compra PIX usa .modal-sheet. QR maior; botões de 48px. */
@media (max-width: 767.98px) {
  .modal-sheet { align-items: flex-end; padding: 0 0 var(--bottom-nav-h); }   /* a folha para acima da barra de navegação */
  .modal-sheet .modal {
    max-width: none; max-height: 92vh; border-radius: 20px 20px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal-sheet .modal::before {
    content: ""; display: block; width: 40px; height: 4px; border-radius: 4px;
    background: var(--border, #e5e7eb); margin: 10px auto 0;
  }
  .modal-sheet .qr-img { width: min(260px, 72vw); height: min(260px, 72vw); }
  .modal-sheet .btn { min-height: 48px; }
  .modal-sheet .modal-close { min-width: 44px; min-height: 44px; }
}


/* Grade de cards: título longo sem espaço quebra dentro do card, em vez de alargar a célula */
.ebook-grid > *, .series-grid > * { min-width: 0; }
.ebook-title { overflow-wrap: anywhere; }