/* ═══════════════════════════════════════════
   COURSES PAGE STYLES
═══════════════════════════════════════════ */

.courses-page {
  padding:80px 64px;
  min-height:100vh;
}

.courses-page-header {
  text-align:center; margin-bottom:60px;
}

.courses-page-header h1 {
  font-size:clamp(2.2rem,5vw,3.6rem);
  font-weight:900; margin-bottom:16px; letter-spacing:-1px;
}

.courses-page-header p {
  font-size:18px; color:#aaa; max-width:600px; margin:0 auto 40px;
}

.courses-filters {
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}

.filter-btn {
  padding:10px 24px;
  background:transparent;
  border:1px solid rgba(255,255,255,0.2);
  color:#bbb;
  border-radius:var(--r-md);
  font-size:14px; font-weight:600;
  cursor:pointer;
  transition:all var(--t);
}

.filter-btn:hover {
  border-color:var(--blue);
  color:var(--white);
}

.filter-btn.active {
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}

.courses-grid-enhanced {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:32px;
  margin-top:40px;
}

/* Pantallas grandes */
@media (min-width: 1280px) {
  .courses-grid-enhanced {
    grid-template-columns: repeat(3, 1fr);
  }
}

.course-card-enhanced {
  background:var(--card-bg);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:all var(--t);
  display:flex; flex-direction:column;
  opacity:0;
  animation:slideIn 0.6s ease forwards;
}

.course-card-enhanced:nth-child(1) { animation-delay:0.1s; }
.course-card-enhanced:nth-child(2) { animation-delay:0.2s; }
.course-card-enhanced:nth-child(3) { animation-delay:0.3s; }
.course-card-enhanced:nth-child(n+4) { animation-delay:0.4s; }

.course-card-enhanced:hover {
  border-color:var(--blue);
  box-shadow:0 8px 32px rgba(41,171,226,0.15);
  transform:translateY(-4px);
}

.course-card-enhanced .thumb { 
  position:relative; 
  aspect-ratio:16/9; 
  overflow:hidden; 
}

.course-card-enhanced .thumb-img {
  width:100%; height:100%; object-fit:cover;
  transition:transform 0.6s ease;
}

.course-card-enhanced:hover .thumb-img { 
  transform:scale(1.05); 
}

.card-meta {
  display:flex; gap:16px; margin:16px 0; font-size:13px; color:#888;
}

.meta-item {
  display:flex; align-items:center; gap:6px;
}

.meta-item span { 
  display:flex; 
}

.card-buttons {
  display:flex; gap:8px; margin-top:auto; padding-top:16px;
}

.btn-detail {
  flex:1.5;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--blue); color:#fff;
  border:none; padding:12px 16px;
  border-radius:var(--r-md);
  font-size:13px; font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:all var(--t);
}

.btn-whatsapp {
  flex:0.8;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:rgba(41,171,226,0.2); color:var(--blue);
  border:1px solid rgba(41,171,226,0.3);
  padding:10px 12px;
  border-radius:var(--r-md);
  font-size:12px; font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:all var(--t);
}

.btn-whatsapp:hover {
  background:rgba(41,171,226,0.3);
  border-color:rgba(41,171,226,0.5);
}

.btn-detail:hover {
  background:var(--blue-dark);
  box-shadow:0 4px 16px rgba(41,171,226,0.3);
}

/* Animations */
@keyframes slideIn {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:translateY(0); }
}

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width:768px) {
  .courses-page { padding:60px 24px; }
  .courses-grid-enhanced { grid-template-columns:1fr; }
}


/* Ocultar overlay por defecto */
.thumb-title-overlay {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Mostrar al hacer hover sobre la card */
.course-card-enhanced:hover .thumb-title-overlay,
.course-card:hover .thumb-title-overlay {
  opacity: 1;
  transform: translateY(0);
}