/* =========================================================
   RESET E TOKENS
   ========================================================= */
:root{
  --bg:#0b0711;
  --bg-2:#150c20;
  --card:#1b1028;
  --text:#f7eaff;
  --muted:#d6c7e6;
  --accent1:#ff2ea6;
  --accent2:#7b5cff;
  --grad:linear-gradient(90deg,var(--accent1),var(--accent2));
  --shadow:0 20px 50px rgba(0,0,0,.45);
  --header-h:66px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
section[id]{scroll-margin-top:calc(var(--header-h) + 12px)}

body{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:
    radial-gradient(60% 120% at 110% -10%, #2a1542 0%, rgba(0,0,0,0) 60%),
    radial-gradient(70% 120% at -10% -10%, #34123b 0%, rgba(0,0,0,0) 60%),
    var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* =========================================================
   TOPBAR (desktop estável + mobile rolável)
   ========================================================= */
.topbar{
  position:sticky; top:0; z-index:1000;
  background:rgba(11,7,17,.72);
  -webkit-backdrop-filter:blur(10px) saturate(160%); backdrop-filter:blur(10px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:var(--header-h); gap:16px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);min-width:0}
.logo{height:28px;width:auto;display:block}
.brand-lockup{display:flex;flex-direction:column;line-height:1}
.brand-course{font-weight:800}
.brand-by{font-size:.78rem;color:#e8d9ffcc}

/* nav desktop */
.nav{display:flex;gap:18px;align-items:center;white-space:nowrap}
.nav a{color:var(--muted);text-decoration:none;font-weight:700}
.nav a:hover{color:#fff}

/* CTA no topo */
.nav .btn{padding:10px 14px;border-radius:12px;background:var(--grad);color:#120917;border:none}
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:800;text-decoration:none;box-shadow:var(--shadow);transition:transform .08s ease,filter .2s ease}
.btn:hover{transform:translateY(-1px);filter:saturate(1.05)}
.btn--lg{padding:12px 20px;border-radius:14px}
.btn--xl{padding:16px 26px;border-radius:16px}
.btn--ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.25)}
.btn--ghost:hover{background:rgba(255,255,255,.06)}
.pill{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:4px 10px;border-radius:999px;margin-bottom:6px;font-weight:800}

/* Mobile: nav vira faixa rolável, marca compacta */
@media (max-width: 980px){
  :root{ --header-h: 92px }
  .topbar .wrap{flex-direction:column;align-items:flex-start;height:auto;padding:10px 16px;gap:8px}
  .logo{height:24px}
  .brand-by{display:none}
  .nav{
    width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    gap:10px; padding-bottom:4px;
  }
  .nav::-webkit-scrollbar{display:none}
  .nav a{flex:0 0 auto;margin:0;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
  .nav .btn{background:var(--grad);border:none;color:#120917}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;padding:86px 0}
.bg{position:absolute;inset:0;opacity:.35;background:
  radial-gradient(80% 120% at 20% 0%, var(--accent2), transparent 60%),
  radial-gradient(80% 120% at 100% 0%, var(--accent1), transparent 60%)}
.hero__grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
h1{font-size:clamp(32px,4vw,52px);line-height:1.15;margin:0 0 12px}
.lead{color:var(--muted);font-size:1.1rem;max-width:55ch}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta-group{margin-top:18px}
.secure{display:block;margin-top:8px;color:#eac8ffb3}

/* badge */
.seller-badge{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:6px 10px
}
.seller-badge img{height:22px;width:22px}
.seller-badge span{font-weight:700;color:#fff;font-size:.9rem}

/* Imagem do hero e imagens em cards */
.platform__img{
  position:relative;margin:0;width:100%;border-radius:16px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,rgba(255,46,166,.08),rgba(123,92,255,.08));
}
.platform__img img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center 38%;
  border-radius:16px;transform:translateZ(0);
  transition:transform .45s ease,filter .45s ease,box-shadow .45s ease,opacity .45s ease;
  will-change:transform,filter;box-shadow:0 0 20px rgba(255,255,255,.08);
}
.platform__img:hover img{transform:scale(1.03);filter:saturate(1.06) brightness(1.04);box-shadow:0 0 30px rgba(170,80,255,.22)}
.platform__img::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 120% at 80% -20%, rgba(255,46,166,.18), rgba(123,92,255,.10) 60%, transparent 70%);
  opacity:0;transition:opacity .45s ease;
}
.platform__img:hover::after{opacity:1}

/* Variante hero: respeitar proporção original (sem cortes) */
.platform__img.auto-size{background:none}
.platform__img.auto-size img{height:auto;object-fit:contain;object-position:center}

@media (max-width:1024px){ .hero__grid{grid-template-columns:1fr} .platform__img.auto-size img{max-width:100%} }

/* =========================================================
   SEÇÕES E HEADINGS
   ========================================================= */
.section{padding:72px 0}
.section--alt{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02))}
h2{font-size:clamp(26px,3vw,38px);margin:0 0 18px}
.sub{color:#e8d9ffcc;margin-top:-6px}

/* =========================================================
   CARDS / GRIDS ROBUSTAS (auto-fit)
   ========================================================= */
.cards-3{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.cards-5{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.card h3{margin:14px 16px 6px}
.card p{margin:0 16px 18px;color:#e8d9ffcc}

/* mídia dos cards (altura consistente em desktop) */
.ph.ph-card .platform__img{height:180px}
@media (max-width:768px){ .ph.ph-card .platform__img{height:160px} }

/* =========================================================
   TÓPICOS (chips)
   ========================================================= */
.topics{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.topics span{
  display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;font-weight:700;
  color:#f7eaffcc;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 4px 14px rgba(0,0,0,.25) inset, 0 2px 8px rgba(0,0,0,.15);
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.topics span:hover{transform:translateY(-1px);background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.2)}

/* =========================================================
   PROFESSORES
   ========================================================= */
.profs .prof{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.profs .avatar{width:100%;height:220px;object-fit:cover;border-radius:12px;margin-bottom:10px;background:#000}
.profs h3{margin:0}
.profs small,.profs p{color:#e8d9ffcc}
/* CTA abaixo dos professores sempre centralizado */
.cards-5.profs + .center{display:block;width:100%;text-align:center;margin-top:14px}
.cards-5.profs + .center .btn{display:inline-flex;min-width:260px;justify-content:center}

/* =========================================================
   PLATAFORMA (texto + print)
   ========================================================= */
.platform{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.feature-list{list-style:none;margin:10px 0 16px;padding:0}
.feature-list li{margin:8px 0}
.badges img{height:40px;margin-right:10px;opacity:.95}
@media (max-width:1024px){ .platform{grid-template-columns:1fr} }

/* =========================================================
   JORNADA v2 (abas + painéis com altura uniforme)
   ========================================================= */
.journey-v2 .tabbar{display:flex;gap:10px;margin:10px 0 20px;flex-wrap:wrap}
.tabv2{
  display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;
  font-weight:800;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);cursor:pointer;transition:.2s ease
}
.tabv2.is-active{background:var(--grad);color:#120917;border:none;box-shadow:0 12px 38px rgba(123,92,255,.35)}

.section.journey-v2 .panel{
  background:var(--card);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:18px;
  box-shadow:0 30px 60px rgba(0,0,0,.45);
  min-height:380px; display:flex; flex-direction:column; justify-content:flex-start;
}
.section.journey-v2 .panel[hidden]{display:none !important}

.section.journey-v2 .steps{flex:1;display:flex;flex-direction:column;gap:10px}
.section.journey-v2 .step-row{display:flex;gap:14px;align-items:flex-start;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.12)}
.section.journey-v2 .step-row:last-child{border-bottom:none}
.section.journey-v2 .num{min-width:44px;height:44px;border-radius:12px;background:var(--grad);color:#120917;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(123,92,255,.35)}
.section.journey-v2 h4{margin:0 0 6px}
.section.journey-v2 p{margin:0;color:#e8d9ffcc}

@media (max-width:768px){ .section.journey-v2 .panel{min-height:420px} }

/* =========================================================
   DEPOIMENTOS
   ========================================================= */
.depo-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.depo{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px}
.depo__head{display:flex;gap:12px;align-items:center}
.depo__avatar{height:44px;width:44px;border-radius:999px;object-fit:cover;background:#000}
.tag{color:#ffd6f3;font-weight:800}
.disclaimer{text-align:center;color:#e8d9ffb0;margin-top:8px}

/* =========================================================
   BENEFÍCIOS RÁPIDOS
   ========================================================= */
.quick{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.quick__item{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:16px;text-align:left;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.ph-icon{width:52px;height:52px;border-radius:12px;margin-bottom:2px;object-fit:contain;display:block;background:none;border:none;box-shadow:0 0 10px rgba(255,255,255,.1)}

/* =========================================================
   CTA FINAL
   ========================================================= */
.cta{padding:80px 0;background:radial-gradient(60% 80% at 50% 50%, #2b133f, #0b0711)}
.cta__box{background:var(--bg-2);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:30px;text-align:center;box-shadow:var(--shadow)}
.price-bundle{margin:10px auto 14px}
.price-old{color:#d9c7eea6;font-weight:800;margin-bottom:6px}
.price-now strong{display:block;font-size:2rem;margin-top:4px}
.price-note{color:#e8d9ffcc}
.pay-icons{margin-top:16px;display:flex;justify-content:center;align-items:center;gap:10px}
.pay-icons img{height:24px;opacity:.9}

.seller-seal{display:inline-flex;align-items:center;gap:10px;margin-bottom:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:6px 10px}
.seller-seal img{height:24px;width:24px}
.seller-seal span{font-weight:700;color:#fff;font-size:.9rem}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{padding:30px 0;border-top:1px solid rgba(255,255,255,.06);background:#09050e}
.footer__grid{display:flex;align-items:center;justify-content:space-between;color:#d7c6ec;gap:12px;flex-wrap:wrap}
.footer a{color:#fff;text-decoration:none}
.footer a:hover{opacity:.9}

/* =========================================================
   RESPONSIVO COMPLEMENTAR
   ========================================================= */
@media (max-width:1024px){
  .faq-grid,.platform{grid-template-columns:1fr}
}
@media (max-width:768px){
  .hero{padding:64px 0}
}

/* ===== CTAs — correção global ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:14px;
  font-weight:800;
  text-decoration:none;
  border:0;
  background:var(--grad);   /* gradiente padrão */
  color:#120917;            /* contraste */
  box-shadow:var(--shadow);
  transition:transform .08s ease, filter .2s ease, box-shadow .2s ease;
}
.btn:hover{ transform:translateY(-1px); filter:saturate(1.05) }
.btn:focus-visible{
  outline:2px solid rgba(255,255,255,.35);
  outline-offset:2px;
  box-shadow:0 0 0 6px rgba(123,92,255,.25);
}

/* tamanhos */
.btn--sm{ padding:10px 14px; font-size:.92rem; border-radius:12px }
.btn--lg{ padding:12px 20px; border-radius:14px }
.btn--xl{ padding:16px 26px; font-size:1.05rem; border-radius:16px }

/* variante ghost (ex.: “Quero estudar com eles”) */
.btn--ghost{
  background:transparent !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:none;
}
.btn--ghost:hover{ background:rgba(255,255,255,.06) }

/* ===== LIVEBAR (única, corrigida) ===== */
.livebar{
  position: sticky;
  top: var(--header-h, 66px);
  z-index: 49;
  background: rgba(22,12,33,.75);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: .95rem;
}

.livebar__grid{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  min-height: 40px;
  flex-wrap: nowrap;
}

/* Empilha quando a tela for muito estreita */
@media (max-width: 520px){
  .livebar__grid{
    flex-wrap: wrap;
    row-gap: 8px;
  }
}

/* Chips */
.livechip{
  display: inline-flex;
  align-items: center;
  gap: 4px;                 /* ícone mais próximo do texto */
  padding: 6px 12px 6px 8px;/* REDUZ o padding esquerdo */
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  white-space: nowrap;
}

/* Ícone ultra-compacto e alinhado à linha-base */
.livechip__icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 15px;
  line-height: 1;
  transform: translateY(1px);
  flex: 0 0 16px;
  margin-right: 0;          /* garante que só o gap controle o espaço */
}

.livechip__text{ line-height: 1; }

.livechip__num{
  display: inline-block;
  min-width: 3ch;           /* evita “pulo” ao carregar */
  text-align: right;
  font-weight: 800;
}

@media (max-width: 768px){
  .livebar__grid{
    gap: 10px;
    padding: 6px 0;
    min-height: 36px;
  }
  .livechip{
    padding: 6px 10px 6px 8px; /* mantém o lado esquerdo compacto no mobile */
    font-size: .88rem;
  }
  .livechip__icon{
    width: 15px;
    height: 15px;
    font-size: 14px;
    transform: none;
  }
}

/* ===== TOASTS ===== */
#purchase-toasts{
  position: fixed;
  right: 20px; bottom: 110px; /* sobe p/ não colidir com o Chatwoot */
  z-index: 60;
  display: flex; flex-direction: column; gap: 10px;
  pointer-events: none;
}
@media (max-width: 640px){
  #purchase-toasts{ left: 14px; right: auto; bottom: 90px; }
}
.toast{
  pointer-events:auto;
  display:flex; align-items:center; gap:10px;
  max-width: 320px;
  background: rgba(15,10,24,.88);
  color:#f7eaff;
  border:1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,.45);
  backdrop-filter: blur(6px) saturate(130%);
  animation: slideIn .35s ease both;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.toast__icon{
  width:34px; height:34px; flex:0 0 34px;
  border-radius: 999px;
  background: radial-gradient(120% 120% at 0% 0%, rgba(255,46,166,.26), rgba(123,92,255,.22));
  display:grid; place-items:center;
}
.toast__icon svg{ width:18px; height:18px }
.toast__body{ font-size:.95rem; line-height:1.35 }
.toast__body b{ font-weight:800 }
.toast__meta{ display:block; font-size:.82rem; color:#d6c7e6; margin-top:2px }
.toast--hide{ animation: fadeOut .25s ease both }
@keyframes slideIn{ from{ transform: translateY(8px); opacity:0 } to{ transform: translateY(0); opacity:1 } }
@keyframes fadeOut{ to{ transform: translateY(8px); opacity:0 } }