/* ═══════════════════════════════════════════════════════════════════════════
   SOMA · CURSOS E PROGRAMAS — folha autossuficiente (escopo .course-shell)
   Corrige: hero (.module-page-hero/.training-bg sem CSS), ícone gigante do
   botão (.soma-button-icon img), slider de aulas, cabeçalhos e painel premium.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- Fundo cinza da página ---- */
.course-shell.pl-content {
  background: #f0f4f7;
}

/* ---- HERO ---- */
.course-shell .platform-hero-panel.module-page-hero {
  position: relative;
  border-radius: 28px;
  /* inset horizontal canônico (32px) — alinha o conteúdo do hero à mesma coluna das demais seções */
  padding: clamp(34px, 4.5vw, 60px) 32px;
  margin-bottom: 30px;
  color: #fff;
  overflow: hidden;
  background:
    linear-gradient(115deg, rgba(5,11,23,.94) 0%, rgba(7,27,49,.82) 50%, rgba(7,27,49,.46) 100%),
    url("assets/bg-aulas-banner.jpeg") center / cover no-repeat;
  border: 1px solid rgba(127,231,235,.20);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.course-shell .module-page-hero > div { position: relative; z-index: 1; max-width: 760px; }
.course-shell .module-page-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font: 700 11px 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .18em; text-transform: uppercase; color: #7FE7EB; margin: 0 0 14px;
}
.course-shell .module-page-hero h1 {
  margin: 0 0 14px; font: 800 clamp(28px, 3.4vw, 44px)/1.08 'Inter', sans-serif;
  color: #fff; letter-spacing: -.01em;
}
.course-shell .module-page-hero > div > p {
  margin: 0 0 26px; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.6;
  color: rgba(255,255,255,.82); max-width: 62ch;
}

/* ---- Botões (hero + painel premium) ---- */
.course-shell .platform-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* Mais respiro entre o texto do hero e os botões (só no hero, não no painel premium) */
.course-shell .platform-hero-panel .platform-actions { margin-top: 14px; }
.course-shell .platform-actions .button {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 22px; border-radius: 12px; font: 700 14px 'Inter', sans-serif;
  text-decoration: none; cursor: pointer;
  transition: filter .18s, background .18s, border-color .18s, transform .18s;
}
.course-shell .platform-actions .button.primary,
.course-shell .platform-actions .button.soma-button {
  background: linear-gradient(135deg, #02B8BF, #0891b2); color: #fff; border: 0;
}
.course-shell .platform-actions .button.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.course-shell .platform-actions .button.ghost {
  background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.28);
}
.course-shell .platform-actions .button.ghost:hover { background: rgba(255,255,255,.14); border-color: #7FE7EB; }

/* ---- Constrange o ícone do botão (corrige o swirl gigante) ---- */
.course-shell .soma-button-icon { display: inline-flex; align-items: center; flex-shrink: 0; }
.course-shell .soma-button-icon img {
  width: 20px !important; height: 20px !important; object-fit: contain; display: block;
}

/* ---- Cabeçalho de seção ---- */
.course-shell .platform-section { margin-bottom: 34px; padding: 0 32px; }
/* Histórico (Seu progresso) na MESMA coluna canônica (32px) das demais seções + bolinha idêntica */
.course-shell .edu-hist { padding-left: 32px; padding-right: 32px; }
.course-shell .edu-hist-eyebrow { gap: 10px; }
.course-shell .edu-hist-dot { width: 6px; height: 6px; box-shadow: 0 0 12px rgba(2,184,191,.6); }
.course-shell .platform-section-head { margin-bottom: 20px; }
.course-shell .platform-section-head .eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font: 700 11px 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .16em; text-transform: uppercase; color: #02B8BF; margin: 0 0 8px;
}
.course-shell .platform-section-head h2 {
  margin: 0; font: 800 clamp(20px, 2vw, 27px)/1.18 'Inter', sans-serif;
  color: #0a2540; max-width: 46ch; letter-spacing: -.01em;
}
.course-shell .course-catalog-status {
  margin: 8px 0 0;
  font: 600 11px 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #64748B;
}
.course-shell .course-empty-state {
  min-height: 120px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(2,184,191,.35);
  border-radius: 18px;
  color: #54657A;
  background: rgba(255,255,255,.72);
  font: 600 13px 'Inter', sans-serif;
}

/* ---- Seção "Aulas em destaque" como card branco ---- */
.course-shell .platform-visual-board.course-slider {
  background: #fff;
  border-radius: 20px;
  padding: 28px 32px 24px;
  box-shadow: 0 4px 28px rgba(5,11,23,.10);
  margin-bottom: 24px;
}

/* ---- Slider "Aulas em destaque" ---- */
.course-shell .course-slider { margin-bottom: 36px; }
.course-shell .course-slider-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr);
  gap: 18px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  /* padding interno + margin negativa: dá espaço para a sombra e o hover-lift
     sem serem cortados pelo overflow (overflow-x:auto força overflow-y:auto) */
  padding: 18px 10px 24px;
  margin: -8px -10px -12px;
}
.course-shell .course-slide-card {
  scroll-snap-align: start; text-decoration: none;
  display: flex; flex-direction: column;
  border-radius: 20px; padding: 26px; min-height: 200px;
  background:
    linear-gradient(165deg, rgba(5,11,23,.82) 0%, rgba(7,27,49,.72) 100%),
    url("assets/blue-background-6.png") center / cover no-repeat;
  border: 1px solid rgba(127,231,235,.22); box-shadow: 0 12px 32px rgba(0,0,0,.3);
  transition: transform .2s, border-color .2s;
}
.course-shell .course-slide-card:hover { transform: translateY(-4px); border-color: rgba(2,184,191,.5); }
.course-shell .course-slide-card > span {
  align-self: flex-start; font: 700 10.5px 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .1em; text-transform: uppercase; color: #7FE7EB; margin-bottom: 14px;
}
.course-shell .course-slide-card h3 { margin: 0 0 10px; font: 700 18px 'Inter', sans-serif; color: #fff; }
.course-shell .course-slide-card p { margin: 0; font-size: 13.5px; line-height: 1.55; color: rgba(245,249,252,.66); }

/* ---- Ocultar scrollbar webkit (Chrome) do slider ---- */
.course-shell .course-slider-track::-webkit-scrollbar { display: none; }

/* ---- Controles do slider ---- */
.course-shell .course-slider-controls { display: flex; gap: 10px; margin-top: 16px; }
.course-shell .course-slider-controls button {
  padding: 9px 18px; border-radius: 10px; cursor: pointer;
  background: #0d1f35;
  color: #fff;
  border: 1px solid rgba(2,184,191,.40);
  font: 600 13px 'Inter', sans-serif;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.course-shell .course-slider-controls button:hover {
  background: #112d4e;
  border-color: #02B8BF;
  box-shadow: 0 0 0 3px rgba(2,184,191,.14);
}

/* ---- Seta premium nos topic cards (ghost circle) ---- */
body.platform-body .course-shell .course-topic-card::after {
  content: "";
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1.5px solid rgba(127,231,235,.55);
  background-color: rgba(255,255,255,.08);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14M13%206l6%206-6%206'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .2s, background-color .2s, border-color .2s, box-shadow .2s;
}
body.platform-body .course-shell .course-topic-card:hover::after {
  background-color: rgba(2,184,191,.90);
  border-color: #02B8BF;
  transform: translateX(4px);
  box-shadow: 0 8px 26px rgba(2,184,191,.42), inset 0 1px 0 rgba(255,255,255,.25);
}

/* ---- Grid de tópicos (cards já estilizados; garante o grid) ---- */
.course-shell .course-topic-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px;
}
body.platform-body .course-shell .course-topic-card {
  border-radius: 20px !important;
  overflow: hidden;
}

/* ---- Painel premium (course-lock-panel) ---- */
.course-shell .course-lock-panel {
  position: relative; border-radius: 28px; padding: clamp(32px, 4vw, 52px) 32px; margin-top: 8px;
  display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap;
  background:
    linear-gradient(120deg, rgba(5,11,23,.90) 0%, rgba(7,27,49,.78) 100%),
    url("assets/blue-background-6.png") center / cover no-repeat;
  border: 1px solid rgba(127,231,235,.24); color: #fff; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}
.course-shell .course-lock-panel > div:first-child { position: relative; z-index: 1; max-width: 620px; }
.course-shell .course-lock-panel .experience-kicker {
  display: inline-flex; align-items: center; gap: 10px; font: 700 11px 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .16em; text-transform: uppercase; color: #7FE7EB; margin: 0 0 12px;
}
/* bolinha teal idêntica aos demais eyebrows (simetria/alinhamento) */
.course-shell .course-lock-panel .experience-kicker::before {
  content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: #02B8BF; box-shadow: 0 0 12px rgba(2,184,191,.6);
}
.course-shell .course-lock-panel h3 {
  margin: 0 0 12px; font: 800 clamp(20px, 2.2vw, 28px)/1.16 'Inter', sans-serif; color: #fff;
}
.course-shell .course-lock-panel p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.80); }
.course-shell .course-lock-panel .platform-actions { position: relative; z-index: 1; flex-direction: column; align-items: flex-start; gap: 14px; }
.course-shell .platform-chip.active {
  display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 999px;
  background: rgba(2,184,191,.18); border: 1px solid rgba(2,184,191,.45); color: #7FE7EB;
  font: 700 11px 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase;
}