:root{
  --orange:#E2872C; --orange-2:#EFA24A; --orange-soft:#F6C88A;
  --brown:#4A2E1C; --brown-2:#6B4426; --brown-soft:#8a6a4e;
  --cream:#F1EAD8; --cream-2:#EBE2CC; --paper:#FBF7EC;
  --ink:#3a2716;
  --shadow:0 14px 40px -18px rgba(74,46,28,.55);
  --nav-h:64px;
  --font:'Fredoka','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); color:var(--ink);
  background:var(--paper);
  background-image:radial-gradient(120% 60% at 50% -10%, #fff6e6 0%, var(--paper) 60%);
  min-height:100dvh; overscroll-behavior-y:none;
}
body.dark{
  --paper:#20160e; --cream:#2a1d12; --cream-2:#241810; --ink:#f2e7d5;
  --brown:#f0e2cf; --brown-2:#e7d3b8; --shadow:0 14px 40px -18px rgba(0,0,0,.7);
  background-image:radial-gradient(120% 60% at 50% -10%, #33220f 0%, var(--paper) 60%);
}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.app{max-width:520px;margin:0 auto;min-height:100dvh;position:relative;padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom))}

/* Topbar */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;background:linear-gradient(var(--paper),rgba(251,247,236,.0));backdrop-filter:blur(6px)}
body.dark .topbar{background:linear-gradient(var(--paper),rgba(32,22,14,0))}
.brand{display:flex;align-items:center;gap:9px;font-weight:600}
.brand .cup{width:30px;height:30px;color:var(--orange)}
.brand b{color:var(--brown);font-weight:700;letter-spacing:-.3px}
.brand b span{color:var(--orange)}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--brown-2);background:var(--cream)}
.icon-btn svg{width:20px;height:20px}

/* Screens */
.screen{display:none;padding:6px 18px 22px;animation:fade .35s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Home hero */
.hero{border-radius:26px;overflow:hidden;position:relative;box-shadow:var(--shadow);margin-top:4px}
.hero img{width:100%;height:230px;object-fit:cover}
.hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,25,12,.05) 0%,rgba(40,25,12,.72) 100%)}
.hero .cap{position:absolute;left:20px;right:20px;bottom:16px;color:#fff}
.hero .cap small{opacity:.9;font-weight:500;letter-spacing:.4px;text-transform:uppercase;font-size:11px}
.hero .cap h2{margin:.15em 0 0;font-size:22px;font-weight:600;line-height:1.15;text-shadow:0 2px 10px rgba(0,0,0,.4)}

.progress-wrap{margin:18px 2px 6px}
.progress-head{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--brown-2);font-weight:500}
.progress-head b{color:var(--orange);font-weight:700}
.bar{height:9px;border-radius:20px;background:var(--cream-2);margin-top:8px;overflow:hidden}
.bar span{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,var(--orange),var(--orange-2))}

.section-t{font-size:13px;font-weight:600;color:var(--brown-2);text-transform:uppercase;letter-spacing:.6px;margin:24px 4px 12px;display:flex;align-items:center;gap:8px}
.section-t::before{content:"";width:16px;height:2px;background:var(--orange);border-radius:2px}

/* Countdown */
.next{display:flex;align-items:center;gap:12px;background:var(--cream);border-radius:18px;padding:14px 16px;margin-top:14px}
.next .ic{width:42px;height:42px;border-radius:12px;background:var(--orange);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.next .ic svg{width:22px;height:22px}
.next p{margin:0;font-size:14px;color:var(--brown-2)}
.next p b{color:var(--brown);font-weight:700}

/* ===== CARTA ===== */
.card{
  position:relative;border-radius:20px;padding:20px 20px 22px;box-shadow:var(--shadow);
  aspect-ratio:63/88;display:flex;flex-direction:column;overflow:hidden;
  border:0; isolation:isolate; --c:var(--orange);
}
.card::after{content:"";position:absolute;inset:11px;border:1.6px solid var(--frame);border-radius:14px;pointer-events:none;opacity:.85}
.card .row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;z-index:1}
.card .pil{font-size:11px;font-weight:600;letter-spacing:.6px;line-height:1.15;max-width:44%;text-transform:uppercase;opacity:.95}
.card .cupmini{width:26px;height:26px;opacity:.9}
.card .num{font-size:30px;font-weight:700;line-height:.9}
.card .center{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;gap:10px;z-index:1;padding:6px 2px}
.card .q{font-size:clamp(15px,4.6vw,20px);font-weight:600;line-height:1.28}
.card .gole-l{font-size:11px;font-weight:600;font-style:italic;letter-spacing:.8px;opacity:.85;margin-top:4px}
.card .g{font-size:clamp(12px,3.6vw,14px);font-weight:500;line-height:1.35}
.card .foot{transform:rotate(180deg);z-index:1}
.card .foot .pil{max-width:44%}

/* tons */
.card.cream{background:var(--cream);color:var(--orange);--frame:var(--orange)}
.card.cream .q{color:var(--orange)}
.card.cream .gole-l,.card.cream .g{color:var(--brown-2)}
.card.cream .cupmini,.card.cream .num,.card.cream .pil{color:var(--orange)}
.card.orange{background:linear-gradient(160deg,var(--orange-2),var(--orange));color:#fdf4e4;--frame:#fbe6c8}
.card.orange .q{color:#fff}
.card.orange .gole-l{color:#fff;opacity:.9}
.card.orange .g{color:#5a350f}
.card.brown{background:linear-gradient(160deg,#5a3a22,#3a2413);color:var(--orange-2);--frame:#c98f4e}
.card.brown .q{color:var(--orange-2)}
.card.brown .gole-l{color:#e9cfa8}
.card.brown .g{color:#eaddc7}
.card.brown .num,.card.brown .cupmini,.card.brown .pil{color:var(--orange-2)}
body.dark .card.cream{background:#2e2013}

/* Home current card (flip) */
.flip{perspective:1400px;margin-top:2px}
.flip .inner{position:relative;transition:transform .7s cubic-bezier(.4,.15,.2,1);transform-style:preserve-3d}
.flip.open .inner{transform:rotateY(180deg)}
.flip .face{backface-visibility:hidden}
.flip .back{position:absolute;inset:0;transform:rotateY(180deg)}
/* verso (capa) */
.cover{aspect-ratio:63/88;border-radius:20px;background:linear-gradient(160deg,#5a3a22,#38220f);box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--orange-2);position:relative;overflow:hidden}
.cover::after{content:"";position:absolute;inset:11px;border:1.6px solid #b9793e;border-radius:14px;opacity:.6}
.cover .cup{width:74px;height:74px;color:var(--orange)}
.cover .t{font-weight:700;font-size:19px;color:#f3ddba;text-align:center;line-height:1.1}
.cover .t span{color:var(--orange)}
.cover small{color:#d8b483;font-size:12px;letter-spacing:1px;text-transform:uppercase}
.tap-hint{text-align:center;font-size:12.5px;color:var(--brown-soft);margin-top:12px;font-weight:500}

/* Deck grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px}
.mini{position:relative;aspect-ratio:63/88;border-radius:14px;overflow:hidden;box-shadow:0 8px 20px -12px rgba(74,46,28,.5);display:flex;flex-direction:column;justify-content:space-between;padding:10px;text-align:left}
.mini.locked{background:var(--cream-2);color:var(--brown-soft);box-shadow:none;border:1.5px dashed rgba(139,106,78,.4)}
body.dark .mini.locked{border-color:rgba(200,160,110,.25)}
.mini .mtop{display:flex;align-items:center;justify-content:space-between}
.mini .mn{font-size:17px;font-weight:700}
.mini .cupmini{width:17px;height:17px;opacity:.85}
.mini .mbot{display:flex;flex-direction:column;gap:2px}
.mini .mp{font-size:8.5px;font-weight:600;letter-spacing:.3px;line-height:1.1;text-transform:uppercase;opacity:.92}
.mini .wk{font-size:9px;font-weight:600;opacity:.7}
.mini .lock{position:absolute;inset:0;display:grid;place-items:center}
.mini .lock svg{width:20px;height:20px;opacity:.6}
.mini.locked .mbot{align-items:center;width:100%}
.mini.locked .wk{margin-bottom:2px}
.mini.cream{background:var(--cream);color:var(--orange)}
.mini.orange{background:linear-gradient(160deg,var(--orange-2),var(--orange));color:#fff}
.mini.brown{background:linear-gradient(160deg,#5a3a22,#38220f);color:var(--orange-2)}
.mini.new::before{content:"NOVA";position:absolute;top:0;left:50%;transform:translateX(-50%);background:#fff;color:var(--orange);font-size:8px;font-weight:700;padding:2px 8px;border-radius:0 0 8px 8px;letter-spacing:.5px;z-index:2;box-shadow:0 3px 8px -3px rgba(0,0,0,.3)}

/* Ritual screen */
.ritual-card{background:var(--cream);border-radius:22px;padding:22px;box-shadow:var(--shadow);margin-top:6px}
body.dark .ritual-card{background:#2a1d12}
.ritual-card h3{margin:0 0 4px;color:var(--orange);font-size:22px;font-weight:700}
.ritual-card>p{color:var(--brown-2);font-size:14px;margin:0 0 16px}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.steps li{display:flex;gap:12px;align-items:flex-start}
.steps .n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--orange);color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center}
.steps p{margin:2px 0;font-size:14.5px;color:var(--brown);line-height:1.35}
.ritual-note{margin-top:18px;padding:14px 16px;border-radius:14px;background:linear-gradient(160deg,#5a3a22,#3a2413);color:#f0dcc0;font-size:14px;font-style:italic;line-height:1.4;text-align:center}

/* Assinatura */
.plan{border-radius:22px;padding:22px;box-shadow:var(--shadow);margin-top:14px;background:var(--cream);position:relative;overflow:hidden}
body.dark .plan{background:#2a1d12}
.plan.hi{background:linear-gradient(160deg,#5a3a22,#38220f);color:#f3e6d3}
.plan .tag{position:absolute;top:0;right:0;background:var(--orange);color:#fff;font-size:11px;font-weight:700;padding:5px 14px;border-bottom-left-radius:12px;letter-spacing:.5px}
.plan h3{margin:0;font-size:17px;font-weight:700;color:var(--orange)}
.plan .price{font-size:34px;font-weight:700;color:var(--brown);margin:6px 0 2px}
.plan.hi .price,.plan.hi h3{color:#fff}
.plan .price small{font-size:14px;font-weight:600;color:var(--brown-soft)}
.plan.hi .price small{color:#e6c9a5}
.plan ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.plan li{display:flex;gap:9px;font-size:14px;color:var(--brown-2);align-items:flex-start}
.plan.hi li{color:#eeddc8}
.plan li svg{width:18px;height:18px;color:var(--orange);flex:0 0 auto;margin-top:1px}
.plan.hi li svg{color:var(--orange-2)}
.cta{display:block;width:100%;margin-top:16px;padding:15px;border-radius:15px;background:var(--orange);color:#fff;font-weight:700;font-size:15px;text-align:center;box-shadow:0 10px 24px -12px var(--orange)}
.cta.ghost{background:transparent;color:var(--orange);border:2px solid var(--orange);box-shadow:none}

/* Bottom nav */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:40;height:calc(var(--nav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  max-width:520px;margin:0 auto;display:flex;background:rgba(251,247,236,.9);backdrop-filter:blur(12px);border-top:1px solid var(--cream-2)}
body.dark .nav{background:rgba(28,19,12,.92);border-top-color:#3a281a}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--brown-soft);font-size:10.5px;font-weight:600}
.nav button svg{width:23px;height:23px}
.nav button.on{color:var(--orange)}
.nav button.on svg{transform:translateY(-1px)}

/* Welcome / onboarding overlay */
.onb{position:fixed;inset:0;z-index:60;background:linear-gradient(170deg,#5a3a22,#2c1a0d);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 26px;text-align:center;color:#f3e6d3}
.onb.hide{display:none}
.onb .cup{width:90px;height:90px;color:var(--orange);animation:pop .6s ease}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.onb .logo-t{font-size:30px;font-weight:700;margin:16px 0 2px;color:#f3ddba;line-height:1}
.onb .logo-t span{color:var(--orange)}
.onb .sub{font-size:13px;color:#d8b483;letter-spacing:1px;text-transform:uppercase;margin-bottom:26px}
.onb .wtitle{font-size:24px;color:var(--orange);font-weight:700;margin:0 0 10px}
.onb .wtext{font-size:15px;line-height:1.5;color:#ecdcc6;max-width:340px}
.onb .cta{max-width:320px;margin-top:26px}

/* demo bar */
.demo{position:fixed;bottom:calc(var(--nav-h) + 14px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:45;display:flex;gap:8px;align-items:center;background:var(--brown);color:#f0dcc0;padding:7px 10px;border-radius:30px;box-shadow:var(--shadow);font-size:11.5px;font-weight:600}
.demo button{background:var(--orange);color:#fff;width:26px;height:26px;border-radius:50%;font-weight:700;font-size:15px;display:grid;place-items:center}
.demo span{min-width:96px;text-align:center}

/* modal */
.modal{position:fixed;inset:0;z-index:70;background:rgba(30,18,9,.72);display:none;align-items:center;justify-content:center;padding:22px;backdrop-filter:blur(3px)}
.modal.show{display:flex;animation:fade .25s ease}
.modal .box{width:100%;max-width:360px}
.modal .close{display:block;margin:16px auto 0;color:#f0dcc0;font-size:13px;font-weight:600}