/* ============================================================
   HUB7 LIFE — Layout WEB responsivo (funil de entrada MVP)
   Reaproveita os tokens de app/styles.css
   ============================================================ */
.web{min-height:100vh;font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased;}

.web-shell{
  display:grid;grid-template-columns:minmax(360px,0.82fr) 1.1fr;height:100vh;
}

/* ---- painel de marca (esquerda) ---------------------------*/
.brand-panel{
  position:relative;height:100vh;overflow:hidden;
  background:var(--grad-navy);color:#fff;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:46px 48px;
}
.brand-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(165deg,rgba(10,33,80,.82) 0%,rgba(10,33,80,.74) 45%,rgba(6,22,52,.92) 100%),
    radial-gradient(520px 360px at -10% 110%,rgba(47,160,30,.30),transparent 60%);
}
.brand-panel>*{position:relative;z-index:1;}
.bp-logo{display:flex;align-items:center;gap:14px;}
.bp-headline{font-family:var(--font-display);font-weight:700;font-size:34px;line-height:1.12;letter-spacing:-.02em;max-width:13ch;}
.bp-sub{color:rgba(255,255,255,.72);font-size:16px;line-height:1.55;max-width:34ch;margin-top:14px;}
.bp-pillars{display:flex;flex-direction:column;gap:14px;margin-top:30px;}
.bp-pillar{display:flex;align-items:center;gap:13px;}
.bp-pillar .pi{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;}
.bp-pillar b{font-family:var(--font-display);font-weight:600;font-size:15px;}
.bp-pillar span{display:block;font-size:12.5px;color:rgba(255,255,255,.6);}
.bp-trust{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.66);font-size:13px;font-weight:600;}

/* ---- conteúdo (direita) -----------------------------------*/
.web-right{background:var(--bg);height:100vh;overflow-y:auto;}
.web-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 40px;position:sticky;top:0;z-index:5;
  background:rgba(243,246,251,.82);backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid var(--line);
}
.web-topbar .mobile-logo{display:none;}
.web-content{max-width:600px;margin:0 auto;padding:34px 40px 56px;}
.web-content.wide{max-width:1000px;}

/* steps bar web */
.steps{display:flex;align-items:center;gap:10px;margin-bottom:30px;}
.step{display:flex;align-items:center;gap:9px;}
.step-dot{width:30px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:14px;flex-shrink:0;transition:all .2s;}
.step-line{flex:1;height:2px;border-radius:2px;background:var(--line);min-width:18px;}
.step-label{font-size:14px;font-weight:700;white-space:nowrap;}

.web-h1{font-family:var(--font-display);font-weight:700;font-size:32px;letter-spacing:-.02em;line-height:1.1;}
.web-lead{font-size:16px;line-height:1.55;color:var(--muted);margin-top:8px;}

/* plano grid web */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;padding-top:18px;}
.plan-card{
  position:relative;background:#fff;border:2px solid var(--line);border-radius:24px;
  padding:24px 22px;cursor:pointer;transition:all .22s cubic-bezier(.4,0,.2,1);text-align:left;width:100%;
  box-shadow:0 2px 10px rgba(10,33,80,.06);display:flex;flex-direction:column;height:100%;overflow:visible;
}
.plan-card:hover{border-color:#bac6db;transform:translateY(-4px);box-shadow:0 10px 32px rgba(10,33,80,.11);}
.plan-card.sel{transform:translateY(-5px);}
.plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);height:26px;padding:0 14px;border-radius:999px;color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.06em;display:inline-flex;align-items:center;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.22);}

/* checkout web */
.checkout-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:start;}

/* grid de formulário 2 colunas (cadastro) */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
@media (max-width:560px){ .form-grid{grid-template-columns:1fr;gap:0;} }

/* ============================================================
   SISTEMA LOGADO — sidebar + dashboard
   ============================================================ */
.app-shell{display:grid;grid-template-columns:264px 1fr;min-height:100vh;background:var(--bg);}

/* sidebar */
.sidebar{
  background:var(--navy-900);color:#fff;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sidebar::-webkit-scrollbar{width:0;}
.sb-logo{padding:24px 22px 18px;display:flex;align-items:center;gap:11px;border-bottom:1px solid rgba(255,255,255,.08);}
.sb-scroll{flex:1;padding:16px 14px;overflow-y:auto;}
.sb-scroll::-webkit-scrollbar{width:0;}
.sb-group{margin-bottom:20px;}
.sb-group-label{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.36);padding:0 12px;margin-bottom:8px;}
.sb-item{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:10px 12px;border-radius:11px;border:0;cursor:pointer;background:transparent;
  color:rgba(255,255,255,.7);font-family:var(--font);font-size:14px;font-weight:600;
  transition:background .15s,color .15s;margin-bottom:2px;
}
.sb-item:hover{background:rgba(255,255,255,.06);color:#fff;}
.sb-item.active{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(5,136,218,.35);}
.sb-item.locked{cursor:not-allowed;color:rgba(255,255,255,.42);}
.sb-item.locked:hover{background:rgba(255,255,255,.04);color:rgba(255,255,255,.5);}
.sb-item .sb-ico{flex-shrink:0;display:flex;}
.sb-item .sb-txt{flex:1;}
.sb-lock{flex-shrink:0;opacity:.7;}
.sb-foot{padding:14px;border-top:1px solid rgba(255,255,255,.08);}
.sb-user{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:12px;}
.sb-avatar{width:38px;height:38px;border-radius:999px;background:var(--grad-green);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:15px;flex-shrink:0;}

/* hamburger + drawer (mobile) */
.hamburger{display:none;width:42px;height:42px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--navy);cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;}
.sb-close{display:none;}

/* main */
.app-main{min-height:100vh;display:flex;flex-direction:column;}
.app-topbar{
  display:flex;align-items:center;gap:16px;padding:18px 32px;
  background:rgba(255,255,255,.85);backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;
}
.app-content{padding:28px 32px 48px;max-width:1080px;width:100%;}
.app-h1{font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:-.02em;}

.dash-hero{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:stretch;}
.summary-row{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--line-2);}
.summary-row:first-child{padding-top:0;}
.sr-ico{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.svc-web-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}

.stat-card{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:20px;}
.locked-tile{
  position:relative;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:18px;
  display:flex;flex-direction:column;gap:11px;transition:transform .14s,box-shadow .2s,border-color .2s;
}
.locked-tile:hover{border-color:#d6deeb;box-shadow:var(--shadow-sm);}
.locked-tile .lt-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;}
.locked-overlay{position:absolute;top:16px;right:16px;}

/* sticky do resumo no checkout (desktop) */
.order-summary{position:sticky;top:90px;}
.mobile-appbar{display:none;}

/* ============================================================
   RESPONSIVO — consolidado
   ============================================================ */

/* tablet e abaixo → coluna única */
@media (max-width:980px){
  /* funil */
  .web-shell{grid-template-columns:1fr;height:auto;}
  .web-right{height:auto;overflow-y:visible;}
  .brand-panel{display:none;}
  .web-topbar{padding:14px 18px 12px;flex-wrap:wrap;gap:10px 12px;}
  .web-topbar .mobile-logo{display:flex;order:1;}
  .web-topbar .topbar-link{order:2;margin-left:auto;}
  .web-topbar .steps{order:3;flex-basis:100%;width:100%;margin:10px 0 0;gap:8px;}
  .step-label{display:none;}
  .web-content,.web-content.wide{max-width:640px;}
  .checkout-grid{grid-template-columns:1fr;}
  .checkout-grid>*{min-width:0;}
  .order-summary{position:static;min-width:0;}
  .plan-grid{grid-template-columns:1fr;}

  /* dashboard */
  .app-shell{grid-template-columns:1fr;}
  .sidebar{
    position:fixed;top:0;left:0;width:288px;max-width:86vw;height:100vh;z-index:60;
    transform:translateX(-100%);transition:transform .26s cubic-bezier(.4,0,.2,1);
    box-shadow:0 20px 60px rgba(0,0,0,.45);
  }
  .sidebar.open{transform:translateX(0);}
  .sidebar-backdrop{position:fixed;inset:0;background:rgba(6,16,38,.55);z-index:55;animation:fadeIn .2s ease;}
  .hamburger{display:flex;}
  .sb-close{display:flex;margin-left:auto;width:36px;height:36px;border-radius:10px;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;}
  .mobile-appbar{display:flex!important;}
  .app-topbar{padding:14px 18px;gap:12px;}
  .app-topbar-title .app-h1{display:none;}
  .dash-hero{grid-template-columns:1fr;}
  .svc-web-grid{grid-template-columns:1fr 1fr;}
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

/* celular */
@media (max-width:560px){
  .web-topbar{padding:13px 16px 11px;}
  .web-content{padding:22px 16px 44px;}
  .web-h1{font-size:24px;}
  .web-lead{font-size:15px;}
  .plan-grid{gap:14px;}
  .checkout-grid{gap:16px;}
  .app-content{padding:20px 16px 40px;}
  .app-topbar{padding:12px 14px;}
  .svc-web-grid{grid-template-columns:1fr;}
  /* botões full-width */
  .cta-row{flex-direction:column!important;gap:10px;}
  .cta-row>button{width:100%!important;min-width:0!important;flex:none!important;}
  /* logout fica no drawer; topbar mostra só sino */
  .topbar-logout{display:none!important;}
}

.web,.app-shell,.app-main{overflow-x:hidden;}

.lp-hide-mob { display: block; }
.lp-show-mob { display: none; }

@media (max-width: 980px) {
  .lp-hide-mob { display: none !important; }
  .lp-show-mob { display: block !important; }
}

.career-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 980px) {
  .career-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}