@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800;900&family=Manrope:wght@200;300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  --pk: #FAA61A; --mk: #F57F26; --mb: #8F5EA7;
  --ca: #2C479E; --wk: #4988C7; --hm: #00796D;
  --sh: #D8345F;
  --ink: #0C0C0C; --ink2: #1C1C1E;
  --w: #FFFFFF; --g50: #F7F7F5; --g100: #F0F0EE;
  --g200: #E2E2DE; --g300: #C0C0BC;
  --g400: #8C8C88; --g500: #6C6C68;
  --f: 'Nunito', sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --r: 20px; --r-sm: 14px; --r-xs: 10px;
  --nav: 60px; --tab: 74px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.06), 0 2px 12px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08), 0 8px 32px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12), 0 24px 64px rgba(0,0,0,.08);
}

:root.dark {
  --ink: #FFFFFF; --ink2: #F0F0F0;
  --w: #1C1C1E; --g50: #0C0C0C; --g100: #121212;
  --g200: #2C2C2E; --g300: #3A3A3C;
  --g400: #8C8C88; --g500: #A0A0A0;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.3), 0 2px 12px rgba(0,0,0,.2);
  --shadow-md: 0 4px 16px rgba(0,0,0,.4), 0 8px 32px rgba(0,0,0,.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.5), 0 24px 64px rgba(0,0,0,.4);
}

.dark .invert-dark {
  filter: brightness(0) invert(1);
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--g100); }
body { font-family: var(--f); -webkit-font-smoothing: antialiased; color: var(--ink); }
svg { display: block; flex-shrink: 0; }
button, a { font-family: var(--f); cursor: pointer; border: none; background: none; color: inherit; text-decoration: none; outline: none; }
img { display: block; }

/* ─── SHELL ─── */
#shell {
  width: 100%; max-width: 393px; height: 100%;
  margin: 0 auto; background: var(--g50);
  display: flex; flex-direction: column; overflow: hidden; position: relative;
}

/* ─── STATUS BAR ─── */
.sb {
  height: 44px; display: flex; align-items: center;
  justify-content: space-between; padding: 0 22px;
  flex-shrink: 0; background: var(--w);
}
.sb-time { font-size: 15px; font-weight: 800; letter-spacing: -.4px; color: var(--ink); }
.sb-r { display: flex; align-items: center; gap: 5px; }
.sb-r svg { width: 14px; height: 14px; color: var(--ink); }

/* ─── COLOR STRIPE ─── */
.stripe { height: 4px; display: flex; flex-shrink: 0; background: var(--w); }
.stripe span { flex: 1; }

/* ─── NAV ─── */
.nav {
  height: var(--nav); display: flex; align-items: center;
  justify-content: space-between; padding: 0 20px;
  flex-shrink: 0; background: var(--w);
  box-shadow: 0 1px 0 var(--g100);
}
.nav-logo { height: 20px; display: block; width: auto; }
.nav-r { display: flex; gap: 6px; }
.nav-btn {
  width: 38px; height: 38px; border-radius: var(--r-xs);
  background: var(--g50); border: 1px solid var(--g200);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s var(--spring); position: relative;
  color: var(--ink);
}
.nav-btn:active { transform: scale(.9); background: var(--g100); }
.nav-btn svg { width: 18px; height: 18px; }
.ndot {
  position: absolute; top: 7px; right: 7px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pk); border: 2px solid var(--w);
}

/* ─── NOTIF BANNER ─── */
.notif {
  position: absolute; top: 16px; left: 50%; transform: translate(-50%, -150%); width: calc(100% - 44px); max-width: 436px; z-index: 900;
  background: var(--w); border: 1px solid var(--g200); border-radius: 16px;
  padding: 12px 18px; display: flex; align-items: center; gap: 12px;
  transition: transform .4s var(--ease);
  box-shadow: var(--shadow-md);
}
.notif.show { transform: translate(-50%, 0); }
.notif-color { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-color svg { width: 18px; height: 18px; }
.notif-t { font-size: 13px; font-weight: 800; margin-bottom: 2px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-s { font-size: 11px; color: var(--g400); font-weight: 600; line-height: 1.4; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-x { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--g300); transition: all .15s; }
.notif-x:active { background: var(--g100); color: var(--ink); }
.notif-x svg { width: 14px; height: 14px; }

/* ─── SCREENS ─── */
.screens { flex: 1; position: relative; overflow: hidden; background: var(--g50); }
.screen {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--tab) + 20px);
  opacity: 0; pointer-events: none;
  transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.screen.on { opacity: 1; pointer-events: all; transform: none; }
.screen::-webkit-scrollbar { display: none; }

/* ─── BASE COMPONENTS ─── */
.card { background: var(--w); border-radius: var(--r); border: 1px solid var(--g200); box-shadow: var(--shadow-sm); }
.card-sm { background: var(--w); border-radius: var(--r-sm); border: 1px solid var(--g200); box-shadow: var(--shadow-sm); }
.card-xs { background: var(--w); border-radius: var(--r-xs); border: 1px solid var(--g200); }
.sec-hd { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 11px; }
.sec-hd h3 { font-size: 16px; font-weight: 800; letter-spacing: -.3px; }
.sec-hd button { font-size: 12px; font-weight: 700; color: var(--g400); font-family: var(--f); display: flex; align-items: center; gap: 3px; }
.sec-hd button svg { width: 13px; height: 13px; }
.btn {
  border-radius: var(--r-sm); padding: 15px;
  font-size: 14px; font-weight: 800; font-family: var(--f);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; transition: all .18s var(--spring); border: none; width: 100%;
}
.btn svg { width: 16px; height: 16px; }
.btn:active { transform: scale(.97); }
.btn-pk { background: var(--pk); color: #fff; box-shadow: 0 4px 18px rgba(250,166,26,.28); }
.btn-wk { background: var(--wk); color: #fff; box-shadow: 0 4px 18px rgba(73,136,199,.22); }
.btn-ca { background: var(--ca); color: #fff; box-shadow: 0 4px 18px rgba(44,71,158,.22); }
.btn-mk { background: var(--mk); color: #fff; box-shadow: 0 4px 18px rgba(245,127,38,.22); }
.btn-mb { background: var(--mb); color: #fff; box-shadow: 0 4px 18px rgba(143,94,167,.22); }
.btn-hm { background: var(--hm); color: #fff; box-shadow: 0 4px 18px rgba(0,121,109,.18); }
.btn-sh { background: var(--sh); color: #fff; box-shadow: 0 4px 18px rgba(216,52,95,.22); }
.btn-ink { background: var(--ink2); color: var(--w); box-shadow: 0 4px 18px rgba(0,0,0,.18); }
.btn-ghost { background: var(--g50); border: 1.5px solid var(--g200); color: var(--ink); }
.lbl { font-size: 10px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; color: var(--g400); }
.val-green { color: #16a34a; font-weight: 800; }
.val-muted { color: var(--g400); font-weight: 700; }

/* ─── TAB BAR ─── */
.tabbar {
  height: calc(54px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border-top: 1px solid var(--g200);
  background: var(--w);
  flex-shrink: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -1px 0 var(--g200), 0 -8px 24px rgba(0,0,0,.04);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.tabbar::-webkit-scrollbar {
  display: none;
}

.tab {
  flex: 0 0 auto;
  min-width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 10px;
  cursor: pointer;
  position: relative;
  transition: none;
  scroll-snap-align: center;
}

.tab::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 24px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--tab-c, var(--ink));
  transition: transform .25s var(--spring);
}

.tab.on::before {
  transform: translateX(-50%) scaleX(1);
}

.tab-logo,
.tab.on .tab-logo,
.tab-home-ic,
.tab.on .tab-home-ic,
.tab-bracket,
.tab-bracket-hidden {
  display: none;
}

.tab-l {
  font-size: 9px;
  font-weight: 800;
  color: var(--g300);
  letter-spacing: -.2px;
  transition: color .22s;
  line-height: 1;
  text-transform: uppercase;
}

.tab.on .tab-l {
  color: var(--tab-c, var(--ink));
}

/* ─── MODAL ─── */
.mbg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: 0 auto; width: 100%; max-width: 393px; background: rgba(0,0,0,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .28s; }
.mbg.show { opacity: 1; pointer-events: all; }
.modal { position: absolute; bottom: 0; left: 0; right: 0; background: var(--w); border-radius: 16px 16px 0 0; border-top: 1px solid var(--g200); padding: 0 0 calc(38px + env(safe-area-inset-bottom)); max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateY(100%); transition: transform .36s var(--ease); box-shadow: 0 -12px 50px rgba(0,0,0,.1); }
.modal.show { transform: translateY(0); }
.modal::-webkit-scrollbar { display: none; }
.modal-handle { width: 34px; height: 4px; border-radius: 2px; background: var(--g200); margin: 14px auto 18px; }
.modal-h { padding: 0 22px; font-size: 21px; font-weight: 900; letter-spacing: -.6px; color: var(--ink); margin-bottom: 5px; }
.modal-sub { padding: 0 22px; font-size: 13px; color: var(--g400); margin-bottom: 20px; line-height: 1.55; }
.modal-body { padding: 0 22px; }

/* ─── ANIMATIONS ─── */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .45s var(--ease) both; }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
.pop { animation: pop .4s var(--spring) both; }
@keyframes slidein { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes gpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.3); } 55% { box-shadow: 0 0 0 5px rgba(34,197,94,0); } }
@keyframes mping { 0%, 100% { box-shadow: 0 0 0 0 rgba(143,94,167,.28); } 55% { box-shadow: 0 0 0 18px rgba(143,94,167,0); } }

/* ─── DESKTOP FRAME ─── */
@media(min-width: 480px) {
  body {
    background: radial-gradient(ellipse 60% 50% at 25% 20%, rgba(250,166,26,.05), transparent),
                radial-gradient(ellipse 60% 50% at 75% 80%, rgba(73,136,199,.05), transparent),
                var(--g100);
    display: flex; align-items: center; justify-content: center; min-height: 100vh;
  }
  #shell { height: min(870px, 96dvh); border-radius: 46px; border: 1px solid var(--g200); box-shadow: 0 40px 100px rgba(0,0,0,.14), 0 1px 0 rgba(255,255,255,.9) inset; overflow: hidden; }
}

/* iOS install prompt strip */
.install-hint {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); /* 60px tabbar + 12px gap */
  background: #0C0C0C; color: #fff; border-radius: 14px;
  padding: 10px 14px 10px 12px; display: none; align-items: center; gap: 10px;
  font-family: 'Nunito', sans-serif; font-size: 12px; font-weight: 700;
  box-shadow: 0 12px 40px rgba(0,0,0,.28); z-index: 999999 !important; max-width: 88%;
  pointer-events: auto !important;
}
.install-hint.show { display: flex; }
.install-hint svg { width: 16px; height: 16px; flex-shrink: 0; color: #FAA61A; }
.install-hint button {
  background: #FAA61A; color: #0C0C0C; border: none; padding: 6px 10px;
  border-radius: 9px; font-weight: 900; font-size: 11px; cursor: pointer;
  font-family: inherit; margin-left: 2px;
}
.install-hint .ih-x { background: transparent; color: rgba(255,255,255,.5); padding: 6px 4px; }


/* ─── Placeholder do hero do Work (substitui o JPEG gigante) ─── */
.wk-hero-ph{
  position:absolute;inset:0;width:100%;height:100%;
  background:
    linear-gradient(135deg, rgba(73,136,199,.95) 0%, rgba(44,71,158,.85) 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 18px, transparent 18px 36px);
  background-blend-mode:overlay;
  opacity:.95;
}
.wk-hero-ph::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 25% 30%, rgba(255,255,255,.18), transparent 45%),
    radial-gradient(circle at 75% 80%, rgba(0,0,0,.22), transparent 50%);
}
/* iOS install prompt strip — só aparece em standalone fora */



.bw-menu{position:absolute;inset:0;z-index:610;pointer-events:none;overflow:hidden}
.bw-menu.show{pointer-events:all}
.bw-menu-bg{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(8px);opacity:0;transition:opacity .35s var(--ease)}
.bw-menu.show .bw-menu-bg{opacity:1}
.bw-menu-panel{
  position:absolute;top:0;right:0;bottom:0;width:88%;max-width:380px;
  background:#0a0a0a;color:#fff;transform:translateX(105%);
  transition:transform .42s var(--ease);
  display:flex;flex-direction:column;
  box-shadow:-20px 0 50px rgba(0,0,0,.3);will-change:transform;overflow:hidden;
}
.bw-menu.show .bw-menu-panel{transform:translateX(0)}
.bw-menu-head{
  padding:24px 22px 18px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  border-bottom:none;
}
.bw-menu-eye{font-family:var(--hm-mono);font-size:9px;font-weight:500;letter-spacing:2.4px;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:6px}
.bw-menu-title{font-family:var(--hm-display);font-size:32px;font-weight:200;letter-spacing:-1.4px;color:#fff;line-height:.95;text-transform:capitalize}
.bw-menu-close{
  width:36px;height:36px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
  transition:background .15s;
}
.bw-menu-close:active{background:rgba(255,255,255,.18)}
.bw-menu-body{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 22px 30px;
}
.bw-menu-body::-webkit-scrollbar{display:none}
.bw-section{padding:22px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.bw-section:last-child{border-bottom:none}
.bw-section-eye{font-family:var(--hm-mono);font-size:9px;font-weight:500;letter-spacing:2.2px;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:12px}
.bw-section-sub{font-size:12px;color:rgba(255,255,255,.55);font-weight:400;margin-bottom:12px;line-height:1.5}
.bw-manifesto{
  font-family:var(--hm-display);font-size:22px;font-weight:200;letter-spacing:-.8px;
  color:rgba(255,255,255,.55);line-height:1.25;margin-bottom:10px;text-transform:lowercase;
}
.bw-manifesto em{font-style:normal;font-weight:400;color:#fff}
.bw-about{font-size:13px;color:rgba(255,255,255,.72);font-weight:400;line-height:1.65;letter-spacing:-.1px}
.bw-lang{display:flex;gap:6px}
.bw-lang-btn{
  flex:1;padding:11px 0;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  background:transparent;color:rgba(255,255,255,.55);
  font-family:var(--hm-mono);font-size:11px;font-weight:600;letter-spacing:1.4px;cursor:pointer;
  transition:all .18s;
}
.bw-lang-btn.on{background: var(--w);color:var(--ink);border-color:var(--w)}
.bw-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.bw-contact-card{
  display:flex;align-items:center;gap:10px;padding:13px 14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;cursor:pointer;font-family:var(--f);text-align:left;
  color:#fff;transition:background .15s;
}
.bw-contact-card:active{background:rgba(255,255,255,.1)}
.bw-c-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.bw-c-n{font-size:13px;font-weight:700;letter-spacing:-.2px}
.bw-address{
  display:flex;align-items:center;gap:12px;padding:14px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;text-decoration:none;color:#fff;
  transition:background .15s;
}
.bw-address:active{background:rgba(255,255,255,.1)}
.bw-address svg{width:18px;height:18px;color:rgba(255,255,255,.6);flex-shrink:0}
.bw-address-l1{font-size:13px;font-weight:700;color:#fff;letter-spacing:-.2px}
.bw-address-l2{font-size:11px;color:rgba(255,255,255,.5);font-weight:500;margin-top:2px}
.bw-address-arr{margin-left:auto;font-family:var(--hm-mono);font-size:9px;font-weight:500;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.55);white-space:nowrap}
.bw-social{display:flex;flex-direction:column;gap:6px}
.bw-social-btn{
  display:flex;align-items:center;gap:12px;padding:13px 16px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;
  text-decoration:none;color:#fff;font-family:var(--f);font-size:13px;font-weight:600;letter-spacing:-.1px;
  transition:background .15s;
}
.bw-social-btn:active{background:rgba(255,255,255,.1)}
.bw-social-btn svg{width:18px;height:18px;color:rgba(255,255,255,.65)}
.bw-menu-footer{
  margin-top:32px;padding-top:18px;border-top:1px solid rgba(255,255,255,.06);text-align:center;
}
.bw-footer-mark{
  font-family:var(--f);font-size:22px;font-weight:300;color:rgba(255,255,255,.3);letter-spacing:-.5px;margin-bottom:8px;
}
.bw-footer-cr{font-family:var(--hm-mono);font-size:9px;font-weight:500;color:rgba(255,255,255,.3);letter-spacing:1.4px;text-transform:uppercase}


/* --- TABBAR VISIBILITY OVERRIDES --- */
.tab-logo, .tab.on .tab-logo {
  display: block !important;
}
.tab-home-ic, .tab.on .tab-home-ic {
  display: block !important;
  margin: 0 auto;
  width: 28px !important;
  height: 28px !important;
}
.tab-bracket, .tab.on .tab-bracket {
  display: block !important;
  margin: 0 auto;
  font-size: 32px !important;
}
.tab-l {
  display: none !important;
}