:root {
  --ink:#2a2733; --muted:#6f6a7a; --bg:#fff8f1; --card:#fff; --line:#eee4d8;
  --brand:#a3447f; --brand-dark:#7d2f60; --brand-soft:#fbe9f3; --green:#5c9a2a; --green-soft:#edf6e3;
  --blue:#2b8cc4; --yellow:#f4b942; --yellow-soft:#fff4d6; --shadow: 0 10px 30px rgba(90,40,70,.10);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family: "Nunito", "Segoe UI", system-ui, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.55; font-size: 17px; }
a { color: var(--blue); }
h1, h2, h3 { font-family: "Baloo 2", "Nunito", sans-serif; line-height: 1.12; margin: 0 0 .4em; color: var(--ink); }
h1 { font-size: 2.6rem; color: var(--brand-dark); } h2 { font-size: 1.75rem; } h3 { font-size: 1.15rem; }
h1 em { font-style: normal; color: var(--brand); border-bottom: 6px solid var(--yellow); line-height: 1; }
.mt { margin-top: 28px; }
.center { text-align: center; }
.muted { color: var(--muted); } .small { font-size: .9rem; } .lead { font-size: 1.18rem; }

/* topo */
.top { display:flex; align-items:center; justify-content:space-between; padding: 12px 20px; background:#fff; border-bottom: 1px solid var(--line); gap: 12px; flex-wrap: wrap; position: sticky; top: 0; z-index: 5; }
.brand { font-family:"Baloo 2", sans-serif; font-weight:800; font-size:1.35rem; color: var(--brand); text-decoration:none; display:flex; align-items:center; gap: 6px; }
.top nav { display:flex; align-items:center; gap: 14px; flex-wrap: wrap; }
.top nav a { text-decoration: none; color: var(--ink); font-weight: 700; }
.credits { background: var(--green-soft); color:#3a6d1f; border-radius: 999px; padding: 3px 12px; font-weight: 700; font-size: .9rem; }
.wrap { max-width: 960px; margin: 0 auto; padding: 24px 16px 56px; }
.wrap.home { max-width: 1080px; }
.foot { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding: 18px 20px; color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line); background:#fff; }

/* botões */
.btn { display:inline-block; background: var(--brand); color:#fff !important; border:0; border-radius: 14px; padding: 11px 20px; font-weight: 800; font-family: inherit; font-size: 1rem; text-decoration:none; cursor:pointer; box-shadow: 0 4px 14px rgba(163,68,127,.25); transition: transform .08s ease, box-shadow .08s ease; line-height: 1.3; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(163,68,127,.3); }
.btn.big { padding: 16px 28px; font-size: 1.15rem; border-radius: 16px; }
.btn.small { padding: 7px 14px; font-size: .9rem; box-shadow: none; }
.btn.full { width: 100%; display:block; text-align:center; }
.btn.ghost { background:#fff; color: var(--brand) !important; border: 2px solid var(--brand); box-shadow: none; }
.btn[disabled] { opacity:.5; cursor: not-allowed; transform:none; }
.ghost { margin-left: 14px; font-weight: 700; }
.link-btn { display:inline-block; margin-top: 8px; font-weight: 700; }
button.link { background:none; border:0; color: var(--muted); font: inherit; cursor:pointer; font-weight:700; text-decoration: underline; }
form.inline { display:inline; }
.cta-row { margin: 22px 0 8px; display:flex; align-items:center; flex-wrap: wrap; gap: 8px; }

/* cards e formulários */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 24px 26px; margin: 12px 0; box-shadow: var(--shadow); }
.card.narrow { max-width: 460px; margin: 24px auto; }
.card.center { text-align:center; }
.card.prose p { margin: .5em 0; }
label { display:block; font-weight: 700; margin: 10px 0; }
label small { display:block; font-weight: 400; color: var(--muted); font-size: .85rem; }
label.check { font-weight: 400; }
input[type=text], input[type=email], input[type=password], select, textarea { display:block; width:100%; margin-top: 4px; padding: 12px 14px; border: 1.5px solid #d9d2c6; border-radius: 12px; font: inherit; background:#fff; }
select.serie { font-size: 1.1rem; font-weight: 700; padding: 14px; }
textarea { resize: vertical; }
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.alert { background:#fdecea; border:1px solid #e9a7a3; color:#8a1f1a; border-radius: 14px; padding: 12px 16px; margin-bottom: 14px; }
.alert.soft { background: var(--yellow-soft); border-color:#e8d48b; color:#6b4f00; }
.alert.plan { display:flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items:center; }

/* formulário "nova" de um botão só */
.card.nova { max-width: 640px; margin: 12px auto; }
.step { display:flex; align-items:center; gap: 10px; margin: 22px 0 8px; }
.step h3 { margin:0; }
.n { display:inline-flex; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color:#fff; font-weight: 800; align-items:center; justify-content:center; flex: none; font-family: "Baloo 2", sans-serif; }
.drop { display:flex; align-items:center; gap: 16px; border: 2.5px dashed var(--brand); background: var(--brand-soft); border-radius: 18px; padding: 20px 18px; cursor: pointer; margin: 0; font-weight: 400; }
.drop.has { background: var(--green-soft); border-color: var(--green); }
.drop input { position:absolute; width:1px; height:1px; opacity:0; }
.drop-ico { font-size: 2.4rem; }
.drop-txt b { font-size: 1.1rem; }
.drop-txt small { color: var(--muted); }
.thumbs { display:flex; flex-wrap:wrap; gap: 8px; margin-top: 10px; }
.thumbs img { width: 72px; height: 96px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background:#fff; }
.thumbs.warn { color:#8a1f1a; font-weight: 700; }
details.more { margin: 18px 0; border: 1px solid var(--line); border-radius: 14px; padding: 10px 16px; background:#fcfaf6; }
details.more summary { cursor:pointer; font-weight: 700; color: var(--muted); }

/* apostila pronta */
.done-head { display:flex; align-items:center; gap: 14px; margin-bottom: 14px; }
.done-head .check { display:inline-flex; width: 48px; height: 48px; border-radius: 50%; background: var(--green); color:#fff; font-size: 1.6rem; font-weight: 800; align-items:center; justify-content:center; flex:none; }
.done-head h2 { margin: 0; } .done-head p { margin: 0; }
.actions { display:flex; flex-direction: column; gap: 10px; margin: 8px 0 14px; }
.actions .btn { text-align:center; }
.hero-cta { display:flex; align-items:center; justify-content:space-between; gap: 16px; flex-wrap: wrap; background: linear-gradient(135deg, #fff, var(--brand-soft)); }
.hero-cta h2 { margin: 0; }

/* lista de apostilas */
.list-cards { display:flex; flex-direction: column; gap: 10px; }
.item { display:flex; align-items:center; gap: 14px; background:#fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; flex-wrap: wrap; }
.item-main { flex: 1 1 260px; }
.item-title { font-weight: 800; color: var(--ink); text-decoration: none; font-size: 1.05rem; }
.item-actions { display:flex; align-items:center; gap: 8px; }
.st { border-radius: 999px; padding: 2px 10px; font-size: .85rem; font-weight: 700; }
.st-done { background: var(--green-soft); color:#3a6d1f; } .st-running, .st-queued { background: var(--yellow-soft); color:#6b4f00; } .st-error { background:#fdecea; color:#8a1f1a; }
.spinner { width: 48px; height: 48px; border: 5px solid #eee; border-top-color: var(--brand); border-radius: 50%; margin: 10px auto 16px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* home */
.eyebrow { color: var(--brand); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; font-size: .85rem; margin: 0 0 10px; }
.hero2 { display:grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items:center; padding: 28px 0 24px; }
.hero-art { position: relative; height: 420px; }
.hero-art .pg { position:absolute; width: 58%; border-radius: 10px; box-shadow: 0 18px 40px rgba(60,30,50,.22); border: 1px solid #eadfd3; background:#fff; transition: transform .3s ease; }
.hero-art .pg-a { left: 0; top: 30px; transform: rotate(-9deg); }
.hero-art .pg-b { left: 22%; top: 0; transform: rotate(3deg); }
.hero-art .pg-c { left: 40%; top: 36px; transform: rotate(10deg); }
.hero-art:hover .pg-a { transform: rotate(-12deg) translateX(-8px); }
.hero-art:hover .pg-c { transform: rotate(13deg) translateX(8px); }
section { margin: 40px 0; }
.pains h2, .how h2, .inside h2, .faq h2, .pricing-teaser h2 { text-align:center; }
.three { display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 22px 0; }
.three > div { background:#fff; border:1px solid var(--line); border-radius: 18px; padding: 20px; box-shadow: var(--shadow); position: relative; }
.three .ico { font-size: 2rem; }
.three .price { font-family:"Baloo 2", sans-serif; font-size: 2.1rem; font-weight: 800; color: var(--brand); line-height: 1.1; }
.three .price small { font-size: 1rem; color: var(--muted); font-weight: 700; }
.three .best { border: 2px solid var(--brand); }
.steps { list-style:none; padding:0; margin: 20px 0 0; display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps li { display:flex; gap: 12px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius: 18px; padding: 18px; }
.steps .n { width: 36px; height: 36px; font-size: 1.1rem; }
.steps h3 { margin-bottom: .2em; } .steps p { margin:0; }
.inside .lead { text-align:center; max-width: 720px; margin: 0 auto 18px; }
.pages { display:grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.pages figure { margin:0; text-align:center; }
.pages img { width:100%; border-radius: 10px; border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(60,30,50,.14); background:#fff; transition: transform .2s ease; }
.pages img:hover { transform: translateY(-4px) scale(1.02); }
.pages figcaption { font-size: .85rem; color: var(--muted); margin-top: 8px; line-height: 1.35; }
.story-card { display:flex; gap: 20px; align-items:flex-start; background: linear-gradient(135deg, #fff, var(--brand-soft)); border: 1px solid var(--line); border-radius: 22px; padding: 26px 28px; box-shadow: var(--shadow); }
.story-card .avatar { font-size: 3rem; line-height: 1; flex:none; }
.story-card p { margin: .4em 0; }
.faq details { background:#fff; border:1px solid var(--line); border-radius: 14px; padding: 12px 18px; margin: 10px 0; }
.faq summary { cursor:pointer; font-weight: 800; font-size: 1.05rem; }
.faq p { margin: 8px 0 2px; color: #4a4553; }

/* preços */
.packs { display:grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 18px 0; max-width: 720px; }
.pack { position:relative; background:#fff; border:1.5px solid var(--line); border-radius: 20px; padding: 24px; text-align:center; box-shadow: var(--shadow); }
.pack.best { border-color: var(--brand); border-width: 2px; }
.pack .price { font-family:"Baloo 2", sans-serif; font-size: 2.3rem; font-weight: 800; color: var(--brand); line-height: 1.1; }
.pack .price small { font-size: 1rem; color: var(--muted); font-weight: 700; }
.ribbon { position:absolute; top:-13px; left:50%; transform: translateX(-50%); background: var(--brand); color:#fff; border-radius: 999px; padding: 3px 14px; font-size: .8rem; font-weight: 800; white-space: nowrap; }

@media (max-width: 860px) {
  .hero2 { grid-template-columns: 1fr; }
  .hero-art { height: 380px; max-width: 520px; margin: 0 auto; width: 100%; }
  .pages { grid-template-columns: repeat(3, 1fr); }
  .three, .steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  h1 { font-size: 2rem; } h2 { font-size: 1.5rem; }
  .grid2, .packs { grid-template-columns: 1fr; }
  .hero-art { height: 330px; }
  .hero-art .pg { width: 56%; }
  .pages { grid-template-columns: repeat(2, 1fr); }
  .card { padding: 18px 16px; }
  .btn.big { width: 100%; text-align: center; }
  .ghost { margin-left: 0; }
  .top nav { gap: 10px; font-size: .95rem; }
}

/* catálogo de apostilas prontas + quadro admin */
.packs.catalog { max-width: none; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card.admin { border: 2px dashed var(--brand); background: #fff8fc; }
.card.admin .form input, .card.admin .form select { width: 100%; }
.item-actions form.inline { display: inline-flex; gap: 6px; align-items: center; }
.item-actions input[type=email] { padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: .9rem; }