/* ===== Curso Header Consolidado ===== */
.curso-header {
  position: relative;
  height: 300px;
  background-image: url('img/ajedrez.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  margin-bottom: 2.618rem;
  overflow: hidden; /* asegura que overlay y elementos no sobresalgan */
}

.curso-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,0.6);
  z-index: 0;
}

.curso-header h1,
.curso-header p,
.curso-header .badge,
.curso-header .btn-modern {
  position: relative;
  z-index: 1;
}

/* ===== Tarjetas de cursos (cursos.html) ===== */
.course-card { border:3px solid transparent; border-radius:12px; transition:border-color .3s, transform .3s, box-shadow .3s; }
.course-card:hover { border-color:#f97316; transform: translateY(-6px); box-shadow:0 12px 20px rgba(0,0,0,.2); }
.course-card .card-body .card-title{ font-size:1.8rem; }
.course-card .card-body .microcopy{ font-size:1.2rem; }
.course-card .card-body .feature-list{ font-size:1.1rem; }
.course-card .card-body .feature-list li i{ font-size:1.2rem; }
.course-card .card-body .btn{ font-size:1.15rem; padding:.6rem 1.2rem; }

/* ===== "Lo que aprenderás" ===== */
.aprenderas h2.h3.fw-bold{ font-size:2.618rem; margin-bottom:1.618rem; }
.aprenderas .feature-list li{ font-size:1.2rem; margin-bottom:.618rem; }
.aprendizaje li::before{ content:'✔'; color:#10B981; font-weight:700; margin-right:.4rem; }

/* ===== Precios y planes ===== */
.precios { display:flex; flex-wrap:wrap; gap:1.618rem; justify-content:center; margin-bottom:2.618rem; }
.plan {
  border:3px solid #111827; border-radius:12px; padding:1rem; width:260px; background:#fff; text-align:center;
  box-shadow:0 4px 8px rgba(0,0,0,.1); transition:transform .3s, box-shadow .3s;
  display:flex; flex-direction:column;
}
.plan:hover { transform: translateY(-8px); box-shadow:0 12px 20px rgba(0,0,0,.2); }
.plan h3{ font-size:1.35rem; margin-bottom:.618rem; }
.precio{ font-size:1.1rem; text-decoration:line-through; color:#666; }
.descuento{ font-size:1.2rem; color:#e11d48; font-weight:700; }

/* ===== Price cards ===== */
.price-card {
  border:4px solid transparent; border-radius:12px; padding:1rem; background:#fff; text-align:center;
  box-shadow:0 4px 8px rgba(0,0,0,.1);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.price-card:hover { transform: translateY(-8px); box-shadow:0 12px 20px rgba(0,0,0,.2); border-color:#f97316; }
.price-card .card-title{ font-size:2rem; margin-bottom:.5rem; font-weight:700; }
.price-card .strike{ text-decoration:line-through; color:#666; font-size:1.1rem; margin-right:.5rem; }
.price-card p.display-6.fw-bold{ font-size:2rem; color:#050505; font-weight:700; }
.price-card .feature-list{ list-style:none; padding-left:0; margin-bottom:1rem; }
.price-card .feature-list li{ display:flex; align-items:center; gap:.5rem; font-size:1.05rem; }
.price-card .card-body{ display:flex; flex-direction:column; }

/* ===== Botón moderno reutilizable ===== */
.btn-modern{
  display:inline-block; padding:10px 24px; font-size:1.1rem; font-weight:700; border-radius:50px;
  background: linear-gradient(135deg,#f97316,#facc15); color:#111827; border:none;
  transition: all .3s ease; text-align:center; box-shadow:0 6px 12px rgba(0,0,0,.15); text-decoration:none; cursor:pointer;
}
.btn-modern:hover{
  background: linear-gradient(135deg,#facc15,#f97316);
  transform: translateY(-3px) scale(1.05);
  box-shadow:0 12px 20px rgba(0,0,0,.25);
  color:#111827;
}
.btn-modern:active{ transform: translateY(0) scale(.98); box-shadow:0 4px 8px rgba(0,0,0,.2); }

/* Variantes */
.btn-modern.primary{ background: linear-gradient(135deg,#0d6efd,#3b8bff); color:#fff; }
.btn-modern.primary:hover{ background: linear-gradient(135deg,#0b5ed7,#367ae6); }
.btn-modern.success{ background: linear-gradient(135deg,#198754,#28a96b); color:#fff; }
.btn-modern.success:hover{ background: linear-gradient(135deg,#157347,#239a60); }
.btn-modern.dark-outline{ background:#fff; color:#111827; border:2px solid #111827; }
.btn-modern.dark-outline:hover{ background:#111827; color:#fff; }

/* Responsive pequeño */
@media (max-width:575px){
  .course-card .card-body .card-title{ font-size:1.25rem; }
  .btn-modern{ padding:10px 16px; font-size:1rem; }
}


/* ===== Encabezado de página de curso ===== */
.curso-header {
  position: relative;
  height: 300px; /* ajusta si quieres más alto */
  background-image: url('img/ajedrez.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  margin-bottom: 2.618rem;
}

.curso-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,0.6);
  z-index: 0;
}

.curso-header h1,
.curso-header p,
.curso-header .badge {
  position: relative;
  z-index: 1;
}


/* ===== Encabezado de página de curso ===== */
.curso-header {
  position: relative;
  height: 300px; /* ajusta si quieres más alto */
  background-image: url('img/ajedrez.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  margin-bottom: 2.618rem;
}

.curso-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0,0,0,0.6);
  z-index: 0;
}

.curso-header h1,
.curso-header p,
.curso-header .badge {
  position: relative;
  z-index: 1;
}