/* ============================================================
   AULA BLACK NOVEMBER: complemento do webinar.css (mesma base visual
   do congresso). Só o que a página nova tem a mais.
   ============================================================ */

/* ---------- 01. O que você vai aprender ---------- */
.learn{ list-style:none; display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
@media (min-width:768px){ .learn{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } }
.learn-card{ display:flex; flex-direction:column; gap:10px; padding:24px; background:#fff; border-radius:var(--r-xl); outline:1px solid rgba(10,10,15,.06); box-shadow:var(--shadow-lift); }
@media (min-width:1024px){ .learn-card{ padding:28px; } }
.learn-card .n{ width:36px; height:36px; border-radius:11px; display:grid; place-content:center; background:var(--success-bg); color:var(--success-ink); }
.learn-card .n .ico{ width:20px; height:20px; }
.learn-card h3{ font-size:20px; font-weight:500; line-height:1.2; letter-spacing:-.02em; color:var(--ink-900); }
.learn-card p{ font-size:16px; line-height:1.55; color:var(--text-2); }

.no-deps{ margin-top:32px; padding:24px; border-radius:var(--r-xl); background:var(--ink-900); color:#fff; display:grid; gap:16px; align-items:center; }
@media (min-width:768px){ .no-deps{ grid-template-columns:minmax(0,1fr) auto; padding:28px 32px; } }
.no-deps p{ font-size:18px; line-height:1.45; letter-spacing:-.01em; }
.no-deps p strong{ font-weight:600; }
.no-deps .x-list{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; }
.no-deps .x-list li{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.08); font-size:13px; color:rgba(255,255,255,.8); white-space:nowrap; }
.no-deps .x-list .ico{ width:14px; height:14px; color:#FF7A7A; }

.section-cta{ margin-top:32px; display:flex; justify-content:center; }
@media (max-width:639px){ .section-cta .btn{ width:100%; max-width:420px; } }

/* ---------- Celular ilustrativo: conversa de reativação ---------- */
.wa-head .ai-mark{ background:var(--success); }
.bubble-in{ align-self:flex-start; max-width:86%; padding:10px 12px; border-radius:16px 16px 16px 4px; background:#fff; color:var(--ink-900); font-size:13px; line-height:1.4; box-shadow:var(--shadow-lift); outline:1px solid rgba(10,10,15,.05); }
.rec-top .rec-avatar.ok{ background:var(--success); }
.rec-badge.ok{ color:var(--success-ink); }