.course-header {
  background: #1c1d1f;
  padding: 40px 0;
  color: white;
}

.breadcrumb {
  background: transparent;
  padding: 0;
  margin-bottom: 20px;
  font-size: 14px;
}

.breadcrumb-item a {
  color: #c0c4fc;
  text-decoration: none;
}

.breadcrumb-item a:hover {
  color: #fff;
  text-decoration: underline;
}

.breadcrumb-item.active {
  color: rgba(255, 255, 255, 0.7);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.7);
  content: "›";
  padding: 0 8px;
}

.course-title-detail {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.2;
}

.course-subtitle {
  font-size: 19px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 16px;
  line-height: 1.4;
}

.course-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.course-rating .badge-warning {
  background: #f3ca8c;
  color: #3d3c0a;
  font-weight: 700;
  padding: 4px 8px;
  font-size: 14px;
}

.rating-text {
  color: #c0c4fc;
  font-size: 14px;
}

.course-author {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 14px;
}

.author-label {
  color: rgba(255, 255, 255, 0.7);
}

.author-link {
  color: #c0c4fc;
  text-decoration: underline;
  font-weight: 500;
}

.author-link:hover {
  color: #fff;
}

.course-updated {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.course-updated i {
  margin-right: 6px;
}

/* ===== SIDEBAR CARD (Flotante) ===== */
.course-sidebar-card {
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.08);
  overflow: hidden;
  position: sticky;
  top: 80px;
}

.course-image-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  cursor: pointer;
}

.course-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.course-image-preview:hover .preview-overlay {
  opacity: 1;
}

.btn-preview {
  background: white;
  border: none;
  padding: 12px 20px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-preview:hover {
  transform: scale(1.05);
}

.btn-preview i {
  font-size: 16px;
}

.price-section {
  padding: 16px 24px;
}

.price-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.price-current {
  font-size: 32px;
  font-weight: 700;
  color: #1c1d1f;
}

.price-original {
  font-size: 16px;
  color: #6a6f73;
  text-decoration: line-through;
}

.discount-percent {
  background: #eceb98;
  color: #3d3c0a;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
}

.action-buttons {
  padding: 0 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.btn-enroll-primary,
.btn-enroll-secondary {
  width: 100%;
  padding: 12px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 16px;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn-enroll-primary {
  background: #FF1F66;
  color: white;
}

.btn-enroll-primary:hover {
  background: #FF592A;
  color: white;
}

.btn-enroll-secondary {
  background: white;
  color: #1c1d1f;
  border: 1px solid #1c1d1f;
}

.btn-enroll-secondary:hover {
  background: #f7f9fa;
  color: #1c1d1f;
}

.guarantee-text {
  text-align: center;
  padding: 0 24px 16px;
  font-size: 14px;
  color: #6a6f73;
}

.includes-section {
  padding: 16px 24px;
  border-top: 1px solid #d1d7dc;
}

.includes-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #1c1d1f;
}

.includes-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.includes-list li {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #1c1d1f;
}

.includes-list i {
  color: #1c1d1f;
  width: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.share-section {
  padding: 16px 24px;
  border-top: 1px solid #d1d7dc;
  display: flex;
  justify-content: space-between;
}

.share-link {
  font-size: 14px;
  color: #5624d0;
  text-decoration: none;
  font-weight: 600;
}

.share-link:hover {
  color: #401b9c;
}

/* ===== COURSE CONTENT ===== */
.course-detail-section {
  padding: 40px 0;
  background: white;
}

.content-card {
  background: white;
  padding: 24px;
  border: 1px solid #d1d7dc;
  margin-bottom: 24px;
}

.section-title-detail {
  font-size: 24px;
  font-weight: 700;
  color: #1c1d1f;
  margin-bottom: 16px;
}

.learning-objectives {
  border: 1px solid #d1d7dc;
  padding: 24px;
}

.objectives-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.objectives-list li {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 14px;
  color: #1c1d1f;
}

.objectives-list i {
  color: #1c1d1f;
  flex-shrink: 0;
  margin-top: 2px;
}

.course-description-full {
  font-size: 14px;
  line-height: 1.6;
  color: #1c1d1f;
}

.instructors-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.instructor-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.instructor-photo-small {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.instructor-photo-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.instructor-info-small {
  flex: 1;
}

.instructor-name-small {
  font-size: 19px;
  font-weight: 700;
  color: #1c1d1f;
  margin-bottom: 4px;
}

.instructor-role {
  font-size: 12px;
  background: #5624d0;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 8px;
  font-weight: 600;
}

.instructor-title-small {
  font-size: 14px;
  color: #6a6f73;
  margin-bottom: 8px;
}

.instructor-specialty-small {
  font-size: 14px;
  color: #1c1d1f;
  font-weight: 600;
  margin-bottom: 8px;
}

.instructor-bio {
  font-size: 14px;
  color: #1c1d1f;
  line-height: 1.6;
  margin-top: 12px;
}

.manuals-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.manual-item {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px;
  background: #f7f9fa;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.manual-item:hover {
  background: #e3e7ea;
}

.manual-icon {
  width: 48px;
  height: 48px;
  background: #a435f0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  flex-shrink: 0;
}

.manual-info {
  flex: 1;
}

.manual-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}

.manual-title a {
  color: #1c1d1f;
  text-decoration: none;
}

.manual-title a:hover {
  color: #5624d0;
}

.manual-category {
  font-size: 14px;
  color: #6a6f73;
  margin: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991px) {
  .course-header {
    padding: 24px 0;
  }

  .course-title-detail {
    font-size: 24px;
  }

  .course-subtitle {
    font-size: 16px;
  }

  .course-sidebar-card {
    position: static;
    margin-top: 24px;
  }
}