/* formacion.css — estilos específicos para la página de Formación
   - Complementa estilos.css (variables: --gold, --muted, etc).
   - Guardar en /css/formacion.css
*/

/* HERO específico */
.hero-courses {
  min-height: 240px;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
  color: #fff;
}
.hero-courses .overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0.48), rgba(0,0,0,0.12));
  border-radius: 12px;
}

/* Grid de cursos */
.courses-grid {
  margin-top: 12px;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

/* Curso (card) */
.course-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.course-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px;
  gap:8px;
}
.course-head h3 { margin:0; font-family:'Merriweather', serif; font-weight:900; }
.level-tag {
  background: rgba(212,175,55,0.12);
  color: var(--gold);
  padding:6px 8px;
  border-radius:10px;
  font-weight:800;
  font-size:0.9rem;
}
.course-img {
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
}
.course-body {
  padding:12px;
}
.course-list { margin:8px 0; padding-left: 1.1rem; color:var(--muted); }
.course-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:8px;
}
.price { font-weight:900; font-size:1rem; }
.action .btn { white-space:nowrap; }

/* CTA large */
.cta-large { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; margin-top:14px; }
.cta-large h3 { margin:0; }
.cta-large p { margin:0; color:var(--muted); }

/* Instructores */
.instructors { margin-top:14px; padding:12px; }
.instructors-grid { display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; }
.instructor { width:120px; text-align:center; }
.instructor img { width:120px; height:120px; object-fit:cover; border-radius:10px; display:block; margin-bottom:8px; }

/* FAQ */
.faq { margin-top:14px; padding:12px; }
.faq details { margin-bottom:8px; }

/* Sidebar quick widgets */
.contact-quick .btn { display:block; width:100%; text-align:center; }
.schedule ul { margin:0; padding-left:1.1rem; color:var(--muted); }

/* Responsive */
@media (min-width:720px) {
  .courses-grid { grid-template-columns: repeat(3, 1fr); }
  .course-card { min-height: 360px; }
  .hero-left { max-width: 60%; }
  .instructors-grid { justify-content:flex-start; }
  .cta-large { padding:18px; }
  .main-grid { grid-template-columns: 1fr 340px; gap:1.2rem; }
}

@media (max-width:719px) {
  .courses-grid { grid-template-columns: 1fr; }
  .instructor { width:100px; }
}

/* Focus / accesibilidad */
a:focus, button:focus, input:focus { outline: 3px solid rgba(212,175,55,0.12); outline-offset:3px; border-radius:6px; }

/* Pequeños ajustes estéticos */
.card { transition: transform .18s ease, box-shadow .18s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(11,11,11,0.08); }
.level-tag { font-weight:800; }