:root{
  --paper:#F1ECE0; --paper-2:#FBF8F0; --paper-3:#FFFFFF;
  --ink:#232A2B; --ink-2:#2E3739;
  --brass:#A9812F; --brass-deep:#7F5F1D;
  --sage:#55705B; --sage-deep:#3E5245;
  --text:#262C2B; --text-soft:#5E645E; --muted:#8A8578; --line:#DED7C7;
  --disp:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Public Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --brand:'Fredoka', var(--sans);
  --radius:14px; --radius-sm:10px;
  --shadow:0 12px 30px -14px rgba(35,42,43,.28);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;line-height:1.55}
img,svg{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px}
h1,h2,h3{font-family:var(--disp);font-weight:600;line-height:1.12;letter-spacing:-.01em;
  text-wrap:balance;margin:0}
.eyebrow{font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--brass);margin:0 0 14px}
.eyebrow.on-ink{color:#D9B87A}
p{margin:0}
.lede{font-size:1.08rem;color:var(--text-soft);max-width:56ch}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:30;background:rgba(35,42,43,.94);backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,.08)}
.nav-inner{max-width:1080px;margin:0 auto;padding:16px 28px;display:flex;align-items:center;
  justify-content:space-between;gap:20px}
.brand{font-family:var(--brand);font-weight:700;font-size:1.3rem;color:var(--paper);
  text-decoration:none;letter-spacing:.01em}
.nav-group{display:flex;align-items:center;gap:28px}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{color:#CFC9BA;text-decoration:none;font-size:.92rem;font-weight:500}
.nav-links a:hover{color:#fff}
.nav-cta{background:var(--brass);color:#fff !important;padding:.55em 1.2em;border-radius:999px;
  font-weight:700;font-size:.88rem;white-space:nowrap}
.nav-cta:hover{background:var(--brass-deep)}
.nav-login{border:1px solid rgba(241,236,224,.3);color:#F1ECE0 !important;padding:.5em 1.1em;
  border-radius:999px;font-weight:600;font-size:.86rem;white-space:nowrap}
.nav-login:hover{border-color:rgba(241,236,224,.6);background:rgba(241,236,224,.06)}
.nav-toggle{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;
  padding:6px;flex-shrink:0}
.nav-toggle span{display:block;width:20px;height:2px;background:#F1ECE0;border-radius:2px}

@media(max-width:720px){
  .nav{position:relative}
  .nav-toggle{display:flex}
  .nav-links{position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:flex-start;
    gap:2px;background:rgba(35,42,43,.98);max-height:0;overflow:hidden;padding:0 28px;
    transition:max-height .2s ease}
  .nav.nav-open .nav-links{max-height:320px;padding:10px 28px 18px}
  .nav-links a{padding:.6em 0;width:100%}
}

/* ---------- Hero ---------- */
.hero{background:var(--ink);color:var(--paper);padding:84px 0 96px;position:relative;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.5rem);color:#F6F1E4}
.hero h1 em{font-style:normal;color:var(--brass)}
.hero .lede{color:#C9C3B2;font-size:1.15rem;margin-top:20px;max-width:48ch}
.hero-ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.85em 1.6em;border-radius:999px;
  font-weight:700;font-size:.98rem;text-decoration:none;border:1px solid transparent;
  transition:transform .15s ease, background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-brass{background:var(--brass);color:#fff}
.btn-brass:hover{background:var(--brass-deep)}
.btn-ghost-ink{border-color:rgba(241,236,224,.35);color:#F1ECE0}
.btn-ghost-ink:hover{border-color:rgba(241,236,224,.7);background:rgba(241,236,224,.06)}
.hero-note{margin-top:18px;font-size:.82rem;color:#9A9484}

/* Mockup do app na Hero: monitor sem logo mostrando a tela da Biblioteca */
.hero-device{width:460px;height:349px;overflow:hidden;flex-shrink:0}
.hero-device-inner{width:1000px;transform:scale(.46);transform-origin:top left}

.rig{width:1000px;font-family:var(--sans)}
.screen{background:#DCDCDC;border-radius:18px;padding:14px;box-shadow:0 30px 70px -20px rgba(0,0,0,.6)}
.screen-inner{background:var(--paper);border-radius:8px;overflow:hidden;display:flex;height:640px}
.neck{width:130px;height:74px;background:linear-gradient(#C9C9C9,#B7B7B7);margin:0 auto;
  clip-path:polygon(30% 0,70% 0,100% 100%,0 100%)}
.base{width:360px;height:16px;background:#B7B7B7;margin:0 auto;border-radius:0 0 10px 10px}

.mock-sidebar{width:180px;flex-shrink:0;background:var(--ink);color:#D9D3C4;padding:18px 14px;
  display:flex;flex-direction:column}
.mock-brand{font-family:var(--brand);font-weight:700;font-size:1.05rem;color:var(--paper);line-height:1.15}
.mock-brand small{display:block;font-family:var(--sans);font-weight:400;font-size:.56rem;color:#A7A08E;margin-top:2px}
.mock-upgrade{background:var(--brass);color:#fff;text-align:center;padding:.5em;border-radius:999px;
  font-size:.68rem;font-weight:700;margin:14px 0 10px}
.mock-nav{display:flex;flex-direction:column;gap:3px}
.mock-nav span{padding:.42em .6em;border-radius:6px;font-size:.68rem;font-weight:500;color:#CFC9BA}
.mock-nav span.on{background:rgba(169,129,47,.22);color:#F3E6C8;box-shadow:inset 2px 0 0 var(--brass)}
.mock-foot{margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.08);font-size:.66rem}
.mock-support{font-weight:600;color:#CFC9BA;margin-bottom:10px}
.mock-support small{display:block;font-weight:400;color:#8A8578;margin-top:1px}
.mock-who strong{display:block;color:#EDE7D8;font-size:.74rem}
.mock-badge{display:inline-block;margin-top:3px;font-size:.58rem;font-weight:700;color:#C9B888;
  background:rgba(169,129,47,.18);padding:.15em .5em;border-radius:999px}
.mock-edit{display:block;margin-top:8px;color:#A7A08E;font-size:.64rem}
.mock-signout{display:block;margin-top:6px;color:#A7A08E;font-size:.7rem}

.mock-main{flex:1;padding:20px 24px;overflow:hidden}
.mock-quote{background:var(--paper-3);border-left:3px solid var(--brass);border-radius:4px;
  padding:12px 16px;margin-bottom:16px}
.mock-quote p{font-family:var(--disp);font-style:italic;font-size:.82rem;color:var(--ink);margin:0}
.mock-quote span{display:block;text-align:right;font-size:.66rem;color:var(--muted);margin-top:4px}

.mock-headrow{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.mock-main h1{font-family:var(--disp);font-size:1.15rem;margin:0 0 2px;color:var(--ink)}
.mock-count{font-size:.68rem;color:var(--muted);margin:0}
.mock-add{background:var(--paper-3);border:1px solid var(--line);color:var(--ink);font-size:.68rem;
  font-weight:700;padding:.5em .9em;border-radius:8px;white-space:nowrap}

.mock-toolbar{display:flex;gap:8px;margin-bottom:10px}
.mock-search{flex:1;background:var(--paper-3);border:1px solid var(--line);border-radius:8px;
  padding:.4em .7em;font-size:.66rem;color:var(--muted)}
.mock-select{background:var(--paper-3);border:1px solid var(--line);border-radius:8px;
  padding:.4em .6em;font-size:.64rem;color:var(--text-soft)}
.mock-buscar{background:var(--paper-3);border:1px solid var(--line);border-radius:8px;
  padding:.4em .8em;font-size:.64rem;font-weight:700;color:var(--ink)}

.mock-chips{display:flex;gap:6px;margin-bottom:14px}
.chip{font-size:.62rem;font-weight:700;padding:.35em .7em;border-radius:999px;border:1px solid var(--line);
  color:var(--text-soft);background:var(--paper-3)}
.chip.on{background:var(--ink);color:var(--paper)}

.mock-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.book{display:flex;flex-direction:column}
.book .cover{aspect-ratio:2/3;border-radius:5px;overflow:hidden;box-shadow:0 6px 14px -6px rgba(0,0,0,.35);
  position:relative}
.book .cover img{width:100%;height:100%;object-fit:cover;display:block}
.stbadge{position:absolute;left:5px;bottom:5px;font-size:.52rem;font-weight:700;color:#fff;
  padding:.2em .5em;border-radius:999px}
.st-lido{background:rgba(85,112,91,.92)}
.st-lendo{background:rgba(62,92,110,.92)}
.st-nao{background:rgba(122,46,46,.92)}
.book-title{font-family:var(--disp);font-weight:600;font-size:.72rem;color:var(--ink);margin-top:6px;line-height:1.2}
.book-author{font-size:.6rem;color:var(--text-soft);margin-top:1px}
.book .stars{color:var(--brass);font-size:.62rem;letter-spacing:1px;margin-top:2px}
.book .stars .off{color:var(--line)}
.progress{font-size:.62rem;color:var(--brass-deep);font-weight:700;margin-top:2px}

/* ---------- Sections ---------- */
section{padding:88px 0}
.section-paper2{background:var(--paper-2)}
.section-head{max-width:640px;margin:0 auto 48px;text-align:center}
.section-head h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.section-head .lede{margin:14px auto 0;text-align:center}

/* ---------- Para quem é ---------- */
.audience{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.aud-card{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 28px;box-shadow:var(--shadow)}
.aud-card .feat-mark{width:40px;height:40px}
.aud-card .feat-mark svg{width:20px;height:20px}
.aud-card h3{font-size:1.15rem;margin-bottom:10px}
.aud-card p{color:var(--text-soft);font-size:.94rem}

/* ---------- Benefícios ---------- */
.grid-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;box-shadow:var(--shadow)}
.feat-mark{width:34px;height:34px;border-radius:9px;background:rgba(169,129,47,.14);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.feat-mark svg{width:18px;height:18px;stroke:var(--brass-deep)}
.feat h3{font-size:1.05rem;margin-bottom:8px}
.feat p{color:var(--text-soft);font-size:.92rem}

/* ---------- Planos ---------- */
.switch{display:flex;justify-content:center;margin:0 0 40px}
.switch-track{display:inline-flex;background:var(--paper-3);border:1px solid var(--line);
  border-radius:999px;padding:4px;gap:2px}
input[name="period"]{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;pointer-events:none}
.switch label{padding:.55em 1.3em;border-radius:999px;font-size:.88rem;font-weight:600;
  color:var(--text-soft);cursor:pointer;user-select:none}
#per-m:checked ~ .switch .switch-track label[for="per-m"],
#per-y:checked ~ .switch .switch-track label[for="per-y"]{background:var(--ink);color:#F1ECE0}
.price-m, .price-y{display:none}
#per-m:checked ~ .plans .price-m{display:block}
#per-y:checked ~ .plans .price-y{display:block}
.save-tag{display:none;background:rgba(85,112,91,.15);color:var(--sage-deep);font-size:.74rem;
  font-weight:700;padding:.25em .65em;border-radius:999px;margin-left:8px}
#per-y:checked ~ .plans .save-tag{display:inline-block}

.plans{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:760px;margin:0 auto}
.plan{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px 28px;position:relative}
.plan-pop{border-color:var(--brass);box-shadow:0 18px 36px -18px rgba(169,129,47,.45)}
.plan-tag{position:absolute;top:-13px;left:28px;background:var(--brass);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:.35em .8em;border-radius:999px}
.plan-name{font-family:var(--disp);font-size:1.25rem;font-weight:600}
.plan-price{font-family:var(--disp);font-size:2.2rem;font-weight:600;margin:14px 0 2px;
  color:var(--ink)}
.plan-price span{font-family:var(--sans);font-size:.95rem;font-weight:500;color:var(--muted)}
.plan-desc{color:var(--text-soft);font-size:.88rem;margin-bottom:20px}
.plan-feats{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:10px}
.plan-feats li{display:flex;gap:10px;font-size:.9rem;color:var(--text)}
.plan-feats svg{width:16px;height:16px;flex-shrink:0;margin-top:3px;stroke:var(--sage-deep)}
.plan .btn{width:100%;justify-content:center}

/* ---------- FAQ ---------- */
.faq{max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq details{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:4px 22px}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:600;font-size:.98rem;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.3rem;color:var(--brass);flex-shrink:0;
  transition:transform .18s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--text-soft);font-size:.92rem;padding:0 0 20px;max-width:60ch}

/* ---------- Sobre ---------- */
.about-hero{background:var(--ink);color:var(--paper);padding:72px 0}
.about-hero h1{font-size:clamp(2rem,4vw,2.8rem);color:#F6F1E4;max-width:16ch}
.about-hero .lede{color:#C9C3B2;margin-top:16px}
.article{max-width:640px;margin:0 auto;padding:80px 28px}
.def-card{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 30px;box-shadow:var(--shadow);margin-bottom:40px}
.def-word{font-family:var(--disp);font-size:1.5rem;font-weight:600;color:var(--ink)}
.def-pos{font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--muted);
  text-transform:lowercase;margin-left:10px}
.def-text{margin-top:10px;color:var(--text-soft);font-size:1rem;font-style:italic}
.article p.body-text{font-size:1.06rem;color:var(--text);margin-bottom:22px;max-width:64ch}
.article p.body-text + p.body-text{margin-top:-4px}
.article .signoff{margin-top:36px;font-family:var(--disp);font-style:italic;color:var(--text-soft)}
.article .cta-row{margin-top:44px}

/* ---------- CTA final ---------- */
.cta-final{background:var(--ink);color:#F1ECE0;text-align:center;padding:96px 0}
.cta-final h2{color:#F6F1E4;font-size:clamp(1.8rem,3.4vw,2.5rem);max-width:20ch;margin:0 auto}
.cta-final .lede{color:#C9C3B2;margin:16px auto 0;text-align:center}
.cta-final .btn{margin-top:30px}

/* ---------- Footer ---------- */
footer{background:var(--paper-2);padding:32px 0;border-top:1px solid var(--line)}
.foot-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
  font-size:.84rem;color:var(--muted)}
.foot-inner a{color:var(--brass-deep);text-decoration:none;font-weight:600}
.foot-inner a:hover{text-decoration:underline}

@media(max-width:860px){
  .hero-inner{grid-template-columns:1fr}
  .hero-device{order:-1;width:420px;height:318px;margin:0 auto 8px}
  .hero-device-inner{transform:scale(.42)}
  .audience{grid-template-columns:1fr}
  .grid-feat{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:1fr}
}
@media(max-width:560px){
  .grid-feat{grid-template-columns:1fr}
  .nav-inner{padding:14px 20px}
  section{padding:64px 0}
  .hero{padding:56px 0 72px}
  .article{padding:56px 20px}
  .hero-device{width:300px;height:227px}
  .hero-device-inner{transform:scale(.30)}
}
@media(prefers-reduced-motion:reduce){ *{transition:none !important; scroll-behavior:auto !important} }