/* Bloque contenedor */
.relacionados-section.rel-fixed{
  background:#f7f7f7;border:1px solid #ddd;border-radius:12px;
  padding:40px 25px;max-width:1100px;margin:40px auto;
  box-shadow:0 2px 10px rgba(0,0,0,.05);text-align:center;
}

/* Grid fijo 4x2 */
.rel-grid-8{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:20px;justify-content:center;align-items:stretch;
}

/* Tarjeta */
.rel-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid #e5e7eb;border-radius:12px;
  overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:0 3px 8px rgba(0,0,0,.05);transition:all .35s ease;
}

/* Imagen protegida contra estilos del template */
.rel-card img{
  display:block;width:100% !important;height:160px !important;object-fit:cover !important;
}

/* Texto */
.rel-info{padding:12px 14px;text-align:left}
.rel-info h4{font-size:15px;color:#111827;margin:0 0 6px;font-weight:700;line-height:1.3;transition:color .3s}
.rel-info p{font-size:13px;color:#6b7280;margin:0;transition:color .3s}

/* Hover con color */
.rel-card:hover{background:#e9eefc;border-color:#2563eb;transform:translateY(-4px);box-shadow:0 8px 18px rgba(37,99,235,.25)}
.rel-card:hover img{transform:scale(1.05)}
.rel-card:hover .rel-info h4{color:#1d4ed8}
.rel-card:hover .rel-info p{color:#1e3a8a}

/* Responsivo */
@media (max-width:1024px){ .rel-grid-8{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .rel-grid-8{ grid-template-columns:1fr;} }

/* Blindaje extra contra imágenes del template */
.item-page .relacionados-section img{max-width:100% !important;height:auto}
/* ===== TÍTULO CURSOS RELACIONADOS ===== */
.relacionados-section.rel-fixed h3 {
  font-weight: 800;              /* más negrita */
  font-size: 23px;               /* ligeramente más grande */
  color: #111827;
  margin-bottom: 28px;           /* más separación hacia las tarjetas */
  letter-spacing: 0.3px;         /* separación leve entre letras */
}