/* ===== Raga Showcase (landing estilo catálogo) ===== */
:root{
  --hero-grad: radial-gradient(1200px 600px at 20% -10%, #1d3b8a66 0%, transparent 60%),
               radial-gradient(1200px 600px at 90% 0%, #0aa37b55 0%, transparent 55%);
}
.hero{
  border-radius: 18px;
  background: var(--card);
  border:1px solid var(--line);
  padding: 28px 28px 24px;
  position: relative;
  overflow: hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: var(--hero-grad);
  pointer-events:none;
}
.hero h1{ margin:0 0 8px; font-size: clamp(24px, 5vw, 36px); letter-spacing:.2px }
.hero p.lead{ margin:0 0 14px; color:#cfe3ff }

.hero .actions{ display:flex; gap:10px; flex-wrap:wrap }
.hero .actions .btn{ font-size:15px }
.hero .actions .ghost{ font-size:15px }

.catalog-controls{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:14px 0 6px;
}
.catalog-controls form{ display:flex; gap:8px; flex:1 }
.catalog-controls input[type=text]{ flex:1 }
.catalog-controls .chip{ padding:6px 10px }

.catalog-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:16px;
}
.course-card{
  background: var(--surface);
  border:1px solid #233255;
  border-radius: 16px;
  overflow:hidden;
  transition: transform .16s ease, box-shadow .2s ease, border-color .2s ease;
}
.course-card:hover{
  transform: translateY(-2px);
  border-color:#2f4aa0;
  box-shadow: var(--shadow);
}
.course-card .cover{
  position:relative; display:block; height:170px; background:#0b1327;
}
.course-card .cover img{
  width:100%; height:100%; object-fit:cover;
}
.course-card .badge{
  position:absolute; left:10px; top:10px;
  background:#0a1d3d; color:#bcd2ff; border:1px solid #2a3a5c;
  padding:4px 8px; border-radius:999px; font-size:12px;
}
.course-card .info{ padding:12px }
.course-card h3{ margin:0 0 6px; font-size:18px }
.course-card p.desc{ margin:0 0 10px; color:var(--muted); min-height:40px }
.course-card .meta{ display:flex; gap:8px; align-items:center; color:#9fb5e8; font-size:12px; margin-bottom:8px }
.course-card .cover { position:relative; display:block; height: 180px; background:#0b1327; overflow: hidden; }
.course-card .cover video,
.course-card .cover img { width:100%; height:100%; object-fit: cover; display:block; }