/* ============================================================
   Loja de cursos da Eliana Podologia / Leveze — design system
   Compartilhado pela LOJA (index) e por todas as páginas de vendas.
   Extraído da página de vendas "Micose de Unha" (aprovada).
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --cream:#F7F2EA; --paper:#FBF8F3; --ink:#2B241C; --bronze:#A9835A;
  --bronze-deep:#8F6B43; --dark:#26201A; --muted:#7A6F61; --cream-text:#F4EDE3;
  --gold-soft:#D8B98C; --line:rgba(43,36,28,.12);
  --maxw:1080px;
}
html{scroll-behavior:smooth}
body{font-family:'Jost',sans-serif;color:var(--ink);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.28em;color:var(--bronze-deep)}
h1,h2,h3{font-family:'Cormorant Garamond',serif;font-weight:600;letter-spacing:-.01em;line-height:1.08}
h2{font-size:clamp(28px,4.6vw,46px);margin-top:10px}
h3{font-size:22px}
p{font-size:clamp(15px,2.1vw,17px);color:#54493B}
.rule{width:60px;height:3px;background:var(--bronze);margin:18px 0}
section{padding:clamp(48px,8vw,92px) 0}
.s-cream{background:var(--cream)} .s-paper{background:var(--paper)}
.s-dark{background:var(--dark);color:var(--cream-text)}
.s-bronze{background:var(--bronze);color:var(--paper)}
.s-dark h2,.s-dark h3{color:#fff} .s-dark p{color:rgba(244,237,227,.88)} .s-dark .eyebrow{color:var(--gold-soft)}
.s-bronze h2,.s-bronze h3{color:#fff} .s-bronze p{color:rgba(251,248,243,.95)} .s-bronze .eyebrow{color:rgba(255,255,255,.85)}
.s-bronze .rule,.s-dark .rule{background:var(--gold-soft)}

/* ---------- CTA button ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--bronze);color:#fff;font-weight:600;
  font-size:clamp(15px,2.3vw,18px);letter-spacing:.01em;padding:17px 34px;border-radius:8px;text-decoration:none;
  box-shadow:0 8px 24px rgba(143,107,67,.32);transition:transform .15s ease, box-shadow .15s ease;border:none;cursor:pointer}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(143,107,67,.42)}
.btn.big{padding:20px 44px;font-size:clamp(16px,2.6vw,20px)}
.btn.onbronze{background:#fff;color:var(--bronze-deep)}
.btn.ondark{background:var(--gold-soft);color:var(--dark)}
.micro{font-size:12.5px;color:var(--muted);margin-top:12px;letter-spacing:.02em}
.s-dark .micro,.s-bronze .micro{color:rgba(244,237,227,.7)}

/* ---------- barra topo ---------- */
.topbar{position:sticky;top:0;z-index:50;background:var(--dark);color:var(--cream-text);
  display:flex;align-items:center;justify-content:center;gap:18px;padding:10px 18px;flex-wrap:wrap;font-size:13.5px;font-weight:500}
.topbar b{color:var(--gold-soft);font-weight:600}
.topbar a{background:var(--gold-soft);color:var(--dark);text-decoration:none;font-weight:600;padding:7px 16px;border-radius:6px;font-size:12.5px;white-space:nowrap}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:center 25%}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,20,14,.55) 0%,rgba(26,20,14,.32) 30%,rgba(26,20,14,.9) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:60px;padding-bottom:64px}
.hero .wm{font-family:'Cormorant Garamond',serif;font-weight:600;letter-spacing:.42em;color:var(--gold-soft);font-size:18px}
.hero h1{font-size:clamp(32px,6vw,62px);color:#fff;margin:18px 0 18px;max-width:18ch}
.hero .sub{font-size:clamp(15px,2.4vw,20px);color:rgba(255,255,255,.93);max-width:60ch;font-weight:400}
.hero .cta-row{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero .eyebrow{color:var(--gold-soft)}

/* ---------- cards / bullets ---------- */
.lead{max-width:62ch}
.lead p + p{margin-top:14px}
.cards{display:grid;gap:16px;margin-top:36px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.card{background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:12px;padding:22px 22px}
.s-dark .card{background:rgba(255,255,255,.06);border-color:rgba(244,237,227,.16)}
.s-paper .card{background:#fff}
.card .n{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:30px;color:var(--bronze);line-height:1}
.s-dark .card .n{color:var(--gold-soft)}
.card h3{font-size:17px;font-family:'Jost',sans-serif;font-weight:600;margin:10px 0 6px;line-height:1.3}
.card p{font-size:14px;line-height:1.5}

.checklist{list-style:none;margin-top:28px;display:grid;gap:14px}
.checklist li{display:flex;gap:14px;align-items:flex-start;font-size:15.5px;line-height:1.5}
.checklist .ic{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--bronze);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;margin-top:1px;font-weight:700}
.s-dark .checklist .ic{background:var(--gold-soft);color:var(--dark)}
.checklist b{font-weight:600;color:var(--ink)}
.s-dark .checklist b{color:#fff}

/* ---------- split autoridade ---------- */
.split{display:grid;grid-template-columns:0.85fr 1.15fr;gap:42px;align-items:center}
.split img{border-radius:14px;width:100%;height:100%;object-fit:cover;max-height:520px}

/* ---------- OFERTA box ---------- */
.offer{max-width:680px;margin:0 auto;background:var(--paper);border-radius:18px;overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.3);color:var(--ink)}
.offer .head{background:var(--dark);color:#fff;text-align:center;padding:26px 24px}
.offer .head h3{color:#fff;font-size:26px}
.offer .body{padding:30px clamp(22px,4vw,40px) 36px}
.offer .stack{list-style:none;display:grid;gap:14px;margin-bottom:26px}
.offer .stack li{display:flex;gap:13px;align-items:flex-start}
.offer .stack .ic{flex-shrink:0;width:24px;height:24px;border-radius:6px;background:rgba(169,131,90,.16);color:var(--bronze-deep);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;margin-top:2px}
.offer .stack b{font-weight:600}
.offer .stack span{font-size:14px;color:#6A5F50;display:block;margin-top:2px}
.price{text-align:center;margin:6px 0 22px}
.price .from{font-size:16px;color:var(--muted);text-decoration:line-through}
.price .now{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:58px;color:var(--bronze-deep);line-height:1}
.price .now small{font-size:24px;vertical-align:super;margin-right:2px}
.price .pay{font-size:13px;color:var(--muted);margin-top:4px}
.offer .cta-wrap{text-align:center}
.offer .btn{width:100%;justify-content:center}

/* selo garantia */
.seal{display:flex;gap:20px;align-items:center;max-width:680px;margin:32px auto 0;background:rgba(169,131,90,.1);
  border:1px solid rgba(169,131,90,.3);border-radius:14px;padding:22px 26px}
.seal .badge{flex-shrink:0;width:88px;height:88px;border-radius:50%;border:2px solid var(--bronze);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--bronze-deep);background:#fff}
.seal .badge .num{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:34px;line-height:.9}
.seal .badge .lbl{font-size:9px;letter-spacing:.16em;text-transform:uppercase;margin-top:2px}

/* bonus strip */
.bonus-strip{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center;max-width:760px;margin:0 auto}
.bonus-strip .tag{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:22px;color:var(--gold-soft)}

/* FAQ */
.faq{max-width:760px;margin:30px auto 0}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{list-style:none;cursor:pointer;padding:18px 36px 18px 0;position:relative;font-weight:600;font-size:17px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;font-size:24px;color:var(--bronze);font-weight:400;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;font-size:15px;line-height:1.6}

/* footer */
footer{background:#1d1813;color:rgba(244,237,227,.7);padding:46px 0;font-size:13px;line-height:1.6}
footer .wrap{display:grid;gap:14px}
footer .sig{font-family:'Cormorant Garamond',serif;letter-spacing:.3em;color:var(--gold-soft);font-size:16px}
footer a{color:var(--gold-soft);text-decoration:none}

/* prova social: rating google + reviews */
.g-rating{display:inline-flex;align-items:center;gap:14px;margin:30px auto 8px;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:16px 26px;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.06);flex-wrap:wrap;justify-content:center}
.g-rating .g-score{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:42px;color:var(--bronze-deep);line-height:1}
.g-rating .g-stars{color:#E0A93B;font-size:22px;letter-spacing:2px}
.g-rating .g-meta{font-size:13.5px;color:#6A5F50;text-align:left}
.g-rating .g-meta b{color:var(--ink)}
.reviews{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:30px;text-align:left}
.review{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 24px}
.review .stars{color:#E0A93B;font-size:15px;letter-spacing:2px;margin-bottom:8px}
.review p{font-size:14.5px;line-height:1.55;color:#4f463a;font-style:italic}
.review .who{margin-top:12px;font-weight:600;font-size:14px;color:var(--ink)}
.review .who span{font-weight:400;color:var(--muted);font-style:normal;font-size:12.5px}

/* float wpp */
.wpp{position:fixed;right:18px;bottom:18px;z-index:60;background:#25D366;color:#fff;border-radius:50px;
  padding:13px 20px;font-weight:600;font-size:14px;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.25);display:flex;gap:8px;align-items:center}

/* ============================================================
   LOJA (storefront) — grade de cursos
   ============================================================ */
.store-hero{position:relative;color:#fff;overflow:hidden;text-align:center;padding:0}
.store-hero .bg{position:absolute;inset:0;background-size:cover;background-position:center 30%}
.store-hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,20,14,.72),rgba(26,20,14,.82))}
.store-hero .wrap{position:relative;z-index:2;padding:clamp(64px,12vw,120px) 24px}
.store-hero .wm{font-family:'Cormorant Garamond',serif;font-weight:600;letter-spacing:.42em;color:var(--gold-soft);font-size:18px}
.store-hero h1{font-size:clamp(32px,6vw,58px);color:#fff;margin:16px auto 16px;max-width:20ch}
.store-hero p{color:rgba(255,255,255,.9);max-width:60ch;margin:0 auto;font-size:clamp(15px,2.3vw,19px)}

.grid-cursos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.curso-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  text-decoration:none;color:inherit;transition:transform .18s ease, box-shadow .18s ease;box-shadow:0 6px 20px rgba(0,0,0,.05)}
.curso-card:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(0,0,0,.13)}
.curso-card .thumb{aspect-ratio:4/3;position:relative;overflow:hidden}
.curso-card .thumb .img{position:absolute;inset:0;background-size:cover;background-position:center}
.curso-card .thumb .vl{position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,20,14,.05),rgba(26,20,14,.5))}
.curso-card .thumb .tag{position:absolute;left:14px;top:14px;z-index:2;background:var(--gold-soft);color:var(--dark);
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:50px}
.curso-card .body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.curso-card .key{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:var(--bronze-deep)}
.curso-card h3{font-size:23px;margin:8px 0 8px;line-height:1.12}
.curso-card .desc{font-size:14px;color:#6A5F50;line-height:1.5;flex:1}
.curso-card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px}
.curso-card .pr{font-weight:600;font-size:15px;color:var(--ink)}
.curso-card .pr b{font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--bronze-deep);font-weight:700}
.curso-card .pr s{color:var(--muted);font-weight:400;font-size:13px;margin-right:5px}
.curso-card .go{font-weight:600;font-size:14px;color:var(--bronze-deep);display:inline-flex;align-items:center;gap:6px}

/* combo */
.combo{max-width:880px;margin:0 auto;background:var(--paper);border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.28);
  display:grid;grid-template-columns:1.1fr .9fr}
.combo .l{padding:clamp(26px,4vw,42px)}
.combo .r{background:var(--dark);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:clamp(26px,4vw,42px)}
.combo .r .from{color:rgba(255,255,255,.6);text-decoration:line-through;font-size:17px}
.combo .r .now{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:62px;line-height:1;color:var(--gold-soft)}
.combo .r .now small{font-size:26px;vertical-align:super}
.combo .mini{list-style:none;display:grid;gap:9px;margin-top:18px}
.combo .mini li{display:flex;gap:10px;font-size:14.5px;align-items:flex-start}
.combo .mini .ic{color:var(--bronze-deep);font-weight:700}

@media (max-width:880px){
  .grid-cursos{grid-template-columns:repeat(2,1fr)}
  .combo{grid-template-columns:1fr}
}
@media (max-width:760px){
  .cards.c2,.cards.c3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:24px}
  .split img{max-height:360px}
  .reviews{grid-template-columns:1fr}
  .g-rating .g-meta{text-align:center}
  .bonus-strip{grid-template-columns:1fr;text-align:center}
  .hero{min-height:auto;padding-top:20px}
  .grid-cursos{grid-template-columns:1fr}
}