/* =======================
   Variables fáciles de cambiar
   ======================= */
:root{
  --font-title: 2.618rem;
  --font-subtitle: 1.618rem;
  --font-normal: 1rem;
  --font-large: 1.272rem;
  --spacing-small: 0.618rem;
  --spacing-medium: 1rem;
  --spacing-large: 1.618rem;
  --spacing-xlarge: 2.618rem;
}

/* =======================
   Body y Navbar
   ======================= */
body{
  font-family: Arial, sans-serif;
  margin: 0;
  padding-top: 80px; /* espacio para navbar */
  background: #f8f8f8;
}

.navbar{
  background-color: #111827;
  padding: var(--spacing-small) var(--spacing-medium);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1030;
}

.navbar a.nav-link,
.navbar .navbar-brand{
  color: #f8fafc;
}

.navbar a.nav-link:hover{
  color: #f97316;
}

/* =======================
   Hero
   ======================= */
.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: white;
  margin-bottom: var(--spacing-xlarge);
}

.curso-header::before{
  content:'';
  position:absolute;
  top:0; left:0; width:100%; height:100%;
  background-color: rgba(0,0,0,0.6);
  z-index:0;
}

.curso-header h1,
.curso-header p{
  position:relative; z-index:1;
  margin: var(--spacing-small);
}

.curso-header .badge{ position:relative; z-index:1; margin:0 .3rem .3rem 0; }

/* Hero general */
.hero{ position:relative; background-color:#000; overflow:hidden; }
.hero .container{ position:relative; z-index:1; }
.hero::before{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:0; }
.hero img{ width:100%; height:auto; display:block; }
.hero h1, .hero p, .hero .badge{ position:relative; color:#fff; z-index:2; }

/* =======================
   Tarjetas de cursos (cursos.html)
   ======================= */
.course-card .card-body .card-title{ font-size:1.8rem !important; }
.course-card .card-body .microcopy{ font-size:1.2rem !important; }
.course-card .card-body .feature-list{ font-size:1.1rem !important; }
.course-card .card-body .feature-list li i{ font-size:1.2rem !important; }
.course-card .card-body .btn{ font-size:1.15rem !important; padding:0.6rem 1.2rem !important; }

/* =======================
   "Lo que aprenderás"
   ======================= */
.aprenderas h2.h3.fw-bold{ font-size:2.618rem; margin-bottom:1.618rem; }
.aprenderas .feature-list li{ font-size:1.618rem; margin-bottom:0.618rem; }
.aprenderas .feature-list li i{ font-size:1.618rem; }

/* Icon-style for lists */
.aprendizaje li::before{ content:'✔'; color:#10B981; font-weight:bold; }

/* =======================
   Precios y planes
   ======================= */
.precios{
  display:flex; flex-wrap:wrap; gap:var(--spacing-large);
  justify-content:center; margin-bottom:var(--spacing-xlarge);
}

.plan{
  border:3px solid #111827; border-radius:12px; padding:var(--spacing-medium);
  width:250px; background:#fff; text-align:center;
  box-shadow:0 4px 8px rgba(0,0,0,0.1); transition:transform .3s ease, box-shadow .3s ease;
  display:flex; flex-direction:column;
}

.plan:hover{ transform:translateY(-8px); box-shadow:0 12px 20px rgba(0,0,0,0.2); }

.plan h3{ font-size:var(--font-subtitle); margin-bottom:var(--spacing-small); }

.precio{ font-size:var(--font-large); text-decoration:line-through; color:#666; }
.descuento{ font-size:var(--font-large); color:red; font-weight:bold; }

.plan button{
  padding:var(--spacing-small) var(--spacing-medium);
  font-size:var(--font-normal);
  background:#007BFF; color:white; border:none; border-radius:5px; cursor:pointer;
}
.plan button:hover{ background:#0056b3; }

/* =======================
   Tarjetas de precios (price-card)
   ======================= */
.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,0.1);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* Default hover border (se ajusta por modificador si se quiere) */
.price-card:hover{
  transform:translateY(-8px);
  box-shadow:0 12px 20px rgba(0,0,0,0.2);
  border-color: #f97316; /* naranja por defecto */
}

.price-card .card-title{ font-size:2rem; margin-bottom:.5rem; font-weight:bold; }

.price-card .strike{ text-decoration:line-through; color:#666; font-size:1.5rem; margin-right:.5rem; }

.price-card p.display-6.fw-bold{ font-size:2rem; color:#050505; font-weight:bold; }

/* Botón genérico dentro de price-card (si se usa .btn de bootstrap) */
.price-card .btn{ margin-top:auto; border-radius:6px; font-weight:bold; font-size:1.25rem; transition:background .3s ease; }
.price-card .btn:hover{ opacity:0.9; transform:translateY(-2px); }

/* Lista de beneficios en price-card */
.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.25rem; }

/* =======================
   Estilos específicos de cursos.html (mantenerlos)
   ======================= */
body.cursos-page .course-card{
  border:3px solid transparent; border-radius:12px;
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
body.cursos-page .course-card:hover{
  border-color:#f97316;
  transform:translateY(-6px);
  box-shadow:0 12px 20px rgba(0,0,0,0.2);
}

/* Esto era tu btn-modern localizado; lo dejamos por compatibilidad, pero creamos
   la versión GLOBAL más abajo para que funcione en otras páginas. */
body.cursos-page .course-card .card-body .btn-modern{
  display:inline-block;
  text-decoration:none;
  font-weight:600;
  font-size:1.15rem;
  padding:0.65rem 1.5rem;
  border-radius:50px;
  background: linear-gradient(135deg,#f97316,#facc15);
  color:#111827;
  transition:all .3s ease;
  box-shadow:0 6px 12px rgba(0,0,0,0.15);
  text-align:center;
  border:none;
}
body.cursos-page .course-card .card-body .btn-modern:hover{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 12px 20px rgba(0,0,0,0.25);
  background: linear-gradient(135deg,#facc15,#f97316);
  color:#111827;
}
body.cursos-page .course-card .card-body .btn-modern:active{
  transform:translateY(0) scale(.98);
  box-shadow:0 4px 8px rgba(0,0,0,0.2);
}

/* =======================
   btn-modern GLOBAL (idéntico al de cursos.html)
   ======================= */
/* btn-modern global (ajustado al texto) */
.btn-modern{
  display: inline-block; /* ya no ocupa todo el ancho */
  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 0.3s ease;
  text-align: center;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  text-decoration: none;
  cursor: pointer;
}

/* Hover / active idénticos */
.btn-modern:hover{
  background: linear-gradient(135deg,#facc15,#f97316);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 20px rgba(0,0,0,0.25);
  color: #111827;
}
.btn-modern:active{
  transform: translateY(0) scale(.98);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}


/* Variantes por color (opcional): las dejo por si quieres usarlas */
.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; }

/* Asegurar que los botones dentro de price-card ocupen ancho y queden al fondo */
.price-card .card-body{ display:flex; flex-direction:column; }
.price-card .btn-modern{ width:100%; margin-top:auto; }

/* =======================
   Ajustes responsivos si quieres
   ======================= */
@media (max-width:575px){
  .course-card .card-body .card-title{ font-size:1.2rem !important; }
  .btn-modern{ padding:10px 16px; font-size:1rem; }
}