/* ===== CERFOM | Sección Cursos (estilo según captura) ===== */
:root {
  --cerfom-azul: #2b49d5;
  --texto: #1f2937;
  --muted: #6b7280;
}

.cerfom-courses.wrap{
  max-width: 1160px;
  margin: 0 auto;
  padding: 40px 16px 70px;
}

/* Encabezado */
.cerfom-courses__header{
  text-align:center;
  margin-bottom: 18px;
}
.cerfom-courses .eyebrow{
  display:block;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--muted);
  margin-bottom:10px;
}
.cerfom-courses h2{
  margin:0 0 16px 0;
  color: var(--cerfom-azul);
  font-weight:800;
  line-height:1.1;
  font-size: clamp(32px, 5vw, 54px); /* grande como en la imagen */
}

/* Filtros (tipo enlaces) */
.cerfom-courses__filters{
  display:flex;
  flex-wrap:wrap;
  gap:14px 18px;
  justify-content:center;
  margin:6px 0 18px;
}
.cerfom-courses__filters .filter-pill{
  background:none;
  border:none;
  padding:0;
  font:inherit;
  font-size:14px;
  color: #6b7280;
  cursor:pointer;
  border-bottom:1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.cerfom-courses__filters .filter-pill:hover{
  color: var(--cerfom-azul);
}
.cerfom-courses__filters .filter-pill.is-active{
  color: var(--cerfom-azul);
  border-color: var(--cerfom-azul);
}

/* Grid sin separaciones (como mosaico) */
.cerfom-courses__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:0; /* sin espacios entre imágenes */
  overflow:hidden;
  border-radius:10px; /* bordes suaves al conjunto */
}

/* Tarjeta/imagen */
.course-card{
  position:relative;
  overflow:hidden;
  background:#eef2ff;
  /* Relación apaisada como en la captura */
  aspect-ratio: 3 / 2;
}
.course-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition: transform .35s ease;
}
.course-card:hover img{
  transform: scale(1.035);
}

/* Oculta pie de foto (la captura no muestra textos sobre las fotos) */
.course-card figcaption{
  position:absolute;
  inset:auto 0 0 0;
  padding:10px 12px;
  font-size:13px;
  color:#fff;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0));
  opacity:0;           /* oculto por defecto */
  pointer-events:none;
  transition: opacity .2s ease;
}
.course-card:hover figcaption{ opacity:1; }

/* Responsive */
@media (max-width: 900px){
  .cerfom-courses__grid{ grid-template-columns: repeat(2,1fr); }
  .cerfom-courses h2{ font-size: clamp(28px, 6vw, 44px); }
}
@media (max-width: 560px){
  .cerfom-courses__grid{ grid-template-columns: 1fr; }
  .course-card{ aspect-ratio: 16 / 10; }
}