.elementor-176 .elementor-element.elementor-element-615b3d4{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:22px;--padding-bottom:-15px;--padding-left:0px;--padding-right:0px;}.elementor-176 .elementor-element.elementor-element-615b3d4:not(.elementor-motion-effects-element-type-background), .elementor-176 .elementor-element.elementor-element-615b3d4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(360deg, #1A0B1F 0%, #43113F 100%);}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-176 .elementor-element.elementor-element-f97347b{width:var( --container-widget-width, 1189px );max-width:1189px;--container-widget-width:1189px;--container-widget-flex-grow:0;text-align:center;font-family:"Poppins", Sans-serif;font-size:13px;font-weight:400;color:var( --e-global-color-kadence9 );}.elementor-176 .elementor-element.elementor-element-f97347b.elementor-element{--align-self:center;--flex-grow:0;--flex-shrink:0;}.elementor-176 .elementor-element.elementor-element-6b62f2e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-loop-grid .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-widget-loop-grid .elementor-pagination{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-loop-grid .e-load-more-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-176 .elementor-element.elementor-element-b66c193{--grid-columns:4;--load-more-message-alignment:center;--load-more-button-align:center;}.elementor-176 .elementor-element.elementor-element-b66c193 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-176 .elementor-element.elementor-element-b66c193 .elementor-loop-container{grid-auto-rows:1fr;}.elementor-176 .elementor-element.elementor-element-b66c193 .e-loop-item > .elementor-section, .elementor-176 .elementor-element.elementor-element-b66c193 .e-loop-item > .elementor-section > .elementor-container, .elementor-176 .elementor-element.elementor-element-b66c193 .e-loop-item > .e-con, .elementor-176 .elementor-element.elementor-element-b66c193 .e-loop-item .elementor-section-wrap  > .e-con{height:100%;}.elementor-176 .elementor-element.elementor-element-36ef4ab{--display:flex;}@media(max-width:1024px){.elementor-176 .elementor-element.elementor-element-b66c193{--grid-columns:2;}}@media(max-width:767px){.elementor-176 .elementor-element.elementor-element-b66c193{--grid-columns:1;}}/* Start custom CSS for html, class: .elementor-element-adf0659 *//* ============================================================
   CHIPS
   ============================================================ */
.chips { padding: 28px 0 8px; }
.chips__scroll {
  display: flex; gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0 8px;
  -webkit-overflow-scrolling: touch;
}
.chips__scroll::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--c-line);
  color: #D9D7E3;
  font-size: 14px;
  font-weight: 600;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.chip:hover { background: rgba(255,255,255,.1); color: #fff; }
.chip.is-active {
  background: var(--g-brand);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 24px -10px rgba(236,72,153,.6);
}

/* ============================================================
   CATALOG ROWS
   ============================================================ */
.catalog { padding: 12px 0 40px; }
.row { margin: 28px 0; }
.row__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.row__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -.01em;
  margin: 0;
}
.row__more {
  font-size: 13px; font-weight: 600;
  color: var(--c-muted);
  transition: color .2s var(--ease);
}
.row__more:hover { color: var(--c-yellow); }

.row__track {
  display: flex; gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 6px 4px 18px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.row__track::-webkit-scrollbar { display: none; }

.card {
  flex: 0 0 78%;
  max-width: 320px;
  scroll-snap-align: start;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-ink-2);
  border: 1px solid var(--c-line);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  isolation: isolate;
}
.card:hover {
  transform: translateY(-4px) scale(1.015);
  border-color: rgba(236,72,153,.4);
  box-shadow: var(--sh-card);
  z-index: 2;
}
.card__thumb {
  position: relative;
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
  background-color: #221F2C;
}
.card__thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(11,11,15,.85) 100%);
}
.card__badges {
  position: absolute; top: 10px; left: 10px;
  display: flex; gap: 6px; z-index: 2;
}
.card__badge {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(11,11,15,.7);
  color: #fff;
  backdrop-filter: blur(6px);
  border: 1px solid var(--c-line-2);
}
.card__badge--free { background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.45); color: #B6F3C8; }
.card__badge--premium { background: rgba(250,204,21,.18); border-color: rgba(250,204,21,.45); color: #FDE68A; }
.card__badge--cat { background: rgba(124,58,237,.25); border-color: rgba(124,58,237,.5); color: #E9D5FF; }

.card__rating {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(11,11,15,.7);
  font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--c-line-2);
}

.card__progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: rgba(255,255,255,.12);
  z-index: 2;
}
.card__progress > i {
  display: block; height: 100%;
  background: var(--g-brand);
}

.card__body { padding: 14px 14px 16px; }
.card__cat { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-pink); }
.card__title {
  font-family: var(--f-display);
  font-weight: 700; font-size: 16px; letter-spacing: -.01em;
  margin: 4px 0 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 42px;
}
.card__meta {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  font-size: 12px; color: var(--c-muted);
}
.card__meta b { color: #DAD8E4; font-weight: 600; }

.card__hoverplay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s var(--ease);
  pointer-events: none;
  z-index: 3;
}
.card:hover .card__hoverplay { opacity: 1; }
.card__hoverplay svg {
  width: 56px; height: 56px;
  filter: drop-shadow(0 8px 30px rgba(0,0,0,.55));
}

@media (min-width: 600px){ .card { flex-basis: 46%; } }
@media (min-width: 900px){ .card { flex-basis: 31%; } }
@media (min-width: 1200px){ .card { flex-basis: 23%; max-width: 280px; } }

/* ============ COURSE CATALOG ============ */
  // Editáveis: troque/adicione cursos abaixo livremente.
  // category: portugues | idiomas | trabalho | saude | cultura | profissionalizantes
  const COURSES = [
    { id: 1, title: 'Português para Integração — Nível A1',
      teacher: 'Profa. Camila Reis', duration: '12h', level: 'Iniciante',
      rating: 4.9, free: true, category: 'portugues', tag: 'Português',
      thumb: 'https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=800&q=80',
      progress: 0 },
    { id: 2, title: 'Inglês para o Mercado Brasileiro',
      teacher: 'Mr. Daniel Souza', duration: '24h', level: 'Intermediário',
      rating: 4.8, free: false, category: 'idiomas', tag: 'Idiomas',
      thumb: 'https://images.unsplash.com/photo-1546410531-bb4caa6b424d?auto=format&fit=crop&w=800&q=80',
      progress: 38 },
    { id: 3, title: 'Como Encontrar Trabalho no Brasil',
      teacher: 'Profa. Ana Beatriz', duration: '8h', level: 'Iniciante',
      rating: 4.9, free: true, category: 'trabalho', tag: 'Trabalho',
      thumb: 'https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=800&q=80',
      progress: 72 },
    { id: 4, title: 'SUS e Direito à Saúde para Migrantes',
      teacher: 'Dr. Pedro Lima', duration: '6h', level: 'Iniciante',
      rating: 5.0, free: true, category: 'saude', tag: 'Saúde',
      thumb: 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=800&q=80',
      progress: 0 },
    { id: 5, title: 'Eletricista Profissional — Trilha SENAI',
      teacher: 'Prof. Marcos Vieira', duration: '40h', level: 'Avançado',
      rating: 4.7, free: false, category: 'profissionalizantes', tag: 'Profissional',
      thumb: 'https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc?auto=format&fit=crop&w=800&q=80',
      progress: 12 },
    { id: 6, title: 'Cultura e Vida no Brasil',
      teacher: 'Profa. Júlia Mendes', duration: '5h', level: 'Iniciante',
      rating: 4.8, free: true, category: 'cultura', tag: 'Cultura',
      thumb: 'https://images.unsplash.com/photo-1483729558449-99ef09a8c325?auto=format&fit=crop&w=800&q=80',
      progress: 0 },
    { id: 7, title: 'Português Avançado — Mundo do Trabalho',
      teacher: 'Profa. Camila Reis', duration: '18h', level: 'Avançado',
      rating: 4.9, free: false, category: 'portugues', tag: 'Português',
      thumb: 'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=800&q=80',
      progress: 0 },
    { id: 8, title: 'Francês Básico — Acolhimento Internacional',
      teacher: 'Prof. Étienne Marais', duration: '14h', level: 'Iniciante',
      rating: 4.7, free: true, category: 'idiomas', tag: 'Idiomas',
      thumb: 'https://images.unsplash.com/photo-1505664194779-8beaceb93744?auto=format&fit=crop&w=800&q=80',
      progress: 0 },
    { id: 9, title: 'Empreendedorismo para Refugiados',
      teacher: 'Profa. Rita Oliveira', duration: '10h', level: 'Intermediário',
      rating: 4.9, free: false, category: 'trabalho', tag: 'Trabalho',
      thumb: 'https://images.unsplash.com/photo-1556761175-5973dc0f32e7?auto=format&fit=crop&w=800&q=80',
      progress: 0 },
    { id:10, title: 'Saúde Mental e Acolhimento Humanitário',
      teacher: 'Dra. Lívia Santos', duration: '8h', level: 'Iniciante',
      rating: 5.0, free: true, category: 'saude', tag: 'Saúde',
      thumb: 'https://images.unsplash.com/photo-1494172961521-33799ddd43a5?auto=format&fit=crop&w=800&q=80',
      progress: 0 },
    { id:11, title: 'Auxiliar Administrativo — SENAI',
      teacher: 'Prof. Bruno Lima', duration: '30h', level: 'Iniciante',
      rating: 4.6, free: false, category: 'profissionalizantes', tag: 'Profissional',
      thumb: 'https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&w=800&q=80',
      progress: 0 },
    { id:12, title: 'História e Geografia do Brasil',
      teacher: 'Prof. Renato Costa', duration: '12h', level: 'Iniciante',
      rating: 4.8, free: true, category: 'cultura', tag: 'Cultura',
      thumb: 'https://images.unsplash.com/photo-1483729558449-99ef09a8c325?auto=format&fit=crop&w=800&q=80',
      progress: 0 },
  ];

  // Distribution per row (curated by id for variety)
  const ROWS = {
    populares:    [1, 3, 5, 2, 4, 9, 7],
    novos:        [10, 11, 12, 8, 7, 6],
    recomendados: [2, 4, 9, 1, 10, 5],
    continue:     [3, 2, 5],    // requires progress
    gratuitos:    [1, 3, 4, 6, 8, 10, 12],
    certificado:  [5, 11, 2, 7, 9]
  };

  function cardHTML(c, opts = {}) {
    const isFree = c.free;
    const showProgress = opts.row === 'continue' || c.progress > 0;
    return `
      <article class="card" data-cat="${c.category}" tabindex="0" aria-label="${c.title}">
        <div class="card__thumb" style="background-image:url('${c.thumb}')">
          <div class="card__badges">
            <span class="card__badge card__badge--cat">${c.tag}</span>
            <span class="card__badge ${isFree ? 'card__badge--free':'card__badge--premium'}">
              ${isFree ? 'Gratuito' : 'Premium'}
            </span>
          </div>
          <span class="card__rating" aria-label="Avaliação ${c.rating}">
            ★ ${c.rating.toFixed(1)}
          </span>
          <div class="card__hoverplay" aria-hidden="true">
            <svg viewBox="0 0 64 64"><circle cx="32" cy="32" r="30" fill="rgba(11,11,15,.55)" stroke="rgba(255,255,255,.6)" stroke-width="2"/><path d="M26 22v20l16-10z" fill="#fff"/></svg>
          </div>
          ${showProgress ? `<div class="card__progress"><i style="width:${Math.max(c.progress,6)}%"></i></div>` : ''}
        </div>
        <div class="card__body">
          <div class="card__cat">${c.tag}</div>
          <h3 class="card__title">${c.title}</h3>
          <div class="card__meta">
            <span><b>${c.teacher}</b></span>
            <span>${c.duration}</span>
            <span>${c.level}</span>
          </div>
        </div>
      </article>`;
  }

  function renderRow(name) {
    const track = $(`.row[data-row="${name}"] .row__track`);
    if (!track) return;
    const ids = ROWS[name] || [];
    track.innerHTML = ids.map(id => {
      const c = COURSES.find(x => x.id === id);
      return c ? cardHTML(c, { row: name }) : '';
    }).join('');
  }

  Object.keys(ROWS).forEach(renderRow);

  /* ============ CATEGORY CHIPS FILTER ============ */
  const chips = $$('.chip');
  chips.forEach(chip => {
    chip.addEventListener('click', () => {
      chips.forEach(c => c.classList.remove('is-active'));
      chip.classList.add('is-active');
      const cat = chip.dataset.cat;
      $$('.card').forEach(card => {
        const match = cat === 'todos' || card.dataset.cat === cat;
        card.style.display = match ? '' : 'none';
      });
    });
  });/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-36ef4ab *//* ============================================================
   CHIPS
   ============================================================ */
.chips { padding: 28px 0 8px; }
.chips__scroll {
  display: flex; gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0 8px;
  -webkit-overflow-scrolling: touch;
}
.chips__scroll::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--c-line);
  color: #D9D7E3;
  font-size: 14px;
  font-weight: 600;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.chip:hover { background: rgba(255,255,255,.1); color: #fff; }
.chip.is-active {
  background: var(--g-brand);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 24px -10px rgba(236,72,153,.6);
}

/* ============================================================
   CATALOG ROWS
   ============================================================ */
.catalog { padding: 12px 0 40px; }
.row { margin: 28px 0; }
.row__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.row__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -.01em;
  margin: 0;
}
.row__more {
  font-size: 13px; font-weight: 600;
  color: var(--c-muted);
  transition: color .2s var(--ease);
}
.row__more:hover { color: var(--c-yellow); }

.row__track {
  display: flex; gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 6px 4px 18px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.row__track::-webkit-scrollbar { display: none; }

.card {
  flex: 0 0 78%;
  max-width: 320px;
  scroll-snap-align: start;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-ink-2);
  border: 1px solid var(--c-line);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  isolation: isolate;
}
.card:hover {
  transform: translateY(-4px) scale(1.015);
  border-color: rgba(236,72,153,.4);
  box-shadow: var(--sh-card);
  z-index: 2;
}
.card__thumb {
  position: relative;
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
  background-color: #221F2C;
}
.card__thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(11,11,15,.85) 100%);
}
.card__badges {
  position: absolute; top: 10px; left: 10px;
  display: flex; gap: 6px; z-index: 2;
}
.card__badge {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(11,11,15,.7);
  color: #fff;
  backdrop-filter: blur(6px);
  border: 1px solid var(--c-line-2);
}
.card__badge--free { background: rgba(34,197,94,.18); border-color: rgba(34,197,94,.45); color: #B6F3C8; }
.card__badge--premium { background: rgba(250,204,21,.18); border-color: rgba(250,204,21,.45); color: #FDE68A; }
.card__badge--cat { background: rgba(124,58,237,.25); border-color: rgba(124,58,237,.5); color: #E9D5FF; }

.card__rating {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(11,11,15,.7);
  font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--c-line-2);
}

.card__progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: rgba(255,255,255,.12);
  z-index: 2;
}
.card__progress > i {
  display: block; height: 100%;
  background: var(--g-brand);
}

.card__body { padding: 14px 14px 16px; }
.card__cat { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--c-pink); }
.card__title {
  font-family: var(--f-display);
  font-weight: 700; font-size: 16px; letter-spacing: -.01em;
  margin: 4px 0 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 42px;
}
.card__meta {
  display: flex; flex-wrap: wrap; gap: 8px 14px;
  font-size: 12px; color: var(--c-muted);
}
.card__meta b { color: #DAD8E4; font-weight: 600; }

.card__hoverplay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s var(--ease);
  pointer-events: none;
  z-index: 3;
}
.card:hover .card__hoverplay { opacity: 1; }
.card__hoverplay svg {
  width: 56px; height: 56px;
  filter: drop-shadow(0 8px 30px rgba(0,0,0,.55));
}

@media (min-width: 600px){ .card { flex-basis: 46%; } }
@media (min-width: 900px){ .card { flex-basis: 31%; } }
@media (min-width: 1200px){ .card { flex-basis: 23%; max-width: 280px; } }


/* ============ COURSE CATALOG ============ */
  // Editáveis: troque/adicione cursos abaixo livremente.
  // category: portugues | idiomas | trabalho | saude | cultura | profissionalizantes
  const COURSES = [
    { id: 1, title: 'Português para Integração — Nível A1',
      teacher: 'Profa. Camila Reis', duration: '12h', level: 'Iniciante',
      rating: 4.9, free: true, category: 'portugues', tag: 'Português',
      thumb: 'https://images.unsplash.com/photo-1503676260728-1c00da094a0b?auto=format&fit=crop&w=800&q=80',
      progress: 0 },
    { id: 2, title: 'Inglês para o Mercado Brasileiro',
      teacher: 'Mr. Daniel Souza', duration: '24h', level: 'Intermediário',
      rating: 4.8, free: false, category: 'idiomas', tag: 'Idiomas',
      thumb: 'https://images.unsplash.com/photo-1546410531-bb4caa6b424d?auto=format&fit=crop&w=800&q=80',
      progress: 38 },
    { id: 3, title: 'Como Encontrar Trabalho no Brasil',
      teacher: 'Profa. Ana Beatriz', duration: '8h', level: 'Iniciante',
      rating: 4.9, free: true, category: 'trabalho', tag: 'Trabalho',
      thumb: 'https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=800&q=80',
      progress: 72 },
    { id: 4, title: 'SUS e Direito à Saúde para Migrantes',
      teacher: 'Dr. Pedro Lima', duration: '6h', level: 'Iniciante',
      rating: 5.0, free: true, category: 'saude', tag: 'Saúde',
      thumb: 'https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=800&q=80',
      progress: 0 },
    { id: 5, title: 'Eletricista Profissional — Trilha SENAI',
      teacher: 'Prof. Marcos Vieira', duration: '40h', level: 'Avançado',
      rating: 4.7, free: false, category: 'profissionalizantes', tag: 'Profissional',
      thumb: 'https://images.unsplash.com/photo-1581092580497-e0d23cbdf1dc?auto=format&fit=crop&w=800&q=80',
      progress: 12 },
    { id: 6, title: 'Cultura e Vida no Brasil',
      teacher: 'Profa. Júlia Mendes', duration: '5h', level: 'Iniciante',
      rating: 4.8, free: true, category: 'cultura', tag: 'Cultura',
      thumb: 'https://images.unsplash.com/photo-1483729558449-99ef09a8c325?auto=format&fit=crop&w=800&q=80',
      progress: 0 },
    { id: 7, title: 'Português Avançado — Mundo do Trabalho',
      teacher: 'Profa. Camila Reis', duration: '18h', level: 'Avançado',
      rating: 4.9, free: false, category: 'portugues', tag: 'Português',
      thumb: 'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=800&q=80',
      progress: 0 },
    { id: 8, title: 'Francês Básico — Acolhimento Internacional',
      teacher: 'Prof. Étienne Marais', duration: '14h', level: 'Iniciante',
      rating: 4.7, free: true, category: 'idiomas', tag: 'Idiomas',
      thumb: 'https://images.unsplash.com/photo-1505664194779-8beaceb93744?auto=format&fit=crop&w=800&q=80',
      progress: 0 },
    { id: 9, title: 'Empreendedorismo para Refugiados',
      teacher: 'Profa. Rita Oliveira', duration: '10h', level: 'Intermediário',
      rating: 4.9, free: false, category: 'trabalho', tag: 'Trabalho',
      thumb: 'https://images.unsplash.com/photo-1556761175-5973dc0f32e7?auto=format&fit=crop&w=800&q=80',
      progress: 0 },
    { id:10, title: 'Saúde Mental e Acolhimento Humanitário',
      teacher: 'Dra. Lívia Santos', duration: '8h', level: 'Iniciante',
      rating: 5.0, free: true, category: 'saude', tag: 'Saúde',
      thumb: 'https://images.unsplash.com/photo-1494172961521-33799ddd43a5?auto=format&fit=crop&w=800&q=80',
      progress: 0 },
    { id:11, title: 'Auxiliar Administrativo — SENAI',
      teacher: 'Prof. Bruno Lima', duration: '30h', level: 'Iniciante',
      rating: 4.6, free: false, category: 'profissionalizantes', tag: 'Profissional',
      thumb: 'https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&w=800&q=80',
      progress: 0 },
    { id:12, title: 'História e Geografia do Brasil',
      teacher: 'Prof. Renato Costa', duration: '12h', level: 'Iniciante',
      rating: 4.8, free: true, category: 'cultura', tag: 'Cultura',
      thumb: 'https://images.unsplash.com/photo-1483729558449-99ef09a8c325?auto=format&fit=crop&w=800&q=80',
      progress: 0 },
  ];

  // Distribution per row (curated by id for variety)
  const ROWS = {
    populares:    [1, 3, 5, 2, 4, 9, 7],
    novos:        [10, 11, 12, 8, 7, 6],
    recomendados: [2, 4, 9, 1, 10, 5],
    continue:     [3, 2, 5],    // requires progress
    gratuitos:    [1, 3, 4, 6, 8, 10, 12],
    certificado:  [5, 11, 2, 7, 9]
  };

  function cardHTML(c, opts = {}) {
    const isFree = c.free;
    const showProgress = opts.row === 'continue' || c.progress > 0;
    return `
      <article class="card" data-cat="${c.category}" tabindex="0" aria-label="${c.title}">
        <div class="card__thumb" style="background-image:url('${c.thumb}')">
          <div class="card__badges">
            <span class="card__badge card__badge--cat">${c.tag}</span>
            <span class="card__badge ${isFree ? 'card__badge--free':'card__badge--premium'}">
              ${isFree ? 'Gratuito' : 'Premium'}
            </span>
          </div>
          <span class="card__rating" aria-label="Avaliação ${c.rating}">
            ★ ${c.rating.toFixed(1)}
          </span>
          <div class="card__hoverplay" aria-hidden="true">
            <svg viewBox="0 0 64 64"><circle cx="32" cy="32" r="30" fill="rgba(11,11,15,.55)" stroke="rgba(255,255,255,.6)" stroke-width="2"/><path d="M26 22v20l16-10z" fill="#fff"/></svg>
          </div>
          ${showProgress ? `<div class="card__progress"><i style="width:${Math.max(c.progress,6)}%"></i></div>` : ''}
        </div>
        <div class="card__body">
          <div class="card__cat">${c.tag}</div>
          <h3 class="card__title">${c.title}</h3>
          <div class="card__meta">
            <span><b>${c.teacher}</b></span>
            <span>${c.duration}</span>
            <span>${c.level}</span>
          </div>
        </div>
      </article>`;
  }

  function renderRow(name) {
    const track = $(`.row[data-row="${name}"] .row__track`);
    if (!track) return;
    const ids = ROWS[name] || [];
    track.innerHTML = ids.map(id => {
      const c = COURSES.find(x => x.id === id);
      return c ? cardHTML(c, { row: name }) : '';
    }).join('');
  }

  Object.keys(ROWS).forEach(renderRow);

  /* ============ CATEGORY CHIPS FILTER ============ */
  const chips = $$('.chip');
  chips.forEach(chip => {
    chip.addEventListener('click', () => {
      chips.forEach(c => c.classList.remove('is-active'));
      chip.classList.add('is-active');
      const cat = chip.dataset.cat;
      $$('.card').forEach(card => {
        const match = cat === 'todos' || card.dataset.cat === cat;
        card.style.display = match ? '' : 'none';
      });
    });
  });

  /* ============ STORIES SLIDER ============ */
  const storiesTrack = $('#storiesTrack');
  const storyPrev = $('#storyPrev');
  const storyNext = $('#storyNext');
  if (storiesTrack && storyPrev && storyNext) {
    let s = 0;
    const count = $$('.story', storiesTrack).length;
    function update() { storiesTrack.style.transform = `translateX(-${s * 100}%)`; }
    storyNext.addEventListener('click', () => { s = (s + 1) % count; update(); });
    storyPrev.addEventListener('click', () => { s = (s - 1 + count) % count; update(); });

    // Touch swipe
    let sx = 0, sdx = 0;
    storiesTrack.addEventListener('touchstart', e => { sx = e.touches[0].clientX; sdx = 0; }, { passive: true });
    storiesTrack.addEventListener('touchmove',  e => { sdx = e.touches[0].clientX - sx; }, { passive: true });
    storiesTrack.addEventListener('touchend',   () => {
      if (Math.abs(sdx) > 40) { s = (s + (sdx < 0 ? 1 : -1) + count) % count; update(); }
    });

    // Autoplay (gentle, paused on hover/focus, reduced-motion safe)
    let stTimer;
    function stStart() { if (!prefersReduced) stTimer = setInterval(() => { s = (s + 1) % count; update(); }, 7000); }
    function stStop() { clearInterval(stTimer); }
    storiesTrack.addEventListener('mouseenter', stStop);
    storiesTrack.addEventListener('mouseleave', stStart);
    stStart();
  }/* End custom CSS */