/* ============================================================
   HUB7 LIFE — Sistema visual do app (protótipo)
   Cores extraídas da marca: SAÚDE(vermelho) · PROTEÇÃO(azul)
   ECONOMIA(amarelo) · OPORTUNIDADE(verde)
   ============================================================ */
:root{
  --navy:#0A2150;
  --navy-700:#10306E;
  --navy-900:#061634;
  --red:#D81F26;
  --blue:#0588DA;
  --blue-bright:#00A6EA;
  --yellow:#F2B705;
  --green:#237A3C;
  --green-bright:#35A050;

  --ink:#10213C;
  --muted:#647697;
  --muted-2:#90A0BC;
  --line:#E4E9F2;
  --line-2:#EEF1F7;
  --bg:#F3F6FB;
  --card:#FFFFFF;

  --grad-7:linear-gradient(135deg,#0A2150 0%,#1A6B5E 45%,#237A3C 100%);
  --grad-brand:linear-gradient(120deg,#D81F26 0%,#F2B705 33%,#0588DA 66%,#237A3C 100%);
  --grad-navy:linear-gradient(165deg,#10306E 0%,#0A2150 55%,#061634 100%);
  --grad-green:linear-gradient(135deg,#35A050 0%,#237A3C 100%);

  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:26px;
  --shadow-sm:0 1px 2px rgba(16,33,60,.06), 0 1px 3px rgba(16,33,60,.04);
  --shadow:0 6px 18px rgba(16,33,60,.08), 0 2px 6px rgba(16,33,60,.05);
  --shadow-lg:0 18px 40px rgba(16,33,60,.16), 0 6px 14px rgba(16,33,60,.08);

  --font-display:'Sora',system-ui,sans-serif;
  --font:'Manrope',system-ui,sans-serif;
}

*{box-sizing:border-box;}
.h7{
  font-family:var(--font);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.h7 ::selection{background:rgba(5,136,218,.18);}

/* screen shell -------------------------------------------------*/
.screen{
  min-height:100%;
  display:flex;
  flex-direction:column;
  position:relative;
}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;}
.scroll::-webkit-scrollbar{width:0;height:0;}
.safe-top{padding-top:56px;}
.pad{padding-left:22px;padding-right:22px;}

/* typography ---------------------------------------------------*/
.display{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.05;}
.eyebrow{font-family:var(--font);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);}
.h1{font-family:var(--font-display);font-weight:700;font-size:27px;letter-spacing:-.02em;line-height:1.12;}
.h2{font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:-.015em;}
.lead{font-size:15.5px;line-height:1.5;color:var(--muted);}
.tiny{font-size:12.5px;line-height:1.45;color:var(--muted);}
.num{font-family:var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em;}

/* buttons ------------------------------------------------------*/
.btn{
  appearance:none;border:0;cursor:pointer;width:100%;
  height:56px;border-radius:var(--r);
  font-family:var(--font);font-weight:700;font-size:16px;letter-spacing:-.01em;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, opacity .2s;
}
.btn:active{transform:translateY(1px) scale(.992);}
.btn-primary{background:var(--navy);color:#fff;box-shadow:0 8px 20px rgba(10,33,80,.28);}
.btn-primary:hover{background:#0c2862;}
.btn-green{background:var(--grad-green);color:#fff;box-shadow:0 8px 20px rgba(47,160,30,.32);}
.btn-ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line);box-shadow:var(--shadow-sm);}
.btn-ghost:hover{border-color:#cdd6e6;}
.btn-sm{height:46px;font-size:14.5px;border-radius:12px;width:auto;padding:0 18px;}
.btn[disabled]{opacity:.45;cursor:not-allowed;}

/* inputs -------------------------------------------------------*/
.field{margin-bottom:10px;}
.field label{display:block;font-size:12px;font-weight:700;color:var(--ink);margin-bottom:4px;letter-spacing:-.01em;}
.input-wrap{position:relative;display:flex;align-items:center;}
.input{
  width:100%;height:44px;border-radius:11px;border:1.5px solid var(--line);
  background:#fff;padding:0 13px;font-family:var(--font);font-size:14.5px;color:var(--ink);
  transition:border-color .15s, box-shadow .15s;outline:none;
}
.input.has-icon{padding-left:40px;}
.input::placeholder{color:var(--muted-2);}
.input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(5,136,218,.13);}
.input-ico{position:absolute;left:15px;display:flex;color:var(--muted-2);pointer-events:none;}
.input-suffix{position:absolute;right:14px;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;}
.eye{cursor:pointer;color:var(--muted-2);background:0;border:0;padding:4px;display:flex;}
.eye:hover{color:var(--muted);}

/* cards --------------------------------------------------------*/
.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);}
.card-flat{background:var(--card);border-radius:var(--r-lg);border:1.5px solid var(--line);}

/* misc ---------------------------------------------------------*/
.chip{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;
  font-size:12px;font-weight:700;letter-spacing:.01em;
}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted-2);font-size:12.5px;font-weight:600;margin:18px 0;}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line);}
.brand-rule{height:4px;border-radius:4px;background:var(--grad-brand);}

.link{color:var(--blue);font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;}
.link:hover{text-decoration:underline;}

/* construction badge ------------------------------------------*/
.soon{
  display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  background:rgba(242,183,5,.16);color:#9a7400;
}
.soon-dot{width:6px;height:6px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 3px rgba(242,183,5,.22);}

/* bottom tab bar ----------------------------------------------*/
.tabbar{
  display:flex;align-items:stretch;justify-content:space-around;
  background:rgba(255,255,255,.92);backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-top:1px solid var(--line);padding:8px 6px 26px;flex-shrink:0;
}
.tab{flex:1;background:0;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted-2);padding:4px 0;}
.tab.active{color:var(--navy);}
.tab span{font-size:10.5px;font-weight:700;letter-spacing:-.01em;}

/* service tiles -----------------------------------------------*/
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.svc{
  position:relative;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);
  padding:16px;text-align:left;cursor:pointer;transition:transform .14s,box-shadow .2s,border-color .2s;
  overflow:hidden;
}
.svc:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#d6deeb;}
.svc-ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:12px;}
.svc h4{font-family:var(--font-display);font-weight:600;font-size:15px;margin:0 0 2px;letter-spacing:-.01em;}
.svc p{margin:0;font-size:12px;color:var(--muted);line-height:1.35;}
.svc.locked{opacity:1;}

/* animations ---------------------------------------------------*/
@keyframes rise{from{transform:translateY(12px);}to{transform:none;}}
@keyframes pop{from{transform:scale(.94);}to{transform:none;}}
@keyframes slideIn{from{transform:translateX(20px);}to{transform:none;}}
.rise{animation:rise .5s cubic-bezier(.2,.7,.3,1) both;}
.pop{animation:pop .4s cubic-bezier(.2,.8,.3,1.2) both;}
.stagger>*{animation:rise .55s cubic-bezier(.2,.7,.3,1) both;}
.stagger>*:nth-child(1){animation-delay:.04s;}
.stagger>*:nth-child(2){animation-delay:.10s;}
.stagger>*:nth-child(3){animation-delay:.16s;}
.stagger>*:nth-child(4){animation-delay:.22s;}
.stagger>*:nth-child(5){animation-delay:.28s;}
.stagger>*:nth-child(6){animation-delay:.34s;}
@media (prefers-reduced-motion:reduce){
  .rise,.pop,.stagger>*{animation:none!important;}
}