/* =========================================================
   Pastora Márcia Conde — Modern editorial theme
   Palette: warm cream + ink + terracotta gold
   ========================================================= */
:root{
  --bg: #f6f1e8;
  --bg-2: #efe7d8;
  --ink: #1a1814;
  --ink-soft: #3b372f;
  --muted: #6b6354;
  --line: rgba(26,24,20,.12);
  --accent: #b8754a;
  --accent-dark: #8c5230;
  --accent-soft: #e9d6c2;
  --cream: #fbf7ef;
  --dark: #1c1a16;
  --dark-2: #25221d;
  --radius: 18px;
  --radius-sm: 12px;
  --container: 1200px;
  --shadow-sm: 0 1px 2px rgba(26,24,20,.04), 0 4px 14px rgba(26,24,20,.06);
  --shadow-md: 0 10px 30px rgba(26,24,20,.10), 0 2px 8px rgba(26,24,20,.05);
  --shadow-lg: 0 30px 60px rgba(26,24,20,.18);
  /* Escala de espaçamento — nenhum valor solto no CSS abaixo */
  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 2.5rem;  --space-8: 3rem;    --space-10: 4rem;

  /* Motion */
  --dur-fast: 140ms;  --dur-base: 240ms;  --dur-slow: 600ms;
  --ease-out: cubic-bezier(.22,.61,.36,1);

  /* Superfícies e estados derivados do acento */
  --accent-subtle: rgba(184,117,74,.10);
  --accent-ring:   rgba(184,117,74,.22);
  --ok:            #4a7c4a;
  --ok-soft:       #e4f0e2;

  --serif: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  font-weight:400;
  font-size:17px;
  letter-spacing:-.005em;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 1.5rem;
}

/* Ritmo vertical das seções que usam a classe genérica (projeto, 404).
   Sem isto elas ficam coladas umas nas outras. */
.section{padding:clamp(3.2rem, 7vw, 5.5rem) 0}

/* ---------- Typography helpers ---------- */
.section-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2rem, 4.2vw, 3.4rem);
  line-height:1.05;
  letter-spacing:-.02em;
  margin:.4rem 0 1.2rem;
  color:var(--ink);
}
.section-title em{
  font-style:italic;
  font-weight:400;
  color:var(--accent);
}
.section-title.light{color:var(--cream)}
.section-title.light em{color:var(--accent-soft)}
.eyebrow{
  display:inline-block;
  font-family:var(--sans);
  text-transform:uppercase;
  font-size:.72rem;
  letter-spacing:.22em;
  font-weight:600;
  color:var(--accent-soft);
  padding:.4rem .7rem;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.04);
}
.eyebrow.dark{
  color:var(--accent-dark);
  border-color:var(--line);
  background:rgba(184,117,74,.07);
}
.lede{
  font-family:var(--serif);
  font-size:1.35rem;
  line-height:1.45;
  color:var(--ink);
  font-weight:400;
  letter-spacing:-.01em;
  margin:0 0 1.2rem;
}
.inline-link{
  color:var(--accent-dark);
  border-bottom:1px solid var(--accent);
  font-weight:500;
}
.inline-link:hover{color:var(--ink)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:.85rem 1.4rem;
  border-radius:999px;
  font-weight:500;
  font-size:.95rem;
  letter-spacing:-.005em;
  transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
  cursor:pointer;
  border:1px solid transparent;
  font-family:var(--sans);
}
.btn.primary{
  background:var(--ink);
  color:var(--cream);
  box-shadow:var(--shadow-sm);
}
.btn.primary:hover{background:var(--accent-dark);transform:translateY(-1px)}
.btn.ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
}
.btn.ghost:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn.small{padding:.55rem 1rem;font-size:.85rem}

/* ---------- Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(246,241,232,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.1rem 1.5rem;
}
.brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  color:var(--ink);
  line-height:1.2;
}
.brand-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--serif);
  font-weight:600;
  font-size:.95rem;
  letter-spacing:.02em;
  flex-shrink:0;
  line-height:1;
}
.brand-mark.big{width:48px;height:48px;font-size:1.1rem}
.brand-mark .amp{color:var(--accent);margin:0 1px}
.brand-name{
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:500;
  letter-spacing:-.01em;
  line-height:1.3;
  color:var(--ink);
  padding:.1rem 0;
}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav a{
  font-size:.92rem;
  color:var(--ink-soft);
  font-weight:500;
  position:relative;
  transition:color .2s;
}
.nav a:hover{color:var(--ink)}
.nav a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:1px;
  background:var(--accent);
  transition:width .25s ease;
}
.nav a:not(.nav-cta):hover::after{width:100%}
.nav-cta{
  padding:.5rem 1rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--cream);
}
.nav-cta:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.nav-toggle{
  display:none;
  background:none;
  border:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:8px;
}
.nav-toggle span{
  width:24px;
  height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .25s, opacity .25s;
}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:5rem 0 3rem;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  top:-200px; right:-200px;
  width:600px; height:600px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(184,117,74,.18) 0%, transparent 70%);
  pointer-events:none;
  z-index:0;
}
.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:4rem;
  align-items:center;
}
.hero-content .eyebrow{margin-bottom:1.2rem}
.hero-title{
  font-family:var(--serif);
  font-size:clamp(2.6rem, 5.6vw, 4.6rem);
  line-height:1.02;
  letter-spacing:-.025em;
  font-weight:500;
  margin:.4rem 0 1.4rem;
  color:var(--ink);
}
.hero-title em{
  font-style:italic;
  font-weight:400;
  color:var(--accent);
}
.hero-sub{
  font-size:1.1rem;
  color:var(--ink-soft);
  max-width:540px;
  margin:0 0 2rem;
}
.hero-ctas{display:flex;gap:.75rem;flex-wrap:wrap}
.hero-meta{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin-top:3rem;
  padding-top:2rem;
  border-top:1px solid var(--line);
  max-width:540px;
}
.hero-meta div{display:flex;flex-direction:column}
.hero-meta strong{
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.01em;
}
.hero-meta span{
  font-size:.78rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-top:.2rem;
}

.hero-art{position:relative}
.hero-art-frame{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  aspect-ratio: 4/5;
  background:var(--accent-soft);
}
.hero-art-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s ease;
}
.hero-art-frame:hover img{transform:scale(1.03)}
.hero-art-badge{
  position:absolute;
  bottom:18px;
  left:18px;
  right:18px;
  padding:1.2rem 1.3rem 1.1rem;
  background:rgba(28,26,22,.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius:14px;
  color:var(--cream);
  border:1px solid rgba(255,255,255,.08);
}
.hero-art-badge .badge-quote{
  font-family:var(--serif);
  font-size:3rem;
  line-height:.4;
  color:var(--accent);
  display:block;
  margin-bottom:.3rem;
}
.hero-art-badge p{
  margin:0;
  font-family:var(--serif);
  font-size:1.02rem;
  line-height:1.4;
  font-style:italic;
  letter-spacing:-.01em;
}

.marquee{
  margin-top:4rem;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  padding:1.1rem 0;
  background:rgba(255,255,255,.3);
}
.marquee-track{
  display:inline-flex;
  gap:1.6rem;
  white-space:nowrap;
  animation: marquee 38s linear infinite;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.4rem;
  color:var(--ink-soft);
}
.marquee-track span{flex-shrink:0}
.marquee-track span:nth-child(even){color:var(--accent)}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ---------- About ---------- */
.about{
  padding:6rem 0 5rem;
  position:relative;
}
.about-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:4rem;
  align-items:start;
}
.about-side{position:sticky;top:100px}
.about-body p{
  color:var(--ink-soft);
  margin:0 0 1.1rem;
  font-size:1.02rem;
}
.about-pills{
  list-style:none;
  padding:0;
  margin:2rem 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.about-pills li{
  font-size:.85rem;
  padding:.5rem .9rem;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink-soft);
}

/* ---------- Books ---------- */
.books{
  padding:5rem 0 6rem;
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.books-head{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:3rem;
  align-items:end;
  margin-bottom:3.5rem;
}
.books-intro{
  color:var(--ink-soft);
  font-size:1.02rem;
  margin:0;
  padding-bottom:.6rem;
}

.books-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.8rem;
}
.book-card{
  background:var(--cream);
  border-radius:var(--radius);
  padding:1.6rem;
  border:1px solid var(--line);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
}
.book-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:rgba(184,117,74,.35);
}
.book-cover{
  width:100%;
  aspect-ratio: 3/4;
  object-fit:cover;
  border-radius:var(--radius-sm);
  margin-bottom:1.2rem;
  background:var(--accent-soft);
  box-shadow:var(--shadow-sm);
}
.book-tag{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:600;
  color:var(--accent-dark);
  margin-bottom:.6rem;
}
.book-tag::before{
  content:'';
  width:6px;height:6px;
  background:var(--accent);
  border-radius:50%;
}
.book-info h3{
  font-family:var(--serif);
  font-size:1.45rem;
  line-height:1.15;
  margin:0 0 .6rem;
  font-weight:500;
  letter-spacing:-.015em;
  color:var(--ink);
}
.book-info p{
  margin:0 0 1.3rem;
  color:var(--ink-soft);
  font-size:.95rem;
  flex:1;
}
.book-actions{
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
}
.book-actions .btn{flex:1;min-width:0}
.tg-mini{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--accent);
  color:var(--cream);
  flex-shrink:0;
  transition:background .2s;
}
.tg-mini:hover{background:var(--accent-dark)}
.tg-mini svg{width:18px;height:18px}

/* ---------- Telegram section ---------- */
.telegram{
  background:var(--dark);
  color:var(--cream);
  padding:6rem 0;
  position:relative;
  overflow:hidden;
}
.telegram::before{
  content:'';
  position:absolute;
  top:-100px;left:-100px;
  width:500px;height:500px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(184,117,74,.22) 0%, transparent 65%);
  pointer-events:none;
}
.telegram-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:4rem;
  align-items:center;
  position:relative;
  z-index:1;
}
.telegram p{color:rgba(251,247,239,.72);font-size:1.02rem}
.telegram .btn.primary{background:var(--accent);color:var(--ink)}
.telegram .btn.primary:hover{background:var(--accent-soft)}
.telegram-list{
  list-style:none;
  padding:0;
  margin:1.6rem 0 2.2rem;
  display:flex;
  flex-direction:column;
  gap:.9rem;
}
.telegram-list li{
  display:flex;
  align-items:baseline;
  gap:1rem;
  padding:.9rem 0;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:1.02rem;
  color:rgba(251,247,239,.88);
}
.telegram-list li:last-child{border-bottom:1px solid rgba(255,255,255,.08)}
.telegram-list span{
  font-family:var(--serif);
  color:var(--accent);
  font-size:.95rem;
  font-style:italic;
  min-width:24px;
}
.telegram-card{
  background:var(--dark-2);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:2rem;
  box-shadow:var(--shadow-lg);
}
.telegram-card-top{
  display:flex;
  align-items:center;
  gap:1rem;
  padding-bottom:1.4rem;
  margin-bottom:1.4rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.tg-icon{
  width:46px;height:46px;
  background:var(--accent);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
  flex-shrink:0;
}
.tg-icon svg{width:22px;height:22px}
.telegram-card-top strong{
  display:block;
  font-family:var(--serif);
  font-size:1.15rem;
  font-weight:500;
  color:var(--cream);
}
.telegram-card-top span{
  font-size:.82rem;
  color:rgba(251,247,239,.55);
}
.telegram-card-body{
  font-family:var(--serif);
  font-size:1.18rem;
  line-height:1.5;
  font-style:italic;
  color:rgba(251,247,239,.92);
  margin:0 0 1rem;
  letter-spacing:-.01em;
}
.telegram-card-author{
  font-size:.85rem;
  color:rgba(251,247,239,.55);
  letter-spacing:.04em;
}

/* ---------- Contact ---------- */
.contact{
  padding:6rem 0 5rem;
  text-align:center;
}
.contact-inner{
  max-width:720px;
  margin:0 auto;
}
.contact .section-title{margin-top:.8rem}
.contact p{color:var(--ink-soft);font-size:1.05rem;margin:0 auto 2rem;max-width:560px}
.contact-actions{
  display:flex;
  gap:.8rem;
  justify-content:center;
  flex-wrap:wrap;
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--dark);
  color:rgba(251,247,239,.72);
  padding:4rem 0 2rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr .8fr .8fr;
  gap:3rem;
  padding-bottom:3rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-grid p{
  margin:1rem 0 0;
  font-size:.92rem;
  max-width:340px;
  color:rgba(251,247,239,.6);
}
.footer-grid strong{
  display:block;
  color:var(--cream);
  font-family:var(--serif);
  font-size:1rem;
  font-weight:500;
  margin-bottom:1rem;
  letter-spacing:.02em;
}
.footer-grid a{
  display:block;
  font-size:.92rem;
  color:rgba(251,247,239,.62);
  padding:.3rem 0;
  transition:color .2s;
}
.footer-grid a:hover{color:var(--accent)}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:1.5rem;
  font-size:.82rem;
  color:rgba(251,247,239,.4);
}
.footer-bottom p{margin:0}
.credit{font-style:italic;font-family:var(--serif)}

/* ---------- Book detail page ---------- */
/* =====================================================================
   PÁGINA DO LIVRO — light editorial, um acento, densidade de loja
   ===================================================================== */

.book-page{padding:var(--space-10) 0 var(--space-8)}
.book-page-grid{
  display:grid;
  grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:var(--space-8) var(--space-10);
  align-items:start;
}

/* ---------- Capa ---------- */
.book-rail{position:sticky;top:var(--space-7)}
.book-cover-frame{
  margin:0;padding:var(--space-3);
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
}
.book-cover-frame img{
  display:block;width:100%;aspect-ratio:3/4;object-fit:cover;
  border-radius:calc(var(--radius) - var(--space-3));
  background:var(--accent-soft);
}

/* ---------- Cabeçalho editorial ---------- */
.book-page-info .crumbs{
  display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
  margin-bottom:var(--space-5);
  font-family:var(--sans);font-size:.83rem;color:var(--muted);
}
.book-page-info .crumbs a:hover{color:var(--accent-dark)}
.book-page-info .crumbs strong{color:var(--ink);font-weight:500}

.eyebrow-pill{
  display:inline-flex;align-items:center;gap:var(--space-2);
  padding:var(--space-1) var(--space-3);
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-dark);
  background:var(--accent-subtle);
  border:1px solid var(--accent-ring);
  border-radius:999px;
}
.eyebrow-pill.sutil{color:var(--muted);background:transparent;border-color:var(--line)}

.book-title{
  margin:var(--space-4) 0 var(--space-4);
  font-family:var(--serif);font-weight:600;
  font-size:clamp(2.1rem,4.6vw,3.2rem);
  line-height:1.08;letter-spacing:-.02em;color:var(--ink);
}
.book-lede{
  margin:0 0 var(--space-6);max-width:62ch;
  font-family:var(--serif);font-size:clamp(1.08rem,1.7vw,1.3rem);
  line-height:1.6;color:var(--ink-soft);
}

/* ---------- Caixa de compra ---------- */
.buybox{
  margin:0 0 var(--space-8);padding:var(--space-6);
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.buybox-title{
  display:flex;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;
  margin:0 0 var(--space-4);
  font-family:var(--serif);font-size:1.22rem;font-weight:600;color:var(--ink);
}
.buybox-title-nota{
  font-family:var(--sans);font-size:.76rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent);
}
.buybox-opcoes{display:grid;gap:var(--space-3)}

.buyopt{
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  transition:border-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.buyopt.ativo{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-subtle)}
.buyopt-main{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:var(--space-1) var(--space-4);
  padding:var(--space-4) var(--space-5);cursor:pointer;margin:0;
}
.buyopt-main input{position:absolute;opacity:0;width:0;height:0}
.buyopt-check{
  display:grid;place-items:center;width:22px;height:22px;
  border:1.5px solid var(--line);border-radius:6px;background:#fff;
  color:transparent;
  transition:background var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
}
.buyopt-check svg{width:13px;height:13px}
.buyopt-main input:checked + .buyopt-check{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.buyopt-main input:focus-visible + .buyopt-check{
  outline:2px solid var(--accent);outline-offset:2px;
}
.buyopt-texto{display:flex;flex-direction:column;gap:2px;min-width:0}
.buyopt-nome{font-family:var(--sans);font-size:.97rem;font-weight:600;color:var(--ink)}
.buyopt-obs{font-family:var(--sans);font-size:.8rem;line-height:1.45;color:var(--muted)}
.buyopt-obs strong{color:var(--accent-dark)}
.buyopt-preco{
  font-family:var(--serif);font-size:1.32rem;font-weight:600;
  color:var(--accent-dark);white-space:nowrap;
}

.buyopt-qtd{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-3) var(--space-5);
  border-top:1px solid var(--line);
}
.buyopt-qtd-rotulo{font-family:var(--sans);font-size:.82rem;color:var(--muted)}
.stepper{
  display:flex;align-items:center;
  border:1px solid var(--line);border-radius:999px;background:#fff;overflow:hidden;
}
.stepper-btn{
  width:34px;height:34px;border:none;background:transparent;cursor:pointer;
  font-size:1.05rem;line-height:1;color:var(--ink-soft);
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.stepper-btn:hover{background:var(--accent-subtle);color:var(--accent-dark)}
.stepper input{
  width:42px;height:34px;padding:0;text-align:center;
  border:none;border-inline:1px solid var(--line);border-radius:0;background:transparent;
  font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--ink);
  -moz-appearance:textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper input:focus{outline:none;background:var(--accent-subtle)}

.buybox-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);
  margin-top:var(--space-5);padding-top:var(--space-4);
  border-top:1px solid var(--line);
  font-family:var(--sans);font-size:.95rem;color:var(--ink-soft);
}
.buybox-total small{font-size:.8rem;color:var(--muted);font-weight:400}
.buybox-total strong{
  font-family:var(--serif);font-size:1.95rem;font-weight:600;
  color:var(--ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}

.btn-comprar{
  display:flex;align-items:center;justify-content:center;gap:var(--space-3);
  width:100%;margin-top:var(--space-4);padding:1.05rem var(--space-6);
  font-family:var(--sans);font-size:1rem;font-weight:600;letter-spacing:.01em;
  color:var(--cream);background:var(--accent);
  border:none;border-radius:var(--radius-sm);cursor:pointer;
  box-shadow:0 1px 2px rgba(26,24,20,.10);
  transition:background var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
.btn-comprar:hover{background:var(--accent-dark);box-shadow:var(--shadow-md)}
.btn-comprar:active{transform:scale(.99)}
.btn-comprar:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn-seta{width:19px;height:19px;transition:transform var(--dur-fast) var(--ease-out)}
.btn-comprar:hover .btn-seta{transform:translateX(3px)}

.buybox-erro{
  margin:var(--space-3) 0 0;font-family:var(--sans);font-size:.85rem;
  color:#b54b3a;text-align:center;
}

.selos{
  list-style:none;margin:var(--space-5) 0 0;padding:var(--space-5) 0 0;
  border-top:1px solid var(--line);display:grid;gap:var(--space-3);
}
.selos li{
  display:grid;grid-template-columns:auto 1fr;align-items:start;gap:var(--space-3);
  font-family:var(--sans);font-size:.82rem;line-height:1.5;color:var(--muted);
}
.selos svg{width:18px;height:18px;color:var(--accent);margin-top:1px;flex:0 0 auto}
.selos strong{color:var(--ink-soft);font-weight:600}

/* ---------- Texto longo ---------- */
.book-long{max-width:66ch;margin:0 0 var(--space-8);color:var(--ink-soft)}
.book-long-titulo{
  margin:0 0 var(--space-4);
  font-family:var(--serif);font-size:1.45rem;font-weight:600;color:var(--ink);
}
.book-long p{margin:0 0 var(--space-4);font-size:1.02rem;line-height:1.78}
.book-citacao{
  margin:var(--space-6) 0;padding:var(--space-2) 0 var(--space-2) var(--space-5);
  border-left:2px solid var(--accent);
  font-family:var(--serif);font-size:1.25rem;font-style:italic;
  line-height:1.5;color:var(--ink);
}

/* ---------- Grupo do Telegram ---------- */
.grupo-card{
  display:block;max-width:66ch;padding:var(--space-6);
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
}
.grupo-titulo{
  margin:var(--space-3) 0 var(--space-3);
  font-family:var(--serif);font-size:1.28rem;font-weight:600;color:var(--ink);
}
.grupo-card p{margin:0;font-family:var(--sans);font-size:.93rem;line-height:1.7;color:var(--ink-soft)}
.grupo-acoes{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)}
.book-page-cta{display:flex;gap:var(--space-3);flex-wrap:wrap;margin:var(--space-5) 0 var(--space-4)}

@media (max-width:900px){
  .book-page{padding:var(--space-7) 0 var(--space-7)}
  .book-page-grid{grid-template-columns:1fr;gap:var(--space-6)}
  .book-rail{position:static;max-width:240px}
  .buybox{padding:var(--space-5)}
  .buyopt-main{grid-template-columns:auto 1fr;gap:var(--space-2) var(--space-3)}
  .buyopt-preco{grid-column:2;justify-self:start;font-size:1.2rem}
}


/* ---------- Empty states ---------- */
.empty-state{
  background:var(--cream);
  border:1px dashed var(--line);
  border-radius:var(--radius);
  padding:3rem 2rem;
  text-align:center;
  color:var(--ink-soft);
}
.empty-page{padding:6rem 0 4rem;text-align:center}
.empty-page .section-title{margin-bottom:1rem}
.empty-page p{color:var(--ink-soft);margin:0 auto 2rem;max-width:480px}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease, transform .8s ease}
.reveal.is-visible{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:3rem}
  .about-grid{grid-template-columns:1fr;gap:2rem}
  .about-side{position:static}
  .books-head{grid-template-columns:1fr;gap:1.5rem;align-items:start}
  .telegram-grid{grid-template-columns:1fr;gap:3rem}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
}

@media (max-width:720px){
  body{font-size:16px}
  .container{padding:0 1.1rem}
  .hero{padding:3rem 0 2rem}
  .hero-title{font-size:2.6rem}
  .hero-meta{grid-template-columns:1fr 1fr;gap:.8rem 1rem}
  .hero-art-frame{aspect-ratio:1/1}
  .marquee-track{font-size:1.1rem}
  .site-header{
    position:sticky;
    top:0;
    background:rgba(246,241,232,.97);
  }
  .header-row{padding:.7rem 1.1rem;gap:.6rem;min-height:60px}
  .brand{min-width:0;flex:1 1 auto}
  .brand-mark{width:34px;height:34px;font-size:.88rem}
  .brand-name{
    font-size:.95rem;
    line-height:1.4;
    padding:.2rem 0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
    color:var(--ink);
  }
  .nav-toggle{display:flex;margin-left:.4rem;position:relative;z-index:2}
  .brand{position:relative;z-index:2}
  .nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:1;
    flex-direction:column;
    align-items:flex-start;
    background:var(--cream);
    border-bottom:1px solid var(--line);
    padding:1.2rem 1.1rem 1.6rem;
    gap:1.1rem;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    pointer-events:none;
    transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
    box-shadow:0 14px 30px rgba(26,24,20,.08);
  }
  .nav.is-open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
    transition:opacity .22s ease, transform .22s ease;
  }
  .nav a{font-size:1.05rem}
  .nav-cta{align-self:stretch;text-align:center}
  .about{padding:4rem 0}
  .books{padding:4rem 0}
  .telegram{padding:4rem 0}
  .contact{padding:4rem 0}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
  .footer-bottom{flex-direction:column;gap:.4rem;text-align:center}
  .section-title{font-size:2rem}
  .book-page{padding:3rem 0 2rem}
  .book-page-grid{grid-template-columns:1fr;gap:2rem}
  .book-page-cover{max-width:300px;margin:0 auto}
}

@media (max-width:420px){
  .header-row{padding:.8rem .9rem}
  .brand-name{font-size:.88rem}
  .hero-title{font-size:2.2rem}
}

@media (max-width:340px){
  .brand-name{display:none}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  .reveal{opacity:1;transform:none}
}

/* =========================================================
   Projeto social

   Uma coluna de leitura só para a página inteira: todo texto começa
   na mesma vertical dos títulos. Antes a introdução era centrada e
   as demais seções alinhadas à esquerda, o que quebrava o eixo.
   ========================================================= */
.projeto-hero{
  padding:clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2.4rem, 5vw, 3.6rem);
  background:linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  border-bottom:1px solid var(--line);
}
.projeto-hero-inner{max-width:var(--container)}
.projeto-title{max-width:20ch}
.projeto-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.3rem, 5.4vw, 4rem);
  line-height:1.03;
  letter-spacing:-.025em;
  color:var(--ink);
  margin:.7rem 0 0;
}
.projeto-sub{
  font-size:clamp(1.05rem, 1.7vw, 1.3rem);
  line-height:1.55;
  color:var(--muted);
  margin:1.1rem 0 0;
  max-width:60ch;
}
.projeto-hero-ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

/* ---------------- Ficha do projeto ----------------
   Onde a obra está, o que falta e como contribuir, em quatro linhas.
   É o resumo que orienta antes de o visitante ler os parágrafos. */
.projeto-ficha{
  margin-top:clamp(2.2rem, 4vw, 3rem);
  border-top:1px solid var(--line);
  padding-top:1.6rem;
  display:grid;
  /* 180px + gap cabem quatro colunas nos 840px do hero: as quatro linhas
     da ficha ficam numa faixa só, em vez de quebrar 3+1. */
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:1.4rem 1.7rem;
}
.ficha-item dt{
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-weight:600;
  color:var(--muted);
  margin:0 0 .35rem;
}
.ficha-item dd{
  margin:0;
  font-size:1.02rem;
  line-height:1.35;
  color:var(--ink);
  font-weight:500;
}
.ficha-item dd .num{
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:600;
  letter-spacing:-.02em;
  margin-right:.3rem;
  font-variant-numeric:tabular-nums;
}

/* ---------------- Introdução ---------------- */
.projeto-intro-inner{max-width:var(--container)}
.projeto-intro-texto{max-width:68ch}
.projeto-intro-texto p{
  font-size:1.05rem;
  line-height:1.75;
  color:var(--ink-soft);
  margin:0 0 1.15rem;
}
.projeto-intro-texto p:last-child{margin-bottom:0}
.projeto-intro-texto p.lede{
  font-size:clamp(1.15rem, 2vw, 1.4rem);
  line-height:1.5;
  color:var(--ink);
}

/* ---------------- Galeria da obra ----------------
   Faixa horizontal contínua: anda sozinha, e o dedo, a roda, as setas
   e o teclado assumem o controle a qualquer momento. */
.projeto-galeria{
  background:var(--bg-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.projeto-galeria-lede{max-width:58ch;margin-bottom:2.2rem}

.projeto-carrossel{position:relative}

/* A faixa sangra até a borda da janela: a foto cortada à direita é o
   convite para arrastar. O padding recompõe o alinhamento do container. */
.carrossel-trilha{
  display:flex;
  gap:1.2rem;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  scroll-padding-left:max(1.5rem, (100vw - var(--container)) / 2 + 1.5rem);
  padding:.4rem max(1.5rem, (100vw - var(--container)) / 2 + 1.5rem) 1.4rem;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.carrossel-trilha::-webkit-scrollbar{display:none}
.carrossel-trilha:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-4px;
  border-radius:var(--radius);
}

.carrossel-item{
  flex:0 0 clamp(260px, 62vw, 440px);
  scroll-snap-align:start;
  position:relative;
  margin:0;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .4s ease;
}
.carrossel-item:hover{box-shadow:var(--shadow-md)}
.carrossel-item img{
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  background:var(--accent-soft);
}

/* Legenda sobre a foto: os cartões ficam todos da mesma altura e a faixa
   não vira uma pilha de tarjas repetidas embaixo das imagens. */
.carrossel-item figcaption{
  position:absolute;
  inset:auto 0 0 0;
  padding:2.4rem .95rem .85rem;
  font-size:.88rem;
  line-height:1.4;
  color:#fff;
  background:linear-gradient(180deg, rgba(20,17,14,0) 0%, rgba(20,17,14,.72) 65%);
  text-shadow:0 1px 3px rgba(0,0,0,.45);
}

/* ---------------- Controles do carrossel ---------------- */
.carrossel-barra{
  display:flex;
  align-items:center;
  gap:1.1rem;
  margin-top:.2rem;
}
.carrossel-progresso{
  flex:1;
  height:3px;
  background:var(--line);
  border-radius:999px;
  overflow:hidden;
}
.carrossel-progresso span{
  display:block;
  height:100%;
  width:20%;
  background:var(--accent);
  border-radius:999px;
  transform-origin:left center;
  transition:width .25s ease, transform .25s ease;
}
.carrossel-setas{display:flex;gap:.5rem;flex-shrink:0}
.carrossel-nav{
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--cream);
  color:var(--ink);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background .25s ease, color .25s ease, opacity .25s ease;
}
.carrossel-nav:hover{background:var(--accent);color:var(--cream);border-color:var(--accent)}
.carrossel-nav:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.carrossel-nav[disabled]{opacity:.32;cursor:default}
.carrossel-nav[disabled]:hover{background:var(--cream);color:var(--ink);border-color:var(--line)}

.carrossel-dica{
  margin:.9rem 0 0;
  font-size:.85rem;
  color:var(--muted);
}

/* ---------------- Lista de materiais ---------------- */
.projeto-materiais-lede{max-width:56ch;margin-bottom:2.2rem}
.materiais-lista{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:.7rem 1.4rem;
}
.material-item{
  display:flex;
  align-items:baseline;
  gap:.7rem;
  padding:.75rem .95rem;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
.material-qtd{
  flex:0 0 auto;
  font-family:var(--sans);
  font-weight:700;
  font-size:.9rem;
  color:var(--accent-dark);
  background:var(--accent-soft);
  padding:.18rem .5rem;
  border-radius:6px;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.material-nome{
  font-size:.97rem;
  line-height:1.4;
  color:var(--ink-soft);
}

/* ---------------- Contribuir ---------------- */
.projeto-doar-card{
  background:var(--dark);
  color:var(--cream);
  border-radius:var(--radius);
  padding:clamp(2.2rem, 5vw, 3.6rem);
  text-align:center;
  box-shadow:var(--shadow-lg);
}
.projeto-doar-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.7rem, 3.4vw, 2.6rem);
  line-height:1.15;
  letter-spacing:-.02em;
  margin:.9rem auto 0;
  max-width:22ch;
  color:var(--cream);
}
.projeto-doar-note{
  color:rgba(251,247,239,.72);
  font-size:1rem;
  line-height:1.65;
  max-width:46ch;
  margin:1.1rem auto 2rem;
}
.btn.big{padding:1.05rem 2.2rem;font-size:1.02rem}

.projeto-grupo-inner{max-width:var(--container)}
.projeto-grupo-inner > div{max-width:62ch}
.projeto-grupo-inner .lede{margin-bottom:1.8rem}

@media (max-width:640px){
  .projeto-hero-ctas .btn{width:100%}
  .projeto-ficha{gap:1.2rem 1.4rem}
  .carrossel-barra{gap:.8rem}
}

@media (prefers-reduced-motion:reduce){
  .carrossel-trilha{scroll-behavior:auto}
  .carrossel-progresso span{transition:none}
}

/* ---------------- Chave PIX manual ---------------- */
.pix-manual{margin-top:1.6rem}
.pix-manual-ou{
  margin:1.6rem 0 .9rem;
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:rgba(251,247,239,.55);
}
.pix-chave{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  background:rgba(251,247,239,.07);
  border:1px solid rgba(251,247,239,.16);
  border-radius:var(--radius-sm);
  padding:1rem 1.1rem;
  max-width:520px;
  margin:0 auto;
}
.pix-chave-rotulo{
  flex:1 0 100%;
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:600;
  color:rgba(251,247,239,.6);
}
.pix-chave code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:1.02rem;
  letter-spacing:.02em;
  color:var(--cream);
  word-break:break-all;
}
.pix-chave .btn{
  background:var(--cream);
  color:var(--dark);
  border:0;
  white-space:nowrap;
}
.pix-chave .btn:hover{background:var(--accent-soft)}
.pix-chave .btn.copiado{background:#b7e0c4;color:#0a5c25}
.pix-dono{
  margin:.9rem 0 0;
  font-size:.92rem;
  color:rgba(251,247,239,.72);
}

/* =====================================================================
   LOJA — bloco de venda, checkout, pedido
   ===================================================================== */

.btn.big{padding:1rem 2rem;font-size:1.02rem}

/* ---------- Bloco de venda na página do livro ---------- */
.venda-box{
  margin:2rem 0;padding:1.8rem;background:var(--cream);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
}
.venda-title{
  font-family:var(--serif);font-size:1.28rem;font-weight:600;
  margin:0 0 1.2rem;color:var(--ink);
}
.venda-opcoes{display:grid;gap:.7rem;margin-bottom:1.3rem}
.venda-opcao{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:.5rem .85rem;padding:1rem 1.15rem;background:#fff;
  border:1.5px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.venda-opcao:hover{border-color:var(--accent-soft)}
.venda-opcao:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 3px rgba(184,117,74,.12)}
.venda-opcao input{width:auto;margin:0;accent-color:var(--accent)}
.venda-opcao-nome{font-family:var(--sans);font-weight:600;font-size:.97rem;color:var(--ink)}
.venda-opcao-preco{
  font-family:var(--serif);font-size:1.3rem;font-weight:600;
  color:var(--accent-dark);white-space:nowrap;
}
.venda-opcao-obs{
  grid-column:2 / -1;font-family:var(--sans);font-size:.8rem;color:var(--muted);
}
.venda-acao{display:flex;flex-wrap:wrap;gap:.9rem;align-items:flex-end}
.venda-qtd{display:flex;flex-direction:column;gap:.35rem;font-family:var(--sans);font-size:.8rem;color:var(--muted)}
.venda-qtd input{
  width:82px;padding:.85rem .7rem;text-align:center;font-size:1rem;
  border:1.5px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--ink);
}
.venda-acao .btn{flex:1;min-width:190px}
.venda-nota{margin:1rem 0 0;font-family:var(--sans);font-size:.8rem;color:var(--muted)}

/* =====================================================================
   CHECKOUT — painéis, passos e escolha do meio de pagamento
   ===================================================================== */

.checkout{padding:var(--space-8) 0 var(--space-10)}
.checkout-h1{
  margin:var(--space-2) 0 var(--space-6);
  font-family:var(--serif);font-weight:600;
  font-size:clamp(1.9rem,3.6vw,2.6rem);
  line-height:1.1;letter-spacing:-.02em;color:var(--ink);
}
.checkout .crumbs{
  display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
  font-family:var(--sans);font-size:.83rem;color:var(--muted);
}
.checkout .crumbs strong{color:var(--ink);font-weight:500}

/* ---------- Passos ---------- */
.passos{
  display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-6);
  list-style:none;margin:0 0 var(--space-7);padding:0;
}
.passos li{
  display:flex;align-items:center;gap:var(--space-3);
  font-family:var(--sans);font-size:.87rem;color:var(--muted);
}
.passo-num{
  display:grid;place-items:center;width:26px;height:26px;
  border:1.5px solid var(--line);border-radius:999px;
  font-size:.78rem;font-weight:600;background:var(--cream);
}
.passos li.atual{color:var(--ink);font-weight:600}
.passos li.atual .passo-num{border-color:var(--accent);color:var(--accent-dark);background:var(--accent-subtle)}
.passos li.feito .passo-num{background:var(--accent);border-color:var(--accent);color:var(--cream)}

/* ---------- Grade ---------- */
.checkout-grid{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);
  gap:var(--space-6) var(--space-8);align-items:start;
}
.checkout-main{display:grid;gap:var(--space-5);min-width:0}

/* ---------- Painel ---------- */
.painel{
  padding:var(--space-6);margin:0;
  background:var(--cream);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
}
.painel > legend,
.painel-titulo{
  margin:0 0 var(--space-4);padding:0;
  font-family:var(--serif);font-size:1.22rem;font-weight:600;color:var(--ink);
}
.checkout-form{display:grid;gap:var(--space-5)}
.checkout-form fieldset{border:none}
.opcional{font-weight:400;font-size:.76rem;color:var(--muted);text-transform:none;letter-spacing:0}
.checkout-submit{display:flex}
.checkout-submit .btn-comprar{max-width:340px}
.checkout-submit .btn{min-width:180px}

/* ---------- Escolha do meio ---------- */
.meios{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--space-3);margin-bottom:var(--space-5)}
.meio{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--space-3);
  padding:var(--space-4) var(--space-5);margin:0;cursor:pointer;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  transition:border-color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.meio:hover{border-color:var(--accent-ring)}
.meio.ativo{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-subtle)}
.meio input{position:absolute;opacity:0;width:0;height:0}
.meio-icone{display:grid;place-items:center;width:34px;height:34px;color:var(--muted);
  border-radius:8px;background:var(--bg-2);transition:color var(--dur-base) var(--ease-out),
  background var(--dur-base) var(--ease-out)}
.meio-icone svg{width:20px;height:20px}
.meio.ativo .meio-icone{color:var(--accent-dark);background:var(--accent-subtle)}
.meio-texto{display:flex;flex-direction:column;gap:1px;min-width:0}
.meio-texto strong{font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--ink)}
.meio-texto small{font-family:var(--sans);font-size:.78rem;color:var(--muted)}
.meio-nota{margin:var(--space-3) 0 0;font-family:var(--sans);font-size:.82rem;
  color:var(--muted);text-align:center}
.meio-painel{min-width:0}
.pagar-pix .btn-comprar{margin-top:0}

/* ---------- Resumo ---------- */
.checkout-resumo{
  position:sticky;top:var(--space-7);
  padding:var(--space-6);background:var(--cream);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);
}
.resumo-capa{
  display:block;width:96px;height:auto;aspect-ratio:3/4;object-fit:cover;
  margin:0 0 var(--space-4);border-radius:8px;box-shadow:var(--shadow-sm);
  background:var(--accent-soft);
}
.resumo-voltar{
  display:inline-block;margin-top:var(--space-5);
  font-family:var(--sans);font-size:.84rem;color:var(--muted);
}
.resumo-voltar:hover{color:var(--accent-dark)}

@media (max-width:900px){
  .checkout-grid{grid-template-columns:1fr}
  .checkout-resumo{position:static;order:-1}
  .resumo-capa{width:72px}
  .passos{gap:var(--space-2) var(--space-4)}
  .passo-nome{font-size:.82rem}
  .checkout-submit .btn-comprar,
  .checkout-submit .btn{max-width:none;width:100%}
}


/* ---------- Página do pedido ---------- */
.pedido-wrap{max-width:760px}
.pedido-selo{
  display:inline-block;margin-bottom:1rem;padding:.42rem 1rem;border-radius:999px;
  font-family:var(--sans);font-size:.76rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;
}
.pedido-selo.ok{background:#e4f0e2;color:#33632f}
.pedido-selo.erro{background:#fdeceb;color:#8c2f1d}
.pedido-selo.aguardando{background:var(--accent-soft);color:var(--accent-dark)}
.pedido-downloads{display:grid;gap:1rem;margin:2rem 0}
.download-item{
  padding:1.4rem;background:var(--cream);border:1px solid var(--line);
  border-radius:var(--radius);text-align:center;
}
.download-nome{
  display:block;margin-bottom:.9rem;font-family:var(--serif);
  font-size:1.14rem;font-weight:600;color:var(--ink);
}
.download-item .hint{display:block;margin-top:.7rem;font-size:.78rem;color:var(--muted)}
.pedido-envio{
  margin:1.6rem 0;padding:1.2rem 1.4rem;background:var(--bg-2);
  border-radius:var(--radius-sm);font-family:var(--sans);font-size:.92rem;color:var(--ink-soft);
}
.pedido-nota{margin-top:1.6rem;font-family:var(--sans);font-size:.85rem;color:var(--muted);line-height:1.6}

/* ---------- PIX ---------- */
.pix-area{
  display:flex;flex-wrap:wrap;gap:2rem;align-items:center;
  margin:2rem 0;padding:1.8rem;background:var(--cream);
  border:1px solid var(--line);border-radius:var(--radius);
}
.pix-qr{border-radius:var(--radius-sm);background:#fff;padding:.5rem;flex:0 0 auto}
.pix-copia{flex:1;min-width:250px}
.pix-copia code{
  display:block;margin:.6rem 0 .9rem;padding:.9rem;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem;
  color:var(--ink-soft);word-break:break-all;max-height:110px;overflow:auto;
}

/* ---------- Avisos ---------- */
.aviso{
  margin:1.4rem 0;padding:1rem 1.2rem;background:var(--bg-2);
  border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius-sm);font-family:var(--sans);font-size:.9rem;color:var(--ink-soft);
}
.aviso.erro{background:#fdeceb;border-color:rgba(181,75,58,.3);border-left-color:#b54b3a;color:#8c2f1d}
.aviso p{margin:0}
.aviso p + p{margin-top:.4rem}

@media (max-width:860px){
  .checkout-grid{grid-template-columns:1fr;gap:2rem}
  .checkout-resumo{order:-1}
  .venda-acao .btn{min-width:100%}
}

/* ---------- Endereço no checkout ---------- */
.checkout-endereco{margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.endereco-duplo{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.endereco-duplo label{margin-top:1.1rem}
.cep-linha label{max-width:230px}
#shipUf{text-transform:uppercase;background:var(--bg-2);color:var(--muted)}
.resumo-dica{font-size:.78rem;color:var(--accent-dark)}
@media (max-width:520px){ .endereco-duplo{grid-template-columns:1fr;gap:0} }

/* ---------- Vitrine da loja ---------- */
.loja-card .book-info{display:flex;flex-direction:column}
.loja-precos{list-style:none;margin:1rem 0 0;padding:.9rem 0 0;border-top:1px solid var(--line)}
.loja-precos li{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.28rem 0;font-family:var(--sans);
}
.loja-formato{font-size:.84rem;color:var(--muted)}
.loja-preco{font-family:var(--serif);font-size:1.16rem;font-weight:600;color:var(--accent-dark)}
.loja-combo{
  margin:.7rem 0 0;font-family:var(--sans);font-size:.76rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--accent);
}
.loja-rodape{
  max-width:640px;margin:2.6rem auto 0;text-align:center;
  font-family:var(--sans);font-size:.87rem;line-height:1.7;color:var(--muted);
}

/* ---------- Opções de compra: vários formatos ---------- */
.venda-sub{margin:-.7rem 0 1.1rem;font-family:var(--sans);font-size:.87rem;color:var(--muted)}
.venda-opcao{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;
  padding:1rem 1.15rem;background:#fff;
  border:1.5px solid var(--line);border-radius:var(--radius-sm);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.venda-opcao:has(input[type=checkbox]:checked){
  border-color:var(--accent);box-shadow:0 0 0 3px rgba(184,117,74,.12);
}
.venda-opcao-escolha{
  flex:1;min-width:200px;display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:.4rem .85rem;cursor:pointer;margin:0;
}
.venda-opcao-escolha input[type=checkbox]{
  width:19px;height:19px;margin:0;accent-color:var(--accent);cursor:pointer;
}
.venda-opcao .venda-opcao-obs{grid-column:2 / -1}
.venda-opcao .venda-qtd{flex:0 0 auto;flex-direction:row;align-items:center;gap:.5rem;margin:0}
.venda-opcao .venda-qtd input{width:66px;padding:.55rem .4rem}
@media (max-width:480px){
  .venda-opcao-escolha{min-width:100%}
  .venda-opcao .venda-qtd{width:100%;justify-content:space-between}
}

/* ---------- Campos do checkout ---------- */
.checkout-form label,
.cep-linha label{
  display:block;margin-top:var(--space-5);
  font-family:var(--sans);font-size:.84rem;font-weight:600;color:var(--ink-soft);
}
.checkout-form fieldset > label:first-of-type,
.cep-linha label{margin-top:0}
.checkout-form input[type=text],
.checkout-form input[type=email],
.cep-linha input{
  width:100%;margin-top:var(--space-2);padding:.9rem var(--space-4);
  font-family:var(--sans);font-size:.97rem;font-weight:400;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  transition:border-color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out);
}
.checkout-form input:focus,
.cep-linha input:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-subtle);
}
.checkout-form input:disabled,
.checkout-form input[readonly]{background:var(--bg-2);color:var(--muted)}
.checkout-form .hint,
.cep-linha .hint{
  display:block;margin-top:var(--space-2);
  font-family:var(--sans);font-size:.78rem;font-weight:400;line-height:1.5;color:var(--muted);
}

/* ---------- Resumo do pedido ---------- */
.resumo-itens{list-style:none;margin:0;padding:0}
.resumo-itens li{
  display:flex;justify-content:space-between;gap:var(--space-4);align-items:flex-start;
  padding:var(--space-3) 0;border-bottom:1px solid var(--line);
}
.resumo-nome{font-family:var(--sans);font-size:.92rem;line-height:1.45;color:var(--ink)}
.resumo-nome small{display:block;margin-top:2px;font-size:.78rem;color:var(--muted)}
.resumo-valor{
  font-family:var(--sans);font-size:.92rem;color:var(--ink);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.resumo-linha{
  display:flex;justify-content:space-between;gap:var(--space-4);
  margin:var(--space-3) 0 0;
  font-family:var(--sans);font-size:.88rem;color:var(--muted);
}
.resumo-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);
  margin:var(--space-4) 0 0;padding-top:var(--space-4);border-top:1px solid var(--line);
  font-family:var(--sans);font-size:.95rem;color:var(--ink-soft);
}
.resumo-total strong{
  font-family:var(--serif);font-size:1.7rem;font-weight:600;
  color:var(--ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums;
}
.cartao-erro{
  margin-top:var(--space-4);padding:.9rem 1.1rem;
  background:#fdeceb;border:1px solid rgba(181,75,58,.3);border-radius:var(--radius-sm);
  font-family:var(--sans);font-size:.87rem;color:#8c2f1d;
}
.checkout-submit.salvar{justify-content:flex-end;margin-top:calc(var(--space-4) * -1)}
.checkout-submit.salvar .btn{min-width:0;padding:.6rem 1.2rem;font-size:.86rem}
.cartao-carregando{display:grid;gap:var(--space-3)}
.cartao-carregando-nota{
  font-family:var(--sans);font-size:.8rem;color:var(--muted);text-align:center;
  margin-top:var(--space-2);
}
.skeleton{
  display:block;border-radius:var(--radius-sm);
  background:linear-gradient(90deg, var(--bg-2) 25%, var(--cream) 50%, var(--bg-2) 75%);
  background-size:200% 100%;animation:shimmer 1.4s ease infinite;
}
@keyframes shimmer{to{background-position:-200% 0}}